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.

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

Step 2 — Assign an image to a collection

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

Step 3 — Connect the metafield to the section

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

Set Layout to Background or Split (the image options only appear for these layouts).
Set Source to Custom.
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).
Click Save.

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.

Need help?

Whether you have a question, run into an issue, or just need some guidance, our support team is here to help.

Chat with us Submit a ticket

PreviousHow to set up a custom badge

NextHow to override collection menu images

Last updated 7 days ago