# Banner with thumbnails

<figure><img src="/files/yfxvhTpfhJZfZvvD9oLM" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/mEDHMpClj39veN61pUcV" alt=""><figcaption></figcaption></figure>

The Banner with Thumbnails section allows you to display a headline and supporting text alongside interactive thumbnail tabs. Each tab can showcase a different image, making it easy to highlight various products, features, or collections in one place. When customers click on a thumbnail, the main image updates, creating an engaging, slideshow-like experience that’s perfect for storytelling or promotions.

## **Adding a Section**

**`Section`** → **`Banner with thumbnails`**

<figure><img src="/files/MMqH75iUshDrmATtlCpU" alt=""><figcaption></figcaption></figure>

## **Section settings**

### General

<figure><img src="/files/UBRXrNoTx4MR70eWqWQe" alt=""><figcaption></figcaption></figure>

1. **`Label`** - setting allows you to set the section label;
2. **`Heading`** - setting allows you to set the section heading;
3. **`Text`** - setting allows you to set the section text;

### **Colors**

<figure><img src="/files/gNuR86ZrGK5JIEweTec1" alt=""><figcaption></figcaption></figure>

1. **`Background`** - section background color;
2. **`Label`** - section label color;
3. **`Text`** - section text color;
4. **`Tab button background (active)`** - tab background color when it is active;
5. **`Tab button color (active)`** - tab text color when it is active;
6. **`Tab button background`** - tab background color;
7. **`Tab button color`** - tab text color;

### Layout

<figure><img src="/files/pKUBWI8E4WrbX7VFY4jr" alt=""><figcaption></figcaption></figure>

1. **`Container width`** - allows you to set the width of the container: 1400px, 1920px, full width, or inherit the general settings;
2. **`Desktop offset top`** - the **top** indent of the section on the **desktop**;
3. **`Desktop offset bottom`** - the **bottom** indent of the section on the **desktop**;
4. **`Mobile offset top`** - the **top** indent of the section on the **mobile**;
5. **`Mobile offset bottom`** - the **bottom** indent of the section on the **mobile**.

## Block settings

<figure><img src="/files/BEKjO48cNKR72M9jKeIL" alt=""><figcaption></figcaption></figure>

1. **`Heading`** - block heading text;
2. **`Media type`** - you can choose the type of media: image, HTML 5 video, YouTube/Vimeo;
3. **`Image desktop`** - you can set a picture for the desktop (”Image” media type);
4. **`Image mobile`** - you can set a picture for the mobile (”Image” media type);
5. **`HTML 5 desktop video`** - you can set an HTML 5 video for the desktop (”HTML 5 video” media type);
6. **`HTML 5 mobile video`** - you can set an HTML 5 video for the mobile (”HTML 5 video” media type);
7. **`Youtube/Vimeo desktop video url`** - you can set the url for Youtube/Vimeo video for desktop (media type "YouTube/Vimeo");
8. **`Youtube/Vimeo mobile video url`** - you can set the url for Youtube/Vimeo video for mobile (media type "YouTube/Vimeo");


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://utd-bv.gitbook.io/manual-shopify-theme-ultra/ultra-sections/sections-and-snippets/banner-with-thumbnails.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.