> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/flute-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webibazaar.gitbook.io/flute-documentation/sections/banner-showcase.md).

# Banner showcase

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

The **Banner Showcase** section is an interactive banner slider that allows you to present multiple promotional banners in a single section using tab-style navigation. Each tab can feature a different collection, product, or promotional campaign with its own image, content, and call-to-action button.

Unlike a standard banner, Banner Showcase lets customers switch between multiple featured promotions without leaving the page, making it ideal for showcasing categories, seasonal campaigns, or best-selling collections.&#x20;

#### When should I use this?

Use the **Banner Showcase** section when you want to display multiple featured banners while keeping your homepage clean and organized.

This section is ideal for:

* Promoting multiple collections in one section.
* Highlighting seasonal campaigns.
* Displaying different product categories.
* Featuring best sellers and new arrivals.
* Creating interactive homepage banners.
* Improving product discovery with tab navigation.

**Examples**

* Casual Shoes
* Running Shoes
* Sports Shoes

> **Tip:** Banner Showcase works best when each tab highlights a different collection or promotion with high-quality imagery and concise content.

## How to add this section

{% hint style="success" %}
**Steps**

1. From your Shopify Admin, go to **Online Store → Themes**.
2. Click **Customize** on your published theme.
3. Open the page where you want to display the section.
4. Click **Add section**.
5. Select **Banner Showcase**.
6. Configure the section settings.
7. Click **Add Tab Content** to create individual banner tabs.
8. Configure each Tab Content block.
9. Save your changes.
   {% endhint %}

{% hint style="info" %}
**Recommendation Size**\
Banner Showcase custom preview image size: 1154x590\
Banner Showcase collection custom image size: 350x230
{% endhint %}

<table><thead><tr><th width="286">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Layout</td><td><p>Controls how the banner is displayed.</p><ul><li>Wide — Displays a large promotional banner across the available content area.</li><li>Grid — Displays banners inside a structured grid layout.</li></ul></td></tr><tr><td>Banner height</td><td><p>Controls the height of the banner.</p><ul><li>Adapt to first image</li><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Content style</td><td><p><strong>Show container on desktop</strong></p><p>Displays the banner content inside a content container on desktop devices. </p><p>For visual guide show <a href="#show-container-on-desktop"><mark style="color:$primary;">screenshot</mark></a></p><p></p><p><strong>Content alignment on desktop</strong> </p><p>Controls the horizontal alignment of the banner content.</p><ul><li>Left</li><li>Center</li><li>Right </li></ul><p>For visual guide show <a href="#content-alignment-on-desktop"><mark style="color:$primary;">screenshot</mark></a></p><p></p><p><strong>Vertical position</strong> </p><p>Controls the vertical placement of the content.</p><ul><li>Top</li><li>Middle</li><li>Bottom</li></ul><p>For visual guide show <a href="#vertical-position"><mark style="color:$primary;">screenshot</mark></a></p><p></p><p><strong>Horizontal position on desktop</strong> </p><p>Controls where the content appears horizontally over the banner.</p><ul><li>Left</li><li>Center</li><li>Right</li></ul><p>For visual guide show <a href="#horizontal-position-on-desktop"><mark style="color:$primary;">screenshot</mark></a></p><p></p><p><strong>Text content position on desktop</strong> </p><p>Determines where text is displayed.</p><ul><li>Over image</li><li>Outer image </li></ul><p>For visual guide show <a href="#text-content-position-on-desktop"><mark style="color:$primary;">screenshot</mark></a></p><p>Choose <strong>Over Image</strong> for promotional hero banners or <strong>Outer image</strong> when the image contains important visual details. </p><p></p><p><strong>Enable product</strong> </p><p>When enabled, the product selected in the <strong>Tab Content</strong> block is displayed inside the banner, allowing customers to quickly view product details without leaving the section.</p><ul><li><strong>Enabled</strong> – Displays the featured product card.</li><li><strong>Disabled</strong> – Hides the product card.</li></ul><p><strong>Important</strong>: </p><p>This settings only visible when, you set:</p><ul><li><strong>Text content position on desktop:</strong> <code>Over image</code></li><li><strong>Enable Product:</strong> Enabled</li><li>From Desktop hoverable content '<strong>Content type</strong>' : <code>Text with icon</code></li><li>From Desktop hoverable content '<strong>Content position</strong>' : <code>Over image</code></li></ul><p>For visual guide show <a href="#enable-product"><mark style="color:$primary;">screenshot</mark></a></p><p></p><p><strong>Note:</strong> This setting requires a <strong>Product</strong> to be selected in the corresponding <strong>Tab Content</strong> block.</p></td></tr><tr><td>Desktop hoverable content</td><td><p><strong>Content type</strong> </p><p>Selects the content displayed inside the hoverable navigation tabs.</p><ul><li>Collection</li><li>Text with icon</li></ul><p>For visual guide show <a href="#desktop-hoverable-content-type"><mark style="color:$primary;">screenshot</mark></a></p><p></p><p><strong>Enable Icon Image</strong></p><p>Displays an icon together with each navigation tab.</p><p>This makes the tabs easier to identify visually.</p><p>For visual guide show <a href="#enable-icon-image"><mark style="color:$primary;">screenshot</mark></a></p><p></p><p><strong>Content position</strong></p><p>Controls the position of the navigation tabs.</p><ul><li>Over image</li><li>Below image</li></ul><p>For visual guide show <a href="#desktop-hoverable-content-position"><mark style="color:$primary;">screenshot</mark></a></p><p></p><p><strong>Show carousel pagination</strong></p><p>Displays pagination controls for the Banner Showcase slider.</p><p>Enable this option when multiple banner slides are available.</p><p>For visual guide show <a href="#show-carousel-pagination"><mark style="color:$primary;">screenshot</mark></a></p><p></p><p><strong>Pagination color</strong> </p><p>Choose the color for the carousel pagination dots. Choose a color that contrasts with the background for better visibility.</p></td></tr><tr><td>Color scheme</td><td><p>Selects the predefined color scheme used throughout the section. You can change the background and foreground color of the section using the color scheme:</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6</li></ul></td></tr><tr><td>Marquee text</td><td><p>The Marquee Text feature displays large scrolling promotional text across the Banner Showcase section.</p><p></p><p>This helps create a dynamic visual effect while drawing attention to important marketing messages.</p><p></p><p>For visual guide show <a href="#marquee-text"><mark style="color:$primary;">screenshot</mark></a></p><p></p><p><strong>Requirements</strong></p><p>To use this setting, the following configurations must be applied:</p><p></p><p>Navigate to <strong>Banner showcase Section Settings</strong> and set:</p><ul><li><strong>Text content position on desktop:</strong> <code>Over image</code></li><li><strong>Enable Product:</strong> Enabled</li><li>From Desktop hoverable content '<strong>Content type</strong>' : <code>Text with icon</code></li><li>From Desktop hoverable content '<strong>Content position</strong>' : <code>Over image</code></li></ul><p></p><p><strong>Offer text</strong></p><p>Enter the text that will continuously scroll across the banner. </p><p>Keep the message short and easy to read.</p><p></p><p><strong>Font Size</strong></p><p>Controls the size of the scrolling marquee text.</p><p></p><p>Larger font sizes make the announcement more prominent, while smaller sizes create a subtle visual effect.</p></td></tr><tr><td>Mobile layout</td><td><p><strong>Content alignment</strong> </p><p>Controls text alignment on mobile devices.</p><ul><li>Left</li><li>Center</li><li>Right</li></ul><p>For visual guide show <a href="#mobile-content-alignment"><mark style="color:$primary;">screenshot</mark></a></p><p></p><p><strong>Content under images on mobile</strong> </p><p>Turn this on to move the content <strong>below the image</strong> on mobile devices. For visual guide show <a href="#content-under-images-on-mobile"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Outer space</td><td><p><strong>Top space</strong> </p><p>Add extra space (in pixels) <strong>above the section</strong> to control its placement on the page. </p><p></p><p><strong>Bottom space</strong> </p><p>Add space <strong>below the section</strong> to create proper spacing between sections.</p></td></tr></tbody></table>

<div data-with-frame="true"><figure><img src="/files/RD5xnDgMz9YiS2rQli24" alt=""><figcaption></figcaption></figure></div>

## **Section Settings Screenshot**

#### Show container on desktop

<div data-with-frame="true"><figure><img src="/files/8fGRBeyJLX9MVwzbwZTw" alt=""><figcaption><p><strong>Show container on desktop — Enabled</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/zytvhJHvmV6exEqnbG6I" alt=""><figcaption><p><strong>Show container on desktop — Disabled</strong></p></figcaption></figure></div>

#### Content alignment on desktop

<div data-with-frame="true"><figure><img src="/files/hPNLSE7sh6rssvIGqmUL" alt=""><figcaption><p><strong>Content alignment on desktop — Left</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/j4QX6UWZmSHDDr04e2yV" alt=""><figcaption><p><strong>Content alignment on desktop — Center</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/okugiRWrJdapOXRfJKG0" alt=""><figcaption><p><strong>Content alignment on desktop — Right</strong></p></figcaption></figure></div>

#### Vertical position

<div data-with-frame="true"><figure><img src="/files/jfbs5LUmfhRzcCiD699e" alt=""><figcaption><p><strong>Vertical position — Top</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/tMfQRnzRMU73tqt2uWuR" alt=""><figcaption><p><strong>Vertical position — Middle</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/0yEkyiJDsPc1lL0zCYrf" alt=""><figcaption><p><strong>Vertical position — Bottom</strong></p></figcaption></figure></div>

#### Horizontal position on desktop

<div data-with-frame="true"><figure><img src="/files/I8WVlEsMz5eXHt6kqomN" alt=""><figcaption><p><strong>Horizontal position on desktop — Left</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/OlbgUf2I9l8odpy9z2YM" alt=""><figcaption><p><strong>Horizontal position on desktop — Center</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/O1auNjhFeZOhkCMqVfAb" alt=""><figcaption><p><strong>Horizontal position on desktop — Right</strong></p></figcaption></figure></div>

#### Text content position on desktop

<div data-with-frame="true"><figure><img src="/files/4iYILvVfVZFb0MYeLowt" alt=""><figcaption><p><strong>Text content position on desktop — Over image</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/UbsTSIFt43IrfKW7FabZ" alt=""><figcaption><p><strong>Text content position on desktop — Outer image</strong></p></figcaption></figure></div>

#### Enable product&#x20;

{% hint style="danger" %}
Note: This setting is only visible when '**Text content position on desktop**' is set to '**Over image**', '**Desktop hoverable content type**' is set to '**Text with icon**' and '**Desktop content position**' is also set to '**Over image**'.

<img src="/files/oBonzlFYWSZVK3uDl4FM" alt="" data-size="original">
{% endhint %}

<div data-with-frame="true"><figure><img src="/files/ncSFJWb4IcseT8ZasWpE" alt=""><figcaption><p><strong>Enable product</strong></p></figcaption></figure></div>

#### Desktop hoverable content type

<div data-with-frame="true"><figure><img src="/files/DE60YBAnXyxC0Pk1cdEN" alt=""><figcaption><p> <strong>Desktop hoverable content type — Text with icon</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/rqFYS1q4Sv2qJ766A3OI" alt=""><figcaption><p> <strong>Desktop hoverable content type — Collection</strong></p></figcaption></figure></div>

#### Enable icon image

<div data-with-frame="true"><figure><img src="/files/q8W6CirkGuMorp35KHcN" alt=""><figcaption><p><strong>Enable icon image — Enabled</strong></p></figcaption></figure></div>

{% hint style="danger" %}
Note: '**Enable icon image**' setting only visible when '**Content type**' is set to '**Text with icon**'.
{% endhint %}

#### Desktop hoverable  content position

<div data-with-frame="true"><figure><img src="/files/p6cO1fi1v3RAOFQqBcvd" alt=""><figcaption><p> <strong>Desktop hoverable content position— Below image</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/3xJH8dPKVVq8HoeYKF29" alt=""><figcaption><p> <strong>Desktop hoverable content position— Over image</strong></p></figcaption></figure></div>

#### Show carousel pagination

<div data-with-frame="true"><figure><img src="/files/lHzPkqbGvDyoHbbxijoz" alt=""><figcaption><p><strong>Show carousel pagination — Enabled</strong></p></figcaption></figure></div>

#### Marquee text

{% hint style="danger" %}
**Note**:&#x20;

Navigate to **Banner showcase Section Settings** and set:

* **Text content position on desktop:** `Over image`
* **Enable Product:** Enabled
* From Desktop hoverable content '**Content type**' : `Text with icon`
* From Desktop hoverable content '**Content position**' : `Over image`

<img src="/files/oBonzlFYWSZVK3uDl4FM" alt="" data-size="original">
{% endhint %}

<div data-with-frame="true"><figure><img src="/files/ffUhT2TbpnLbXAnrh0Ru" alt=""><figcaption><p><strong>Marquee text</strong></p></figcaption></figure></div>

#### Mobile content alignment

<div data-with-frame="true"><figure><img src="/files/sKwCelAtdkxb6PbnjmHm" alt=""><figcaption><p><strong>Mobile content alignment - Left</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/8KTiWoFHco7IJJN8p09K" alt=""><figcaption><p><strong>Mobile content alignment - Center</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/6mAe8SI7n0ZbgQHXDhk6" alt=""><figcaption><p><strong>Mobile content alignment - Right</strong></p></figcaption></figure></div>

#### Content under images on mobile

<div data-with-frame="true"><figure><img src="/files/QAMWnIGwZFXORAW5xbys" alt=""><figcaption><p><strong>Content under images on mobile — Enabled</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/owFZMEsz6dvwTxahHCIy" alt=""><figcaption><p><strong>Content under images on mobile — Disabled</strong></p></figcaption></figure></div>

## **Add Tab Content**

The **Tab Content** block represents an individual banner inside the **Banner Showcase** section. Each tab can showcase a different collection, product, or promotional campaign with its own image, heading, description, and button.

When customers select a tab, the corresponding banner and its content are displayed without leaving the page, making it easy to promote multiple categories or campaigns in a single section.

Click on "**Tab content**" and its customization is as follows.

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Custom preview image</td><td>Use "Custom preview image" to add the banner image to the section. For visual guide show <a href="#custom-preview-image"><mark style="color:$primary;">screenshot</mark></a></td></tr><tr><td>Control image opacity</td><td><p>Using this settings, you have the ability to change the opacity of the image overlay. </p><p></p><p>Modify this settings to increase or decrease the opacity level of the overlay on the preview image. </p><p></p><p>For visual guide show <a href="#control-image-opacity"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Collection</td><td><p>Selects the Shopify collection displayed in this banner. The banner automatically loads collection information when a collection is selected. </p><p></p><p>For visual guide show <a href="#collection"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Collection custom image</td><td><p>Optionally upload a different image to display inside the tab content. </p><p>If left blank, the collection’s default image will be used. </p><p></p><p>For visual guide show <a href="#collection-custom-image"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Product</td><td><p>Displays a featured product inside the banner.</p><p></p><p><strong>Important</strong>: </p><p>This settings only works when, you navigate to <strong>Banner showcase Section Settings</strong> and set:</p><ul><li><strong>Text content position on desktop:</strong> <code>Over image</code></li><li><strong>Enable Product:</strong> Enabled</li><li>From Desktop hoverable content '<strong>Content type</strong>' : <code>Text with icon</code></li><li>From Desktop hoverable content '<strong>Content position</strong>' : <code>Over image</code></li></ul><p></p><p>For visual guide show <a href="#product"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Heading</td><td><p><strong>Caption</strong> </p><p>Displays a small label above the heading of tab content in banner showcase section.</p><p></p><p><strong>Caption icon svg</strong> </p><p>Add a custom svg icon to display as a caption icon of tab content in banner showcase section.</p><p>This helps draw additional attention to promotional labels.</p><p></p><p><strong>Text</strong> </p><p>Displays the main promotional heading. </p><p>For visual guide show <a href="#heading"><mark style="color:$primary;">screenshot</mark></a></p><p></p><p><strong>Size</strong> </p><p>Controls the size of the heading.</p><ul><li>Small</li><li>Medium</li><li>Large </li></ul><p></p><p><strong>Description</strong> </p><p>Displays supporting information below the heading. </p><p>For visual guide show <a href="#description"><mark style="color:$primary;">screenshot</mark></a></p></td></tr><tr><td>Button</td><td><p><strong>Label</strong> </p><p>Customizes the button text. </p><p>For visual guide show <a href="#button"><mark style="color:$primary;">screenshot</mark></a></p><p></p><p><strong>Link</strong> </p><p>Add the <strong>page or collection link</strong> where users will be directed when they click the button. This option works only when <strong>no collection is selected</strong> above. </p></td></tr><tr><td>Color scheme</td><td><p>Selects the color scheme for the individual banner. You can change the background and foreground color of the tab content using the color scheme:</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6</li></ul></td></tr><tr><td>Mobile Layout</td><td><p><strong>Custom preview image</strong></p><p>Upload a <strong>mobile-specific preview image</strong> for this tab. This image will be shown on mobile devices instead of the default preview. Leave it blank to use the main preview image. For visual guide show <a href="#mobile-custom-preview-image"><mark style="color:$primary;">screenshot</mark></a></p></td></tr></tbody></table>

<div data-with-frame="true"><figure><img src="/files/IaS0PbAzO4xH2NsMd2nD" alt=""><figcaption></figcaption></figure></div>

## Block Settings Screenshot

#### Custom preview image

<div data-with-frame="true"><figure><img src="/files/mfmSJVS3jcgq0zlkTTNz" alt=""><figcaption><p><strong>Custom preview image</strong></p></figcaption></figure></div>

#### Control image opacity

<div data-with-frame="true"><figure><img src="/files/iONd9bAGgo7ZdLUEY0yj" alt=""><figcaption><p><strong>Control image opacity — 0%</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/kDJJqa1er7Edv4SswMup" alt=""><figcaption><p><strong>Control image opacity — 40%</strong></p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/fx6UMgIZvsDEwh5VplT2" alt=""><figcaption><p><strong>Control image opacity — 70%</strong></p></figcaption></figure></div>

#### Collection

<div data-with-frame="true"><figure><img src="/files/IbPFM3VaAxJPBwwuPaik" alt=""><figcaption><p><strong>Collection</strong></p></figcaption></figure></div>

#### Collection custom image

{% hint style="danger" %}
**Note:** Leave it blank to display the collection image.
{% endhint %}

<div data-with-frame="true"><figure><img src="/files/vQEMcmZxaVlYiVOeDiyU" alt=""><figcaption><p><strong>Collection custom image</strong></p></figcaption></figure></div>

#### Product

{% hint style="danger" %}
**Important**:&#x20;

This settings only works when, you navigate to **Banner showcase Section Settings** and set:

* **Text content position on desktop:** `Over image`
* **Enable Product:** Enabled
* From Desktop hoverable content '**Content type**' : `Text with icon`
* From Desktop hoverable content '**Content position**' : `Over image`

<img src="/files/oBonzlFYWSZVK3uDl4FM" alt="" data-size="original">
{% endhint %}

<div data-with-frame="true"><figure><img src="/files/z4HFoqPEu193VqcBGK1w" alt=""><figcaption><p><strong>Product</strong></p></figcaption></figure></div>

#### Heading

<div data-with-frame="true"><figure><img src="/files/rnoIJKb8cHTTEQVOGk9O" alt=""><figcaption><p><strong>Heading</strong></p></figcaption></figure></div>

#### Description

<div data-with-frame="true"><figure><img src="/files/7KMkfcnwhMcd9bWySDVn" alt=""><figcaption><p><strong>Description</strong></p></figcaption></figure></div>

#### Button

<div data-with-frame="true"><figure><img src="/files/jpo6YdevwYUh5NZeiUQh" alt=""><figcaption><p><strong>Button</strong></p></figcaption></figure></div>

#### Mobile custom preview image

{% hint style="danger" %}
**Note:** Leave it blank to display the main preview image.
{% endhint %}

<div data-with-frame="true"><figure><img src="/files/6Sn4BBIWXEb3YTQH0gTQ" alt=""><figcaption><p><strong>Mobile custom preview image</strong></p></figcaption></figure></div>