Key takeaways
- The quickest method: set a collection image in Products > Collections - most themes display it as a banner.
- For a custom header section on all collection pages, use Theme Editor > Collections template.
- For unique banners per collection, use collection metafields to store per-collection images.
- A banner with the collection title and description improves SEO and page quality.
A banner at the top of a collection page sets the visual tone, communicates the category clearly, and gives you space for keyword-rich copy. Here’s how to add one.
Why you can trust us
We’ve built and customised hundreds of Shopify storefronts. We also built Fudge - an AI storefront editor with a 5.0 rating on the Shopify App Store.
Method 1 - Set a collection image (simplest)
Every Shopify collection has an optional collection image field. Most themes display this image as a banner at the top of the collection page.
Step 1. Go to Products > Collections.
Step 2. Click the collection you want to add a banner to.
Step 3. In the Collection image section (usually on the right side of the editor), click Add image and upload your banner image.
Step 4. Save.
The image is now displayed at the top of that collection page. The exact layout (full-width, contained, with overlay text) depends on your theme.
This method sets a banner per collection with no code required. The downside is limited layout control - you’re using whatever the theme does with the collection image by default.
Method 2 - Add a header section via the Theme Editor
For more control over the banner layout, you can add a section directly to the collection page template via the Theme Editor.
Step 1. Go to Online Store > Themes > Customize.
Step 2. Navigate to a Collection page using the page selector at the top.
Step 3. In the left sidebar, look at the sections above the product grid. Click Add section and choose an image banner, hero, or text section.
Step 4. Configure the image and content in the section settings.
Step 5. Save.
Important limitation: Adding a section via the Theme Editor on the collection template adds it to all collection pages using that template. If you want a unique banner per collection, use Method 3.
Method 3 - Per-collection banners using metafields
To show a different banner image on each collection page, you need to use collection metafields.
Step 1. In Shopify admin, go to Settings > Custom data > Collections > Add definition.
Step 2. Create a new metafield definition: give it a name like “Banner image”, set the type to File (images).
Step 3. Go back to your collection (Products > Collections > select collection) and fill in the new banner image metafield.
Step 4. In the Theme Editor, add an image banner section to the collection template. In the image field, click Connect dynamic source and link it to your metafield.
Step 5. Save.
Now each collection can have its own unique banner image stored in the metafield. You update them in the collection editor, not the Theme Editor.
Banner design tips for collection pages
Include the collection name in the banner text. It helps with SEO and confirms to customers they’ve landed in the right place.
Use your collection’s description. A 1-2 sentence description displayed under the title adds context and gives Google crawlable text with relevant keywords.
Consistent dimensions. If you’re creating banners for multiple collections, use the same aspect ratio so your pages look consistent. A 3:1 or 4:1 wide landscape ratio is common for collection banners.
Mobile crop. Wide landscape banners often crop to just the centre on mobile. Make sure your key visual and text fall in the safe zone of the image (the centre 50-60%).
Collection banner vs hero image
The collection image (shown as a banner) is separate from a full-bleed hero with text overlay. If you want a high-impact hero-style header on collection pages with an overlay headline, CTA button, and styled text - that’s typically done via a custom section or template, not the basic collection image field.
Describe it to Fudge: “Add a full-width hero banner to collection pages with the collection title overlaid on the image. Pull the banner image from a collection metafield.”
