# Collection banner

<Embed url="https://youtu.be/J-XgE8i7BHo" />

<Tabs>
<Tab title="With banner image">

![image](https://docs-assets.foxecom.app/hyper-theme/Hyper%20docs%20screenshot%20do%20not%20delete%20(79)_PEeASbo0.jpg)

</Tab>

<Tab title="Without banner image ">

![image](https://docs-assets.foxecom.app/hyper-theme/Hyper%20docs%20screenshot%20do%20not%20delete%20(80)_9i5eYEzT.jpg)

</Tab>
</Tabs>

Display 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 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 **Collection banner** section.

</Hint>

## How to show collection-specific banners

To display unique images for each collection, you can use **Shopify metafields**, which allows you to assign a banner image for desktop and mobile view per collection dynamically.

<Hint type="success">

**Steps to Add Collection Banner Metafields:**

*You need to create two metafield definitions, one for desktop and one for mobile view.*

1. Go to **Shopify Admin > Settings > Custom Data > Collections**.
2. Create 2 new metafield definitions:

   * **Namespace and key:**&#x20;
     * For desktop banner: `foxtheme.collection_banner`
     * For mobile banner: `foxtheme.collection_banner_mobile`
   * **Type:** File (Image)

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

   ![image](https://docs-assets.foxecom.app/hyper-theme/image_xBWKxLs6.png)
3. Save the metafield definition.
4. Navigate to **Products > Collections**, select a collection, and upload an image under the new metafield.

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

Once set up, your collection pages will dynamically display the assigned banner image.

</Hint>

## How to edit a Collection banner

### Section settings

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

#### **Settings**

* **Default image**: If no [colletion metafield](#how-to-show-collection-specific-banners) for banner is set, this image will be displayed as the collection banner.
* **Image position** can be set as Top/ Left/ Right/ Bottom/ Use image as background to the content (Collection title and description).
* 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)
* If you want to make your website more visually appealing and dynamic, consider using the **parallax effect** by selecting the ✅ **Enable parallax** effect checkbox.&#x20;
* Select your preferred direction for this effect in the **Parallax direction** field (Vertical/ Horizontal/ Zoom)

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

**Mobile settings**

This setting allows you to add a different default image for the banner on the mobile view.

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

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

### Block settings

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

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

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

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

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

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

Additionally, you can enable the ✅ **Show collection description** checkbox to display the collection description.

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

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

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