# Collection banner

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

### Collection banner <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="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FmDV2yOPLWfMMpVpuadgU%2Fdefault-collection.png?alt=media&#x26;token=2e1ddad2-2473-41a2-8adf-8f814e434c7d" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FJXN6LQDwMPUKhyHvPnrm%2Fcollection-banner.png?alt=media&#x26;token=7392ed62-0b69-40a7-a15c-effb9b44a942" alt=""><figcaption></figcaption></figure>

* You can select Description or Image.
* Click Save.

<table><thead><tr><th width="230">Settings</th><th>Description</th></tr></thead><tbody><tr><td>Heading size</td><td><p>Customization of "Heading size" as follows:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Heading alignment</td><td><p>Customization of "Content alignment" as follows:</p><ul><li>Left</li><li>Center</li></ul></td></tr><tr><td>Show collection description</td><td>Enabling this checkbox will allow you to display the added description in the collection.</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>Layout</td><td><p>Customization of the "Layout" in the collection banner is as follows:</p><ul><li>Column</li><li>Overlay</li></ul></td></tr><tr><td>Banner background</td><td>Modifying the color of the banner background will result in a corresponding color change for the banner background.</td></tr><tr><td>Banner text</td><td>Modifying the color of the banner text will result in a corresponding color change for the banner text.</td></tr><tr><td>Background overlay</td><td>By enabling this checkbox, you have the ability to change the opacity of the image overlay. Modify the "Background overlay" setting to increase or decrease the opacity level of the overlay on the collection banner image.</td></tr></tbody></table>

## Adding Collection banner via metafield <a href="#adding-metafield-definition" id="adding-metafield-definition"></a>

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

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

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2F1KHm0RLplx0TU09WL4Xb%2F1.png?alt=media&#x26;token=b8ecc6f8-6cb4-4070-bdc6-2cd59222b1a4" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FnLxLzjLgND4P9Ux5KXPu%2Fmeta-collection.png?alt=media&#x26;token=aebaacf1-448b-411d-ad45-84ca705d3a99" alt=""><figcaption></figcaption></figure>

* Click **Add definition**

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2F6SW8yL7s3tDiK6SGiJlx%2F3.png?alt=media&#x26;token=92a7bfe0-0562-48b8-818e-f3ed91c62305" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2F9rDJO4LDj8vfwRBYPTau%2F4.png?alt=media&#x26;token=20cbbbfd-f2d8-4700-bd61-089debadeff4" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FpFkpKRIbmQB6d9GyH4Sf%2F5.png?alt=media&#x26;token=f5171233-ea7b-4106-a89d-7b21a7a1c4e3" alt=""><figcaption></figcaption></figure>

* than select **Accept all file types**
* Click **Save** to save the definition

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FG1pBGGOQwnEYtB7o24Tr%2F6.png?alt=media&#x26;token=c64101cb-c106-47a8-9703-1b99eb185de3" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FeCgaQUyg2MUG5U3fTV5m%2F7.png?alt=media&#x26;token=3daf3306-ef06-4bf8-b3d2-734c86a7b453" alt=""><figcaption></figcaption></figure>

## Setting the Collection image <a href="#setting-the-countdown" id="setting-the-countdown"></a>

* In your admin, within **Collections**, click on the collection you want to add the Collection image

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FaDTZd64T0o7UECXAfno2%2F8.png?alt=media&#x26;token=b8b3ec17-831f-48a9-bce7-b347f0d391b8" alt=""><figcaption></figcaption></figure>

* Scroll down to the **Metafields.** You should see the **Collection image** here.
* To set an image, click on the **Collection image** field

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FXikd1A7Tuas3elEJ98Xs%2F9.png?alt=media&#x26;token=184a0cfb-3dd2-4ecd-9077-a5da58288edb" alt=""><figcaption></figcaption></figure>

* Click **Save** to save your changes

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2Fe1jFyqNcZ057BYZailHh%2F10.png?alt=media&#x26;token=8c4a8bc9-778a-4cf1-ba6a-2e172abb9bc6" alt=""><figcaption></figcaption></figure>
