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.
Related: Add Alt Text to Images in Shopify.
Related: Customize a Collection Page in Shopify.
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.
Related: Fudge Store 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.
For a related approach, see change the hero image in shopify.
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.”
FAQ
Yes, using collection metafields. Create a File-type metafield definition for collections, upload a unique image per collection, then connect that metafield as the dynamic source for an image banner section in the Collection template. If your theme doesn't expose this binding cleanly, describe what you want to Fudge ("read the banner image from a per-collection metafield, with a fallback to the collection image") and it builds the section wired to your metafield.
A 3:1 or 4:1 landscape aspect ratio works well, at around 2000-2800px wide so it stays sharp on large screens. Keep the file size under 200KB where possible for performance, and place the key visual in the centre 50-60% of the frame so mobile crops don't cut it off.
No. Every Shopify theme supports a collection image natively, and Online Store 2.0 themes let you add an image banner section directly in the Theme Editor. Apps are only needed if your theme is older or you want layout features it doesn't support.
Some themes don't display the collection image at all, or only show it on the collection card in listing pages. Open the Collections template in the Theme Editor and look for a section labelled "Collection banner" or "Featured image" - if it's not there, the theme doesn't render the image as a header by default.
Yes. Open the Collections template in the Theme Editor, add an image banner section, and configure the image. Because the change is on the template, every collection using that template will display the same banner. Use metafields (Method 3) if you want unique banners per collection.
