> For the complete documentation index, see [llms.txt](https://utd-bv.gitbook.io/manual-shopify-theme-ultra/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://utd-bv.gitbook.io/manual-shopify-theme-ultra/ultra-sections/sections-and-snippets/banner-with-thumbnails.md).

# 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");