← Back to Shopify Q&As
17 November 2021 by Niki Kozak

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).

    Metafields in settings

  4. Click Products.
  5. Click Add definition.

    Adding definition for a metafield in Shopify

  6. Name your metafield – we will name it burn_time (the candle example).
  7. Namespace and key – you can leave it as it is.
  8. Description – not required, but it’s worth writing a few words about the metafield.
  9. 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
  10. For the candle example, we will choose Number (integer).
  11. 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 informatin 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.

Adding a value for a metafield

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:

    Shopify product page piece of code

  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:

    Metafields value added to the code on Shopify store

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

Metafield value added to a product page on Shopify

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.

Let's get in touch

Would you like to discuss the article or anything about your Shopify store? I'm all ears! Just fill in the form and I'll get back to you soon.

No spam. I promise.