# Collection banner

Display a banner/ background with highlighted features/ offers on a collection page can effectively improve customer's shopping experiences and boost your sales.

{% tabs %}
{% tab title="With banner image" %}

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

{% tab title="Without banner image " %}

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

## How to add a Collection banner section

{% 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 **Collection banner.**
   {% endhint %}

Add a description or image by editing your collection. [Learn more](https://help.shopify.com/manual/products/collections/collection-layout)

## How to edit a Collection banner

### Section settings

#### General

You can adjust the **Color scheme** for the Collection banner section

<figure><img src="/files/w4bHH5RxdlmZKEcAK4Hk" alt=""><figcaption></figcaption></figure>

#### **Settings**

Add an outstanding **Image** to display on the Collection banner.&#x20;

* You can set the banners for mobile and desktop view separately.

After you have chosen a suitable banner image, you can adjust the **Image overlay opacity**.

<figure><img src="/files/kcn9UWLNbAnx4VZ3JDo1" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
:pushpin: Want to show different banners across your collections?&#x20;

Learn more:

[#add-image-banner-to-your-collections-using-metafields](#add-image-banner-to-your-collections-using-metafields "mention")
{% endhint %}

**Image position** can be set as Top/ Left/ Right/ Bottom/ Use image as background to the content (Collection title and description).

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

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

{% tab title="Right" %}

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

{% tab title="Bottom" %}

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

{% tab title="Left" %}

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

{% tab title="Use image as background" %}

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

Set an **Image height** for the banner:&#x20;

* Adapt to image
* Large
* Extra medium
* Medium
* Small
* Extra small

and **Text alignment (**&#x4C;eft/ Center/ Right)

<figure><img src="/files/7oQdfzpbgIxEm9d4HarO" alt=""><figcaption></figcaption></figure>

If you want to make your website more visually appealing and dynamic, consider using the **parallax effect** by selecting the :white\_check\_mark: **Enable parallax** effect checkbox.&#x20;

Then, select your preferred direction for this effect in the **Parallax direction** field (Vertical/ Horizontal/ Zoom)

<figure><img src="/files/vUPLf0nKgGB6bFttykDs" alt=""><figcaption></figcaption></figure>

**Mobile settings**

This setting allows you to add a different image for the banner on the mobile view in the **Image mobile** field.

* You have 2 options for adjusting the **Image height** (Auto/ Adapt to image).

<figure><img src="/files/biDXfpRgmLGCj0liYScD" alt=""><figcaption></figcaption></figure>

### Block settings

In the **Collection banner** section, you can add 1 **Collection information** block.

<figure><img src="/files/PRU7t1yitVq4L4IYb7fu" alt=""><figcaption></figcaption></figure>

Change the **Heading size** to a suitable option (Heading xs/ Heading sm/ Heading md/ Heading lg/ Heading xl/ Heading 2xl/ Display md/ Display lg/ Display xl).

<figure><img src="/files/RsFnYLwGvf9TFOqm4lOQ" alt=""><figcaption></figcaption></figure>

Especially, choose the suitable **Heading tag** for the collection title (H1/ H2/ H3/ H4/ H5/ H6).

<figure><img src="/files/Ii2cvOFGBk5Hqza3L3Nb" alt=""><figcaption></figcaption></figure>

Additionally, you can enable the :white\_check\_mark: **Show collection description** checkbox to display the collection description.

<figure><img src="/files/jjt5k3TZ7jJwUSBjlPSI" alt=""><figcaption></figcaption></figure>

You can also modify the spacing above and below the Collection information block by adjusting the slider to change the values of the **Top padding** and **Bottom padding**.

<figure><img src="/files/sScAOdo0BSHPpJM8K6HT" alt=""><figcaption></figcaption></figure>

## Add Image banner to your Collections using Metafields

### **Step 1:** Create **product metafield definitions**&#x20;

{% hint style="success" %}
You can **add collection banner for desktop and mobile view separately** by setting up **two metafield definitions** for Collections.
{% endhint %}

1. Go to Shopify **Settings** > **Custom data** > **Collections**
2. Select **Add definition**

<figure><img src="/files/zzYQZ2vgZazj1t7z9lmT" alt=""><figcaption></figcaption></figure>

3. Create two definitions with the given namespaces and keys below:

* Collection banner for desktop: **foxtheme.collection\_banner**

<figure><img src="/files/eIoK392PkVjxuc6xKhKs" alt=""><figcaption></figcaption></figure>

* Collection banner for mobile: **foxtheme.collection\_banner\_mobile**

<figure><img src="/files/AcfAwgti6CETvTCeuPRO" alt=""><figcaption></figcaption></figure>

4. Select **Type** as **File** and click **Save**.

### Add metafield value for collections

Once you have created the metafield definitions, go to **Products > Collections** > select the collection you want to add collection banner to.

In the **Metafields** section, select an image to be featured and there you have it :tada:

<figure><img src="/files/uH7n71cwGStKYDG99bxg" alt=""><figcaption></figcaption></figure>


---

# 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/sleek-theme/collections-and-products/collection-page/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.