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

# Collection banner

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

{% hint style="info" %}
**Recommendation Size**\
Collection image size: 350x230\
Collection banner image size: 900x400
{% endhint %}

## Collection image <a href="#collectionimage" id="collectionimage"></a>

To set up a collection image section:

* Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a collection banner section.
* Select **Collections** > **Default collection**.

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

## From the side panel, select the Collection banner block.

<table><thead><tr><th width="273">Settings</th><th>Description</th></tr></thead><tbody><tr><td>Layout</td><td><p>Customization of the "Layout" in the collection banner is as follows:</p><ul><li>Full width</li><li>Container</li></ul></td></tr><tr><td>Default collection image</td><td>Use "Default collection image" to add the image to the section.</td></tr><tr><td>Show collection image</td><td>Enabling this checkbox will allow you to display the added image in the collection.</td></tr><tr><td>Banner height</td><td><p>Customization of the "Collection banner height" in this section is as follows:</p><ul><li>Adapt to image</li><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Collection list</td><td>Choose specific collections to display in the banner.</td></tr><tr><td>Desktop content placement</td><td><p>Customization of the "Desktop content placement" in the collection banner section is as follows: </p><ul><li>Top</li><li>Middle</li><li>Bottom</li></ul></td></tr><tr><td>Desktop content alignment</td><td><p>Customization of the "Desktop content alignment" in the collection banner section is as follows: </p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Color scheme</td><td><p>You can change the background and foreground color of the Collection banner 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>Mobile content alignment </p><p>Customization of the "Mobile content alignment" in the collection banner section is as follows: </p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr></tbody></table>

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

## Adding Collection banner via metafield

Before you can add Collection image(metafield value) to specific collections, you need to add the necessary metafield definition for this information.

1. From your Shopify admin, go to **Settings** > **Custom data** > **Collections**

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

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

2. Click **Add definition**

<figure><img src="/files/5J8hzdklCNBYokOKzUlB" alt=""><figcaption></figcaption></figure>

3. In the **Name** field, enter `Collection image.`In the **Namespace and key** field, enter `custom.collection_image`

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

4. Click **Select type** then select **File.**

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

5. Than select **Accept all file types.**
6. Click **Save** to save the definition.

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

7. You should see the **Collection image** in the list of definitions by now.

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