# Banner

In the collection template, customize the **Collection banner** that appears at the top of the page.

* Show an image as the banner background
* Change the banner size and alignment
* Display the number of products available

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FxGTDAvlY30Hgx694KKj3%2Fcollection-banner.png?alt=media&#x26;token=a4194a4c-fee9-4d2f-a3ea-9931d7d3aeef" alt=""><figcaption></figcaption></figure>

## Customize section styles

***

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Color scheme</strong></td><td><a href="../../../sections/overview/section-styles#color-scheme">#color-scheme</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2F3XSH2rw2Xl7gRoMb34up%2Fsection-colors.jpg?alt=media&#x26;token=ccb376a8-d35b-4822-9bb0-5de9a0eb5ae6">section-colors.jpg</a></td></tr><tr><td><strong>Section width</strong></td><td><a href="../../../sections/overview/section-styles#section-width">#section-width</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FDCCYMn4K3pSbVR42zVAF%2Fsection-width.jpg?alt=media&#x26;token=68dd352f-bb69-4220-87a0-6a1c733d909c">section-width.jpg</a></td></tr><tr><td><strong>Section padding</strong></td><td><a href="../../../sections/overview/section-styles#section-padding">#section-padding</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FoZCVax7FX1rLehRaYU5Y%2Fsection-padding.jpg?alt=media&#x26;token=3dbb23bd-4ab6-4874-8834-941a671e5cec">section-padding.jpg</a></td></tr></tbody></table>

## Set up banner content

***

* Change the heading text size
* Show or hide the collection description
* Change the position of the banner content
* Display the number of products in the collection

{% hint style="success" %}
To change the collection title and description, go to **Products > Collections** in your Shopify admin. Learn more in [Shopify's collections guide](https://help.shopify.com/en/manual/products/collections).
{% endhint %}

`Click Collection banner section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading size</mark></td><td>Change the size of the heading text from small to large.</td><td><p><strong>1 - 8</strong></p><p><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 7</mark></p></td></tr><tr><td><mark style="color:blue;">Show collection description</mark></td><td>Show the description added to the collection's settings in your Shopify admin</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: Enabled</mark></td></tr><tr><td><mark style="color:blue;">Content width</mark></td><td>Set the maximum width of the heading and description. Use the slider to adjust line breaks in longer text.</td><td><strong>200 - 1000 px</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 500</mark></td></tr><tr><td><mark style="color:blue;">Text alignment</mark></td><td>Change the position of the heading, description, and product count.</td><td><strong>Top left</strong><br><strong>Top center</strong><br><strong>Top right</strong><br><strong>Middle left</strong><br><strong>Middle center</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Middle right</strong><br><strong>Bottom left</strong><br><strong>Bottom center</strong><br><strong>Bottom right</strong></td></tr><tr><td><mark style="color:blue;">Enable text animation</mark></td><td>When the banner first loads, the text slides up into place and gradually fades into view.</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: Enabled</mark></td></tr></tbody></table>

### Show product count

***

Choose to display the **product count** below the collection title.

`Click Collection banner section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show product count</mark></td><td>Display the number of products in the collection, below the collection title.</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: Enabled</mark></td></tr></tbody></table>

## Set up banner image

***

In the collection banner settings, enable the **Show collection image** option. By default, the banner will use the image uploaded to the collection settings in your Shopify admin.

* Choose to show the collection image
* Adjust the height of the banner

{% hint style="info" %}
See Shopify's guide to [Add a featured image for a collection](https://help.shopify.com/en/manual/products/collections/collection-layout#add-or-change-the-featured-image-for-a-collection)
{% endhint %}

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Using color overlays</strong></mark></td><td>Learn how to change overlay colors and use gradients.</td><td><a href="../../../sections/overview/section-styles#overlay-colors">#overlay-colors</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FJmND9VbF4HtwEqV18aeb%2Foverlay-color-gradient.png?alt=media&#x26;token=953171f8-094a-43c4-97fe-2c767e76505e">overlay-color-gradient.png</a></td></tr></tbody></table>

`Click Collection banner section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show collection image</mark></td><td>Display the image banner, which uses either collection image from your Shopify admin settings or a custom image selected below.</td><td></td></tr><tr><td><mark style="color:blue;">Banner height</mark></td><td>Change the maximum height of the banner. The Adapt to image option sets the banner height to the full height of your image, which avoids cropping.</td><td><strong>Adapt to image</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Custom</strong></td></tr><tr><td><mark style="color:blue;">Custom desktop height</mark></td><td>For desktop, set the Custom banner height to a <strong>fixed height</strong> (in pixels) or <strong>relative height</strong> (as a percentage of the screen height).</td><td>Fixed height<br><strong>250 - 750px</strong><br>Relative height<br><strong>50 - 100%</strong><br><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 450px</mark></td></tr><tr><td><mark style="color:blue;">Custom mobile height</mark></td><td>For mobile, set the Custom banner height to a <strong>fixed height</strong> (in pixels) or <strong>relative height</strong> (as a percentage of the screen height).</td><td>Fixed height<br><strong>150 - 750px</strong><br>Relative height<br><strong>50 - 100%</strong><br><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 350px</mark></td></tr><tr><td><mark style="color:blue;">Image banner transition</mark></td><td>Change the animation style of how the image loads. The image can gradually fade into view or be revealed by an iris swipe, which appears as a growing circle. Set to None to disable animations.</td><td><strong>None</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Fade</strong><br><strong>Iris wipe</strong></td></tr></tbody></table>

### Show custom image

***

Instead of displaying collection images from your Shopify admin, upload a custom image to appear on all collection pages.

`Click Collection banner section to find settings`

<table><thead><tr><th width="157">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload a custom image for the banner to override the image from your Shopify admin settings</td></tr><tr><td><mark style="color:blue;">Mobile image</mark></td><td>Select or upload an alternate custom image for the banner when on mobile devices.</td></tr></tbody></table>

### Show custom images for collections

***

To show custom images for collection pages using the same template, you can use **metafields** and **dynamic sources**. Use this option if you want to show different images without changing the collection image in your Shopify admin.

There are three general steps:

1. Create a 'file' **metafield** for collections.
2. Add **custom images** to the new metafield in your collections.
3. In your theme editor, add the metafield as a **dynamic source** to the banner image setting.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

**Create a File metafield for your collections**

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

   <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FenDYLAoxFyLvDeZaKR7B%2Fmetafield-collections.png?alt=media&#x26;token=57a6c7c3-1295-45f3-886f-5af0db5c35e2" alt="" width="563"><figcaption></figcaption></figure>
2. Select **Collections.**
3. Click **Add definition**.
4. In the **Name** field, enter a name that describes what the metafield is for. For example: “Banner image”.

   <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2F9O7hBQfBgEun5zzMww9p%2Fmetafield-collection-image.png?alt=media&#x26;token=da0eacff-db3a-4623-bf49-5e635f484190" alt="" width="560"><figcaption></figcaption></figure>
5. Click **(+) Select type** and select **File**.
6. Under **Validations**, make sure **Accept specific file types** is selected, and uncheck **Videos.**
7. Click **Save**.

**Add images to metafield in collection settings**

1. From your Shopify admin, go to **Products** > **Collections** and open your collection.
2. Scroll down to the **Metafields** area, and click the banner image metafield you created to select an image.

   > If no image is uploaded to your banner image metafield, the theme will use the default collection image.

   <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FV4jts6rFnjbRRER9f9KM%2Fmetafield-select-image.png?alt=media&#x26;token=ccf703e3-3711-4c26-a778-08f29ea7898e" alt="" width="515"><figcaption></figcaption></figure>
3. Click **Save**.

**Connect metafield to the banner image setting**

1. In your theme editor (**Customize**), go to the collection template and click **Collection banner**.
2. Under **Collection image banner**, click the **Connect dynamic source** button in the top-right of the image field.\\

   <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FC08Sv3eYH9x0DUHibNME%2Fdynamic-source-image.png?alt=media&#x26;token=3ec1e660-d1a5-4be5-9c61-06399e7a52a5" alt="" width="227"><figcaption></figcaption></figure>
3. Select your custom metafield from the list.
4. Click **Save**.

</details>

> **Metafields** allow you to store extra information about your products, collections, or pages. You can create custom metafields in the Shopify admin. In the theme editor, you can add **dynamic sources** to automatically display the metafield content for the current page.