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:
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.
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.
Could you explain how to add color swatches under product name and price on the collection page? I have seen it done using the metafields for product page but cannot figure out how to show product colors for each product on the collection page. I’m using Dawn 2.0 as well. I looked at the default collection template but it only allows to tick product vendor, product rating and second image on hover to be shown on top of the product name and price that are displayed automatically.
Hi Kairi,
I think this can be done using Shopify variant metafields. As this needs coding, I would recommend posting a question to Shopify Community or getting the help of Shopify experts.
Great video, can you make one with the Collection List Metafield for Collections?
I can’t find on the theme editor where I can display associated Collections that I assigned using Collection List type metafield
Please contact Shopify customer support team for additional customization needs on this.