# Collection banner

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

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

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

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

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

## How to add a Collection banner section <a href="#how-to-add-a-collection-banner-section" id="how-to-add-a-collection-banner-section"></a>

{% 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  <a href="#how-to-edit-a-collection-banner" id="how-to-edit-a-collection-banner"></a>

### Section settings <a href="#how-to-edit-a-collection-banner" id="how-to-edit-a-collection-banner"></a>

#### Layout

* **Container:** You can adjust the banner to display full width or within a fixed-width container using the two options **Full / Fixed**.
* Set an **Image height** for the banner:
  * Adapt to image
  * Large
  * Medium
  * Small
* **Enable header overlay** if you want the header to overlay your banner.

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

#### Media

* **Show image**: Enable **Show image** to display a banner image for the collection.

If **Show image** is disabled, no banner image will be displayed from this section.

{% hint style="info" %}

### Image display priority

When multiple image sources are available, the banner image is chosen in the following order:

1. **Collection metafield image**. *See* [*How to add an image banner to your collection using metafields*](#add-an-image-banner-to-your-collection-using-metafields)

   <div align="left"><figure><img src="/files/EwOciBTVv95RJEZyrFLu" alt="" width="375"><figcaption></figcaption></figure></div>
2. **Collection featured image** (set in the collection editor. [*Learn more*](https://help.shopify.com/manual/products/collections/collection-layout#add-a-featured-image-to-a-collection))

   <div align="left"><figure><img src="/files/GsoQIayELMIxtQw5IlDw" alt="" width="375"><figcaption></figcaption></figure></div>
3. **First product’s image** (from the first product in the collection)
4. **Section image** (set in this section setting).

#### Special cases:

* If **no metafield image** and **no featured image** are set, the **first product’s image** will be used as the collection banner.

* If the collection has **no products**, the **section image** will be displayed instead.
  {% endhint %}

* **Media overlay:** Enable **Media overlay** if you want to add a color overlay on top of the image, then customize the color **Overlay color**.

#### Mobile settings

This setting gives you 2 options for adjusting the image height: **Auto** or **Adapt to image.**

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

### Collection banner block&#x20;

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

#### **Content**

**Layout**

* **Alignment** allows you align the banner text to the left/center/right, and adjust the **position** of the banner content to wherever you want it to appear.
* You can also adjust the content **width** with three options: **Fit / Custom / Fill**.

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

**Mobile settings**

**Alignment** and **Position** allow you to adjust the banner content specifically for mobile view.

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

**Padding**

You can also adjust the **padding** for both mobile and desktop to make the banner display properly.

<figure><img src="/files/44wPj0Q9Gwl08gF76YCj" alt=""><figcaption></figcaption></figure>

#### Breadcrumbs

You can also adjust the padding for the **Breadcrumbs** in these settings.

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

#### Heading

You can add the **Text** you want to display in the Collection banner. There are also three **Highlight Style** options available if you want to emphasize your text:

* None
* Wavy underline
* Solid background

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

**Typography:** These settings allow you to choose a typography preset to control the heading size, and select between **Text** or **Subtext** color options to match your design.

**Padding:** Adjust the spacing around the heading:

* Top padding
* Bottom padding
* Mobile scale

**Animation:** Select an entrance animation for the heading, or choose none if you prefer no animation.

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

#### Text

The text lets you add a short description to your Collection banner, and you can also adjust the **typography**, **padding**, and **animation** for the short text.

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

## Add an Image banner to your Collection using Metafields

### **Step 1:** Create **product metafield definitions** <a href="#step-1-create-product-metafield-definitions" id="step-1-create-product-metafield-definitions"></a>

{% 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/pjUHBc1TMOADWXujt6OR" alt=""><figcaption></figcaption></figure>

3. Create 2 new metafield definitions:
   * **Namespace and key:**
     * For desktop banner: `foxtheme.collection_banner`
     * For mobile banner: `foxtheme.collection_banner_mobile`
   * **Type:** File (Image)

{% columns fullWidth="false" %}
{% column %}

<figure><img src="/files/oeQHqOljsTjfI8DCG43E" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="/files/uJ3pkW5BGeIeJJNJTUJK" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

4. Save the metafield definition.

### Add metafield value for collections <a href="#add-metafield-value-for-collections" id="add-metafield-value-for-collections"></a>

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 🎉

<figure><img src="/files/ALvoUftGNWjQK1hKyFjx" 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/pebble-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.