# Collection banner

![image](https://docs-assets.foxecom.app/zest-theme/Fox-BG%20Light%20(66)_xWJHysTV.jpg)

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 type="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.**

</Hint>

## How to edit a Collection banner

### Section settings

<Table widths="245,auto">

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

</Table>

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

<Tabs>
<Tab title="Left">

![image](https://docs-assets.foxecom.app/zest-theme/image_wmxd9j8f.png)

</Tab>

<Tab title="Top">

![image](https://docs-assets.foxecom.app/zest-theme/image_82T8OpeB.png)

</Tab>

<Tab title="Right">

![image](https://docs-assets.foxecom.app/zest-theme/image_pMb66cd0.png)

</Tab>

<Tab title="Bottom">

![image](https://docs-assets.foxecom.app/zest-theme/image_WEqSTiL8.png)

</Tab>

<Tab title="Untitled">

![image](https://docs-assets.foxecom.app/zest-theme/image_UrGOFqlV.png)

</Tab>
</Tabs>

### Block settings

<Hint type="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;

</Hint>

<Hint type="success">

Make sure you enable the option **Show collection image** in the section settings.

</Hint>

![image](https://docs-assets.foxecom.app/zest-theme/image_ucXHWvQx.png)

<Hint type="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.**

</Hint>

## 💡 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.