Collection banner

The Collection banner sits at the top of a collection page and fills itself in automatically — each collection's own image, title, and description. Set it up once, and every collection page gets a proper header. To add it, open a collection template in the theme editor and add the Collection banner section.

Choose the layout

Image layout is the main choice:

• Background — content sits on top of the collection image, full-bleed. Use the alignment settings under Content to position the text, and pick a color scheme that stays readable over imagery.
• Left or Right — image and text side by side, more editorial and reliably readable.

The Aspect ratio settings (desktop and mobile separately) control the image height. Adapt to content sizes the banner to fit the text — useful for keeping banners compact.

Pick what's shown

Toggles for each piece: collection title, description, breadcrumbs, and share/print buttons. Two notes:

• Expandable — if descriptions are long, this shows only the first four lines with a "more" control, keeping products close to the top of the page.
• Collection image — out of the box, this setting is connected to each collection's image via a dynamic source (collection.image), so every collection page shows its own image automatically. If you replace that with a manually picked image, the same image will show on every collection page instead. Collections without an image simply won't show one — there's no fallback.

Show subcollections

Subcollection navigation displays links to related collections in the banner — for example, "Men" linking to Shirts, Pants, and Accessories. Enable Show subcollections and pick a menu; the banner shows the links relevant to the collection being viewed.

How it works and how to structure the menu is covered in How to set up subcollections. Style options:

• Style — Text links, Button chips, or Image and text tiles.
• Placement — on top of the banner image or below it.

When Style is Image and text, Image source picks each tile's image:

• Collection — the collection's featured image from the Shopify admin. Simplest option when every subcollection already has a good image.
• First product — the featured image of the first product in that collection. Useful when collections lack their own image but products don't.
• Metafield — a custom image per collection, when you want tile images different from the collection banner (e.g. a square nav crop). Enter just the key in Metafield key (e.g. nav_image for custom.nav_image). See How to set up metafields.

Image shape — square, round, or circle.

📝 Note: For Image and text tiles to show at all, each linked collection needs a featured image set in the admin — even when using First product or Metafield as the source.

Other settings

Heading size, Content (content width and alignment within the banner), and the shared Section layout / Visibility / Content width settings — see Padding settings, Visibility settings, and Width settings.

📝 Note: Prefer the banner inside the product grid section? The Collection section offers a simpler Collection banner block. Use one or the other, not both.