# Collection banner

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FpMrXMWoMh3crlgQCX0Jy%2FFox-BG%20Light%20(66).jpg?alt=media&#x26;token=89428a3a-b7f6-42dd-ba58-f266e2f05016" alt=""><figcaption></figcaption></figure>

Give context and visual appeal to each collection. It’s ideal for showcasing a hero image, a brief intro, or helpful navigation (breadcrumbs).

## How to add a Collection banner to your Shopify store

{% hint style="success" %}
Steps:

1. In the theme editor (**Customize**), open the template selector.
2. Select **Collections**, then **Default collection.**
3. On the left-side bar, add the **Collection banner.**
   {% endhint %}

## How to edit a Collection banner

### Section settings

<table><thead><tr><th width="245">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Banner height</strong></td><td>Set height: <code>Adapt to image</code>, <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td><strong>Desktop content alignment</strong></td><td>Align text block: <code>Left</code>, <code>Center</code>, or <code>Right</code>.</td></tr><tr><td><strong>Heading size</strong></td><td><p>Choose a size for the heading.</p><p>Go to <strong>Theme settings > Typography</strong> to set that Heading's <strong>font size scale.</strong></p></td></tr><tr><td><strong>Show breadcrumbs</strong></td><td>Toggle to show navigation.<br>Format: Home > Collection (The all products collection page) > The current collection</td></tr><tr><td><strong>Show collection description</strong></td><td>Display text from the collection’s description. </td></tr><tr><td><strong>Show collection image</strong></td><td>Toggle to display the image assigned to the collection.</td></tr><tr><td><strong>Image position</strong></td><td>Control where the image display along with the content.</td></tr><tr><td><strong>Image overlay opacity</strong></td><td>Add a dark overlay to improve text visibility (0–100%).</td></tr></tbody></table>

*Examples of **Image position**:*&#x20;

{% tabs %}
{% tab title="Left" %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FLXW88aA6vSj8RjQuByIh%2Fimage.png?alt=media&#x26;token=d1873c56-dec4-40eb-974d-8bcfd9cf9e68" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Top" %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FnPBEryTIUG5IeqhMBVLk%2Fimage.png?alt=media&#x26;token=975edf28-82bb-49ed-b4ad-279044af5686" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Right" %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FXDD4KthWL5s0r2alDdQG%2Fimage.png?alt=media&#x26;token=b8c8b6bc-c877-4ca2-a18e-222f2e74437d" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Bottom" %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2Ft4B4FDyZlaDcD5ncdCgd%2Fimage.png?alt=media&#x26;token=e49574cc-2bdc-48a4-ba40-f8f98eaa3e37" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Untitled" %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2Fl6CXutjDN3HHuW0JJ7qj%2Fimage.png?alt=media&#x26;token=da9580b8-27e6-4a86-a306-7938d3b4f7bf" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Block settings

{% hint style="info" %}
By default, images shown on **Collections list page** and **Collection banner** are your collections' **featured images** when enabled.

However, you can replace the default collection banner with images more appropriate in aspect ratio.

*For example:* you can use a square image as a featured image of a collection to optimize your [**Collections list page**](https://docs.foxecom.com/zest-theme/collections-and-products/collections-list-page), and use another image to fit your **Collection banner**.&#x20;
{% endhint %}

{% hint style="success" %}
Make sure you enable the option **Show collection image** in the section settings.
{% endhint %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2F2n8CT41kY2zZF0SqkAW6%2Fimage.png?alt=media&#x26;token=101fd0b5-5f89-438e-9ee2-c74c4e70bdfc" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
To add a custom collection banner:

Steps:

1. Select **Collection banner.**
2. Add a **Collection** block.
3. Choose a collection and add an image to show. You can set the banners for mobile and desktop view separately.
4. Click **Save.**
   {% endhint %}

## 💡 Pro tips

* **No image? No problem.** You can still use this section to display a clean title and intro for SEO and clarity.
* Keep collection descriptions **short and scannable** — one paragraph works best.
* Use a **high-contrast image** if you're placing text over it — or lower the overlay opacity to ensure legibility.