How to display additional product information on your store? Use integrated Shopify metafields.

Wondering how to add additional information to your product pages? If yes, this is the right article for you. It has become recently so easy to add additional information to product pages thanks to integrated metafields in Shopify. In other words, you no longer need to install any metafields app to your Shopify store.

Ehmm…metafield? What is it?

First of all, let’s explain metafields. Metafields enable you to save additional information that isn’t usually captured in the Shopify admin. This means that e.g. if you need to save some information for your products and display them on your online store, metafields will help you create the magic.

To give you an example, let’s imagine having a store which is selling candles. If you sell candles, you want to inform your customers about the average burn time. However, when adding a new product in your Shopify admin, there is no special field, in which you could insert the burn time information unless you are happy with writing down the burn time information in the product description field. To display and emphasize the information on your store (e.g. under the product title), then you need to create a metafield.

Follow this guide on how to add a metafield without any app to your Shopify admin and display the metafield value on your online store where you want to.

Creating metafields

1. Go to your Shopify admin and click Settings.
2. In the right menu, click Metafields section.
3. The screenshot below will show up. You see that metafields are available only for Products and Variants right now (collections, customers and orders will be coming soon).

Note: Update January 2022 – metafields are available for products, collections, customers and orders! Huray!

Note: Update April 2022 – metafields are available for products, collections, customers, orders, pages, blogs and blog posts! That’s awesome! Thank you Shopify!

1. Click Products.

2. Click Add definition.

   

3. Name your metafield – we will name it burn_time (the candle example).
4. Namespace and key – you can leave it as it is.
5. Description – not required, but it’s worth writing a few words about the metafield.
6. Select content type – this is very important! You need to inform Shopify what content type the metafield is going to be. You can choose out of these:
   • Color
   • Date and time
   • File
   • JSON
   • Measurement
   • Number
   • Rating
   • Reference
   • Text
   • True or False
   • URL
7. For the candle example, we will choose Number (integer).
8. When done, click save.

Adding metafields to your products

1. Head over to the Products in the Shopify admin.
2. Choose any product you’d like to save the additional information for.
3. If you scroll to the bottom, you will see the metafields option there (see the screenshot).
4. Fill in the value for the specific product (e.g. 4). Please don’t write anything else apart from the number. We will do it in the code.

Rendering the metafield value on the product page

Alright, now we have everything what we need. The only remaining thing is to render the metafield value on the product page.

1. Go to your Shopify admin and click Online store.
2. In the current theme section, click the dropdown menu Actions and choose Edit code option.
3. Find the corresponding product file (depends on the theme you’re using). In many cases, the main product file is called product-template.liquid or main-product.liquid,…).
4. Find the relevant section, in which you would like to render the metafield value.

5. In our case, we’d like to render the metafield value (the burn time) under the product title. See the screenshot:

   

6. To render the metafield value, we’ll need to access the metafield object with the following syntax:

    {{ product.metafields.namespace.key }}
   

   For our example, the piece of code will look like this (you can find the namespace and key in the metafield definition.)

    {{ product.metafields.my_fields.burn_time}}
   

7. You can wrap the dynamic metafield value into another element (such as h4 HTML tag as in my case). See the screenshot:

   

8. Click save and preview any of the product, for which you’ve already filled in the metafield value.

I hope this article helped you set up metafields for your products and hence render additional information on your Shopify store. If you have any further questions about metafields or any other Shopify issues, feel free to contact me.