# Collection banner

<figure><img src="/files/xWJHysTVUAqAB8gySxhX" 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="/files/wmxd9j8fj65fPNz8WvsC" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Top" %}

<figure><img src="/files/82T8OpeBY4ganSUQl0KZ" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Right" %}

<figure><img src="/files/pMb66cd0diRcZvNFiIbU" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Bottom" %}

<figure><img src="/files/WEqSTiL8ymhzsqqbypVn" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Untitled" %}

<figure><img src="/files/UrGOFqlVqADnMdeBDxpa" 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**](/zest-theme/collections-and-products/collections-list-page.md), 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="/files/ucXHWvQxSk8vn83vIrqT" 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/zest-theme/collections-and-products/collection-page/collection-sections/collection-banner.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.