How to Show Different Banner Images per Collection Using Metafields

Want each Shopify collection to have its own custom banner image? This tutorial shows how to do it using a collection metafield and a small template update—no apps required!

📌 Step 1 — Create a Metafield for Collection Banner Images

Inside your Shopify admin go to:

Settings → Custom data → Collections → Add definition

Create your metafield with the following settings:

• Name: Collection Banner Image
• Namespace & key: custom.banner
• Content type: File → Image

Click Save.

Now go to any collection and upload a banner image under your new metafield.

📌 Step 2 — Edit Your Collection Template

Go to:

Online Store → Themes → Edit Code  
→ templates → collection.json (or collection.liquid)

If your theme uses a section-based collection page (most do), open the main section:

sections/collection-template.liquid  
OR  
sections/main-collection-banner.liquid  
(Your theme may name it differently)

Inside the template (usually at the top), insert this code:

{% if collection.metafields.custom.banner %}
  <div class="collection-banner-wrapper">
    <img 
      src="{{ collection.metafields.custom.banner | img_url: '2000x' }}" 
      alt="{{ collection.title }} banner" 
      class="collection-banner-image"
    >
  </div>
{% endif %}

If no metafield image is added, nothing will display—perfect fallback behavior.

📌 Step 3 — Add Some Banner Styling

Add this CSS inside your theme file:

<style>
.collection-banner-wrapper {
  width: 100%;
  margin-bottom: 30px;
}

.collection-banner-image {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}
</style>

📌 Step 4 — Assign Banner Images to Your Collections

Now go to:

Products → Collections → (Choose a collection)
→ Scroll to "Metafields"
→ Add image to Collection Banner Image

Each collection can now have its own unique banner.

🎉 You're Done!

You now have a dynamic banner system powered entirely by Shopify metafields.

• No apps ✔️
• No hardcoded images ✔️
• Easy to update from the Shopify admin ✔️

This is a great way to make each collection page look polished and branded.