> 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-collection.md).

# Banner collection

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

The **Banner Collection** section allows you to display multiple collection banners with images and collections . This section is perfect for highlighting seasonal collections, or special promotions.

{% hint style="info" %}
**Recommendation Size**\
Banner collection image size: 300x380\
Banner image size: 860x720
{% endhint %}

<table><thead><tr><th width="287">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Layout</td><td><p>Choose the display style for the Banner Collection section.</p><ul><li>Grid</li><li>Compact</li></ul></td></tr><tr><td>Heading</td><td>Enter text to display as a main heading in the section.</td></tr><tr><td>Description</td><td>Enter text to display as a description in the section.</td></tr><tr><td>Caption</td><td>Enter text to display as a caption in the banner collection section.</td></tr><tr><td>Banner height</td><td><p>Customization of the "Banner height" in the Banner collection section is as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Button label</td><td>Enter text to display as a button text in the section.</td></tr><tr><td>Show second image</td><td>Enable this settings to show second image.</td></tr><tr><td>Show sub collections</td><td>Enable this settings to display the sub-collections associated with the selected collection.</td></tr><tr><td>Color scheme</td><td><p>In this section, you can change the background and foreground color of a 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></tbody></table>

<figure><img src="/files/2rMngZLB6GpMIOSBbmwi" alt=""><figcaption></figcaption></figure>

## Collection

To add collection to the banner collection section, click on the 'Collection'. There are many options available similar to the banner collection, as you can see in the below points and screenshot:

<table><thead><tr><th width="287">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>Use "Image" to add the collection image to the block.</td></tr><tr><td>Banner image</td><td>Use "Banner image" to add the banner image related to collection image in the block.</td></tr><tr><td>Video</td><td><p><strong>Video</strong></p><p>Upload a video to display within the collection card instead of a static image.</p><p></p><p><strong>Note:</strong> When a video is added, it will be displayed in place of the collection image where supported by the selected layout. </p><p></p><p><strong>URL</strong></p><p>Add a YouTube or Vimeo video URL to display externally hosted video content within the collection card.</p><p></p><p>Supported platforms:</p><ul><li>YouTube</li><li>Vimeo</li></ul><p></p><p>This setting can be used as an alternative to uploading a video directly to Shopify. </p><p></p><p><strong>Play Video on Loop</strong></p><p>Enable this option to continuously replay the video after it reaches the end.</p><p>This creates a seamless viewing experience and is ideal for promotional, lifestyle, and product-focused videos. </p></td></tr><tr><td>Product</td><td>Select a product to associate with the collection card.</td></tr><tr><td>Banner collection</td><td>Use this to select a collection for the block.</td></tr><tr><td>Select sub collections</td><td>Use this to select a collections to display as a sub collections.</td></tr><tr><td>Custom content</td><td><p>This feature works when the collection is empty. </p><p></p><p><strong>Title</strong> </p><p>Enter custom title to display as a collection title in the collection block.</p><p></p><p><strong>Link</strong> </p><p>Use this settings to add collection link in the block.</p></td></tr></tbody></table>

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