> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/how-to-guides/how-to-use-metafields-to-show-different-images-per-collection.md).

# How to use metafields to show different images per collection

By default, the Collection Banner uses the collection's featured image. You can create a collection metafield (for example `custom.banner_image`) and connect it to the banner's **Custom image** setting, so each collection shows a unique banner without changing its main product image.

This guide covers the metafield setup only. For the banner's own layout, source, and styling options, see [Collection Banner](/helix/collection-page-sections/collection-page-sections/collection-banner.md).

![A collection banner using a custom per-collection image](/files/4mMAc5MMc4NXb1OyVdxr)

***

**Step 1 — Create the metafield definition**

In Shopify Admin, go to **Settings → Metafields and metaobjects → Collections**, click **Add definition**, and configure:

* **Name** — `Banner image`
* **Namespace and key** — `custom.banner_image`
* **Type** — File — Image, one value

![Creating the Banner image collection metafield definition](/files/Dyl2A3Lx2YDgaKLnQNzs)

**Step 2 — Assign an image to a collection**

Open a collection, scroll to **Metafields → Banner image**, upload the image, and save.

![Uploading a banner image to a collection's metafield](/files/eey67v6BdfgOhEC6shRD)

**Step 3 — Connect the metafield to the section**

In the theme editor, open the **Collection banner** section and set:

1. Set **Layout** to **Background** or **Split** (the image options only appear for these layouts).
2. Set **Source** to **Custom**.
3. On the **Custom image** field, click the **Connect dynamic source** icon (the database icon next to the field), then select your **Banner image** collection metafield (`custom.banner_image`).
4. Click **Save**.

![Connecting the Banner image metafield to the Collection banner's Custom image](/files/T7bDpWQsdDv8B2CC2i5E)

{% hint style="info" %}
**Tip:** Helix does not read a fixed metafield key here — you must connect the metafield to the **Custom image** field with **Connect dynamic source**. When **Source** is **Custom** but no image (and no dynamic source) is connected, the banner falls back to the collection's featured image. Connecting a per-collection metafield overrides the default for that collection only — no template duplication needed.
{% endhint %}