An Ultimate Guide to Shopify Collection Metafields for your Store

Customizing the homepage or product page is now a common thing. But have you ever customized the collection page on your e-commerce website? If not, then you can now modify how your collection page looks by adding dynamic data to it. And we would take the help of the Shopify Collection Metafields.

In this article, you will learn how to add special content to the Shopify collection page using the Collection metafields.

Need help with other types of Shopify 2.0 metafields? Find the helpful guides below:

• Product metafields
• Variant metafields
• Customer metafields
• Order metafields

Shopify Collection Metafields

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.

The collection page basically shows the list of products that come in the same category. We can usually find the collection name, description, and product filters on the Shopify collection page. But using the collection metafields we can make it look unique and more attractive.

How to Add Collection Metafields in Shopify

Goal: A online clothing store has 3 collections: Men, Women, and Kids. The store offers a 10% discount on the Kids collection, 20% on Men, and 30% on Women’s collections. The store owner wants to show the Sale details on the collection page with a countdown timer, as shown below.

To show different Sale offers for different collections, we need to create collection metafields to store the offer details. Let’s see how to create the collection metafields in Shopify.

Creating Collection Metafield Definition

To show the Sale details and the countdown timer on the collection page, we need to store 2 different values: (1) Sale title, and (2) Sale expiry date & time. Therefore, we need to create 2 metafield definitions.

First, we will create an Offer Details metafield definition of the “Text” content type to store the Sale title. Then, we will create Offer Ends metafield definition of the “Date & Time” content type to store the Sale expiry date & time.

Let’s begin the mission!

Steps to Add Collection Metafield Definition

Step 1: Log in to your Shopify admin.

Step 2: Go to Settings > Metafields.

Step 3: Select Collection in the metafields type.

Step 4: Click on the Add definition button.

Step 5: Give a name to your collection metafield definition.

Step 6: Keep the Namespace and key as it is. The system will use it to identify the metafield definition.

Step 7: Add a description to your metafield definition (optional).

Step 8: Check the Give access to Storefront API requests option.

Step 9: Select a content type from the list.

Step 10: Based on the content type you select, you will get different Validation options for the metafield values. Make sure you set the validation rules carefully.

Step 11: Hit the Save button. The Offer details metafield will look like this:

Now, follow the same steps to create another metafield definition, i.e. Offer ends.

Adding Values to Shopify Collection Metafields

After creating the metafield definitions, now it’s time to add values to the collection metafields.

Steps to add values to collection metafields

Step 1: From the Shopify store admin, go to Products > Collections.

Step 2: Click on any Collection.

Step 3: Scroll down to the Metafield section on the collection page.

Step 4: Enter the value in the metafield as shown below.

Step 5: Save the changes.

Similarly, you can add offer details to other collections.

Displaying Collection Metafields in Shopify

Now, we can show the Sale details on the collection page.

Steps to show Shopify collection metafield values

Step 1: Go to the theme editor by Online store > Themes > Customize.

Step 2: Open the Collection template by Collections > default collection.

Step 3: Under the Collection banner section, add a “Custom Liquid” section.

Step 4: Copy the below code and paste it into the custom liquid box.

<div style="text-align-last: center;border: 1px solid #646464;padding: 2px;border-radius: 2px;box-shadow: 2px 20px 23px #646464;">
<h1>{{ collection.metafields.my_fields.offer_details }}</h1>
<h2>Sales ends in <strong id="timer"></strong></h2>
</div>

<script>
var countDownDate = new Date("{{ collection.metafields.my_fields.offer_ends }}").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;

var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

document.getElementById("timer").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "OFFER EXPIRED";  }
}, 1000);
</script>

 

Here, we have accessed the metafield using collection.metafields.my_fields.offer_details  and collection.metafields.my_fields.offer_ends  that represents the namespace and key of the collection metafields we created recently.

Step 5: Replace collection.metafields.my_fields.offer_details  and collection.metafields.my_fields.offer_ends  with your collection metafields namespace. You can find your metafield namespace in Settings > Metafields > Collections. Simply copy the namespace below the metafield name.

Step 6: Save the changes.

NOTE: Here, I am working on a Shopify 2.0 theme – the Dawn theme, so I am simply using the “Custom Liquid” block for showing the collection metafields. If you are not using Shopify 2.0 theme, follow the instructions below.

First, open the collection-template.liquid file from the Section folder and search for collection.description code. Copy the above code and paste it after the </div> tag (estimate line no. 55). Don’t forget to save the file.

That’s it! We are done with adding Shopify collection metafield to the store. Lets’s check the output.

I have set the Offer expiry to 31 January 2022 and today’s date is 28 January 2022.

Conclusion

Hope this guide helped you learn about Collection metafields in Shopify and how to customize the collection page using these metafields. Need more help to customize your e-commerce store? You can explore our blog section for more helpful resources.