Making Collection Pages Use Unique Banner Images (via Metafields)

Making Collection Pages Use Unique Banner Images (via Metafields)


Want each Shopify collection to have its own banner image? Perfect!
By using collection metafields, you can assign a unique banner to every collection—without editing every template individually.

This method works on all Shopify themes (Dawn, Refresh, Origin, Sense, etc.).

✅ What You Will Accomplish

  • Add a metafield called collection banner
  • Upload a custom banner image for each collection
  • Modify your collection template to display the metafield
  • Apply fallback logic (default banner if no metafield is set)

📌 Step 1: Create a Collection Metafield

Go to:

Settings → Custom data → Collections → Add definition

Create the metafield:

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

Click Save.

📌 Step 2: Add a Banner Image to Each Collection

Go to:

Products → Collections

Open any collection and scroll down to the metafields section.

You will now see your new Collection Banner metafield.

Upload your banner image.
Repeat this for all other collections.

📌 Step 3: Edit Your Collection Template to Display the Banner

Go to:

Online Store → Themes → Edit Code

Open your collection template file. This may be:

  • templates/collection.json
  • sections/main-collection-banner.liquid (Dawn-style themes)
  • sections/collection-banner.liquid

Look for the existing banner area or create a new banner block.

Add the following Liquid code where you want the banner to appear:


{% if collection.metafields.custom.banner %}
{{ collection.title }} Banner

{% else %}
Default Banner

{% endif %}

This code displays:

  • The collection’s custom banner (if added)
  • A fallback default banner (optional)

📌 Step 4: Add Styling for the Banner

Open:

assets/base.css or assets/custom.css

Add:


.custom-collection-banner {
  width: 100%;
  max-height: 350px;
  overflow: hidden;
  margin-bottom: 25px;
}

.custom-collection-banner img.collection-banner-img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

This ensures a clean, responsive banner layout.

📌 Optional: Add Overlay Text or Gradient

If you want the collection title or a gradient overlay, let me know—I can generate that too.

🎉 Final Result

  • Each collection displays its own unique banner image
  • Store owners can update banners anytime from the Shopify admin
  • No theme files get overwritten during updates
  • Fully responsive and works with all themes

 

 

Back to blog

Leave a comment