# Banner showcase

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

The **Banner Showcase** section allows you to highlight multiple collections or categories in a visually engaging **tabbed banner layout**.&#x20;

<table><thead><tr><th width="286">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Layout</td><td><p>Customization of the "Layout" in this section is as follows:</p><ul><li>Wide</li><li>Grid</li></ul></td></tr><tr><td>Banner height</td><td><p>Customization of the "Banner height" in this section is as follows:</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>Toggle this to enable or disable the container wrapper around banner content on desktop view.</p><p></p><p><strong>Content alignment on desktop</strong> </p><p>Customization of "Content alignment on desktop" is as follows:</p><ul><li>Left</li><li>Center</li><li>Right </li></ul><p></p><p><strong>Horizontal position on desktop</strong> </p><p>Customization of "Horizontal position on desktop" is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul><p></p><p><strong>Text content position on desktop</strong> </p><p>Customization of "Text content position on desktop" is as follows:</p><ul><li>Over image</li><li>Outer image</li></ul></td></tr><tr><td>Desktop hoverable content</td><td><p><strong>Content type</strong> </p><p>Choose what type of content to show when hovering over banners.</p><ul><li>Collection</li><li>Text with icon</li></ul><p></p><p><strong>Content position</strong> </p><p>Customization of "Desktop hoverable content position on desktop" is as follows:</p><ul><li>Over image</li><li>Below image</li></ul><p></p><p><strong>Show carousel pagination</strong></p><p>Turn this on to display <strong>navigation dots</strong> or pagination indicators below the carousel. </p><p></p><p><strong>Pagination color</strong> </p><p>Choose the color for the carousel pagination dots.</p></td></tr><tr><td>Color scheme</td><td><p>In this 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>Mobile layout</td><td><p><strong>Content alignment</strong> </p><p>Customization of "Content alignment on mobile" is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul><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.</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>

<figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2Fm2uF0QiuwnYlNl8hgRBl%2Fbanner-showcase.png?alt=media&#x26;token=21b0bd7e-20c1-469d-bfe0-393b2cffbf7b" alt=""><figcaption></figcaption></figure>

## **Add Tab Content**

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.</td></tr><tr><td>Control image opacity</td><td>Using this settings, you have the ability to change the opacity of the image overlay. Modify this settings to increase or decrease the opacity level of the overlay on the preview image.</td></tr><tr><td>Collection</td><td>Select the <strong>Shopify collection</strong> that this tab will display.</td></tr><tr><td>Collection custom image</td><td>Optionally upload a different image to display inside the tab content. If left blank, the collection’s default image will be used.</td></tr><tr><td>Heading</td><td><p><strong>Text</strong> </p><p>Add a heading that appears as the <strong>tab title</strong>. </p><p></p><p><strong>Size</strong> </p><p>Customization of the "Tab title size" in this section is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large </li></ul><p></p><p><strong>Description</strong> </p><p>Add text to display as a description in the section.</p></td></tr><tr><td>Button</td><td><p><strong>Label</strong> </p><p>Enter a text to display as a button label in the section. </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>In this section, 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.</p></td></tr></tbody></table>

<figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FwITEqOisY1qrbsv9TtKm%2Fbanner-showcase-block.png?alt=media&#x26;token=e5451808-b350-4e50-a829-896c5d13a65c" alt=""><figcaption></figcaption></figure>
