Now it’s super easy to show collection metafields on collection and Product pages. Metaobjects has many possibilities and you can use meta objects in shopify to customize Product, Collection, page, location and Blog Pages easily.

The Shopify 2.0 metafields lets you create custom fields in the Shopify Collections. Like other metafields, you can store additional information for your product collections in your online store.

This blog will explain how we can customize collection page or how we can add different website elements like Image banner, Text and URL links on collection page.

Creating Collection metafields Definition

Log in to your Shopify admin
Go to Settings > Custom Data.
Select Collection in the metafields type.

Click on the Add definition button.
Give a name to your collection metafield definition. Like we created two
Keep the Namespace and key as it is. The system will use it to identify the metafield definition.
Add a description to your metafields definition (optional).
Check the Give access to Storefront API requests option.
Select a content type from the list.
Based on the content type you select, you will get different Validation options for the metafield values. Set the validation rules carefully.
Click on Save button. after saving, collection metafields will look image below

here we created a Metafield Banner-url of type URL and Brand-Banner of type file (Image)

Steps to add values to collection metafields

Go to Shopify store admin, go to Products > Collections
Select any Collection.
Scroll down to the Metafield section on the collection page.
Enter the value in the metafield as shown below. Here we added a image and url which opens when customer click on Image.

How to Show Meta fields value on collection Page?

Well there are two ways by which you can do this:

By editing the liquid file of collection in theme
Using theme customizer.

By editing the liquid file of collection in theme

If you want to do it by editing the liquid file, then edit the collection-default.liquid (or similar file as per your theme). Add the below code to line where you wanna show Metafield value. Here we also added a Default Image if no image added in collection metafield

{% assign image_metafield = collection.metafields.custom.brand_banner %}
{% assign url_metafield = collection.metafields.custom.banner_url %}
{% if image_metafield != blank %}
  <a href="{{ url_metafield }}"><img src="{{ image_metafield | img_url:'1900x500'}}" alt="Collection Image" width="100%"></a>
{% else %}
  <a href="/"><img src="https://cdn.shopify.com/s/files/1/0652/2381/9522/files/Group_1314.png?v=1658079141" alt="Default Image" width="100%"></a>
{% endif %}

Using theme customizer

Open customizer in theme option of Shopify store.
Select default collection page in selection dropdown. check image below
On left side, add new section “Custom Liquid” and add the code we used above.

Select default collection page in selection dropdown

So that’s all you need to show the collection metafields on collection Page. For any support or custom work, you can hire our Shopify expert

Easy guide to show collection metafields in shopify store 2025

Leave a Reply Cancel reply

Blog Categories