# Collection banner

<Tabs>
  <Tab title="With banner image ">
    ![](https://docs-assets.foxecom.app/pebble-theme/8201a275-d8e3-47f8-859f-535f4600c6a5.jpg)
  </Tab>

  <Tab title="Without banner image">
    ![](https://docs-assets.foxecom.app/pebble-theme/dc9472d0-9422-43bd-a16e-b8399445b799.jpg)
  </Tab>
</Tabs>

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

## How to add a Collection banner section

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.**

## How to customize a Collection banner section

### Section settings

<Table widths="">
  | Setting               | Description                                                                                                                  |
  | --------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
  | Container             | Choose Full to display the banner at full width, or Fixed to keep it within the page container.                              |
  | Enable header overlay | Enable the header to overlay the collection banner. Applies only on desktop and when this section is at the top of the page. |
  | Show image            | Enable or disable the collection banner image.                                                                               |
  | Image                 | Select a desktop image for the collection banner.                                                                            |
  | Image mobile          | Select a separate image for mobile devices.                                                                                  |
  | Media overlay         | Add an overlay on top of the banner image.                                                                                   |
  | Height                | Set the banner height.                                                                                                       |
  | Enable parallax       | Enable a parallax scrolling effect for the banner image.                                                                     |
  | Mobile height         | Set the banner height on mobile. Choose Auto or Adapt to image.                                                              |
</Table>

<Hint type="info" title="Image selection priority">
  When multiple image sources are available, the banner image uses this priority:

  1. **Collection metafield image** — [*Learn how to add a collection banner with metafields*](#add-an-image-banner-to-your-collection-using-metafields)
  2. **Collection featured image** (set it up in **Shopify Admin > Products > Collections**) — [*Learn more*](https://help.shopify.com/manual/products/collections/collection-layout#add-a-featured-image-to-a-collection)
  3. **First product’s image** (from the first product in the collection)
  4. **Section image** (set in this section setting)

  If no metafield or featured image is available, the first product’s image is used. If the collection has no products, the section image is used.
</Hint>

### Block settings

The Content block controls the layout, position, width, and spacing of the banner content. *Learn more about Content block setting: Global settings*

The Content block includes **3 nested blocks**, which allow you to manage each content element separately:

<Tabs>
  <Tab title="Collection title">
    ![](https://docs-assets.foxecom.app/pebble-theme/a2d6ac22-1eb4-4cc9-8d81-74cf9236b1a0.png)

    *Learn more:* [*How to add a collection title and description*](https://help.shopify.com/en/manual/products/collections/collection-layout)
  </Tab>

  <Tab title="Collection description">
    ![](https://docs-assets.foxecom.app/pebble-theme/ab3f06c5-3afa-41d7-a79f-355451d0f7dd.png)

    *Learn more:* [*How to add a collection title and description*](https://help.shopify.com/en/manual/products/collections/collection-layout)
  </Tab>

  <Tab title="Breadcrumbs">
    ![](https://docs-assets.foxecom.app/pebble-theme/a026699a-7fde-43d8-a93b-2668259d5056.png)
  </Tab>
</Tabs>

## Add an Image banner to your Collection using Metafields

<Stepper>
  <Step title="Go to collection metafield definitions">
    Go to Shopify **Settings** > **Metafields and metaobjects** > **Collections** > Select **Add definition**

    ![](https://docs-assets.foxecom.app/pebble-theme/3def9475-53c5-4f36-97ad-95bb6e01c904.png)
  </Step>

  <Step title="Create new metafield definitions">
    Create 2 new metafield definitions with:

    1. **Namespace and key:**
       * For desktop banner: `foxtheme.collection_banner`
       * For mobile banner: `foxtheme.collection_banner_mobile`
    2. **Type:** File (Image)

    Then save changes

    <Hint type="success">
      You can **add collection banner for desktop and mobile view separately** by setting up **two metafield definitions** for Collections.
    </Hint>

    <Columns>
      <Column>
        ![](https://docs-assets.foxecom.app/pebble-theme/5a19b699-ebad-466a-8ef4-deb330c13216.png)
      </Column>

      <Column>
        ![](https://docs-assets.foxecom.app/pebble-theme/91852997-396f-4efa-974f-747a260c9a5f.png)
      </Column>
    </Columns>
  </Step>

  <Step title="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 🎉
  </Step>
</Stepper>

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