Sign Up Now!

Get our lastest eCommerce growth hacks to skyrocket your conversions!

Ultimate guide on using metafield in Shopify for business owners

Posted by Hayden Luu on

Ultimate guide on using metafield in Shopify for business owners

Metafield is one of the most used features in Shopify but it is quite complicated for regular users to implement.

If you look at the documentation on Shopify Help Center, it suggests hiring a professional web developer to successfully add or display metafields.

It is inconvenient, isn’t it?

If you, a small business owner, are struggling to save every penny for your business, or don’t have time to deal with recruitment, then this article is definitely for you.

Just 10 minutes and you will know how to use metafields in Shopify by yourself.

What is a metafield?

Metafields (or custom fields) help you put extra information on your store which isn’t included in Shopify basic configuration.

For example, you want to specify where the product’s origins are, or add a downloadable manual pdf for your product, etc. These things will need you to use metafields.

To create a metafieldproduct, you have to fill out the required information below

  • Namespace - A grouping of metafields to prevent conflicts.
  • Key - The metafield name.
  • Value - The value assigned to each product and will show in the frontend
  • Description (optional) - To make others understand the meaning of the metafields.

Types of Metafield

In Shopify, there are 2 types of metafields you can use right now. (updated Nov 2021)

1. Shopify Product Metafields

This is the most common one. It helps us show additional information for each product on the product page.

For example, proper use of metafields can help you show tech specs like this electronic store:

Exmaple of products meta fields

(Source: Satechi)

2. Shopify Variant Metafields

This type of metafields helps Shopify users add extra information for each variant of the products.

The picture below is an example of how you can use variant metafields. With each color variant, there will be different information in the bike’s parameters.

Example of shopify variant metafields

Source: amazon.com

Other than these 2, Shopify indicates that they will have configurations for Collection, Customers, and Order metafields in the future.

Read more:

How to use metafields in Shopify

Note: these instructions were demonstrated on Debut themes. The steps are the same for any other themes

Step 1: Create the metafield definition

To create metafield using Shopify configuration, use the following steps:

1. Go to Setting > Metafields
2. Choose Metafields type. In this guide, we will choose the “Products” metafields type for demonstration.

Step 1 - Choose metafields types

3. Click Add Definition
4. Fill in name, namespaces, key, and choose content type. Description is optional

      Namespace & Key: as explained above, the namespace is like naming your folder, and key is the metafields name. Separate these 2 things by using a full stop - “.”

      It doesn’t matter which name, namespace, or key you choose, it won’t affect anything. Its only job is to help you manage and differentiate from other metafields.

      In the example below: we use “my_fields” as the namespace and “condition” as the key.

      For the content type, it decides the format of the metafields'the value. In this example, we choose the “text” format. With each format, there are further options for you to configure, but it is optional.

      Step 1.3 - Fill in the information

      5. Hit Save to successfully create one metafield definition.

      Note:

      • Shopify requires you to pin the metafield (top right corner in the image above) to make it work. When you create a new one, it's pinned by default.
      • If you use 3rd-party Shopify Metafield apps, you can create new metafields definitions right on the app's dashboard.

      Step 2: Add value to the metafield in the product setting

      Now, you need to add value to the newly created metafields in each product. You can do it in 2 ways:

    1. Add metafields one by one
    2. Add metafields in bulk
    3. Add metafields one by one
      1. In Shopify admin, go to Products > All products > choose the products you want to add more information through metafields.
      2. On the product setting page, scroll down to the “Metafields” section.
      3. Add Value to the Metafields.

      Step 2 -  Add value to the meta fields

        However, if you have thousands of products that need to add a metafield to, this method could be very time-consuming. Therefore, we will guide you through how to add metafields in bulk.

        Add metafields in bulk

        1. First, you need to type this URL format in your browser:

          store-name.myshopify.com/admin/bulk?resource_name=Product&edit=metafields.{namespace}.{key}:{vaule_format}

          You need to change {namespace}.{key}:{vaule_format} according to the metafieldscost-benefit definition you want to edit. All of this information can be taken from the metafield definition you just made.

          Continue with the example above, if we want to edit the metafield “Condition” in bulk, we have to enter the URL:

          store-name.myshopify.com/admin/bulk?resource_name=Product&edit=metafields.my_fields.condition:text

          2. After entering the URL, you will see the bulk editor screen (which is not accessible through the traditional way), now you can add values to multiple products at the same time.

          Step 2 - Shopify metafields bulk editor

          Although you still have to fill each value for each product, it's much faster than going to each product and adding one by one.

          Alternative option: you could consider using a Shopify App to bulk edit Metafields.

          For example, Metafields Guru will help you edit the first 1000 products for free. However, bulk editing is a premium feature in every app, so you need to consider the cost and benefit to your business before deciding to buy one.

          If you have more than 1000 products or need to edit metafields in bulk multiple times, then using these an app is more reasonable.

          Step 3: Display Metafields on your Shopify Store

          With the release of Online Store 2.0, Shopify users now have 2 ways of showing metafields in the front-end:

        1. Add code to themes (work with all theme versions)
        2. Use theme editors (only available for OS 2.0 themes)
        3.  

          Following the example below, we will show you how to show metafields in product pages

          Showing product metafields by adding code to themes

            1. Go back to Metafields Setting, and copy/remembers this line, we will use it soon.

            Step 3 - Copy the products metafields code

            2. Go to Online Store > Themes > Actions > Edit Codes
            3. In the Section Folders, find product-template.liquid
            4. Add the following code using the line we copied earlier in the suitable location in the template files.

              In our example, it will look like this:

              Condition: {{ product.metafields.my_fields.condition }}

              Step 3 - Add code to themes

              In the Debut theme, we add them right after the description and social share part, which you could identify by briefly viewing the code. However, you can add these lines anywhere on the product pages. If you don’t know where to add it, just experiment with a few places and preview the front-end to see how it ends up.

              5. Save, and check any product page to see the results.

              Result after adding metafiles in Shopify products page old themes

                Showing product metafields by using themes editors

                Since this method only works for OS 2.0 themes, we will demonstrate it on the Dawn theme.

                1. Go to Online Store > Products > Themes > In the current themes, choose Customize
                2. Select Default Products Page or Product page template

                Select default product page

                  3. On the control panel on the left, in the Product Information panel > Add a Text block. You can drag the block to the location you want.

                  Add text block

                    4. Click on the Text block > click on the icon > add metafields.

                      Note: You need to add additional text before the block metafield to give the metafield a title.

                      Add Shopify metafields block

                      5. Hit Save and you are done. Follow the same steps to add another metafield..

                        Shopify metafields in practical use

                        Show additional information in an appealing style

                        This is a core functionality of metafields, a port to help shop owners add information that doesn’t have a place in Shopify to the product page. With the help of experienced web developers, you can have an appealing interface to display all information like showing in tabs, image slides, …etc.

                        This will give customers a better shopping experience. And better shopping experience always leads to a better conversion rate.

                        Metafields example

                        (Source: reddress)

                        Filter, site search, and sort option by Metafields

                        Filter or search by metafield is one of the most popular features when people are looking for a Filter & Search Shopify App.

                        With metafields and an app that supports this feature, your customer can find almost anything in your store faster using any information about your products.

                        Let’s take a look at this furniture store, they have a filter to help customers find products if they have storage ability or not. This product’s attribute is presented efficiently when using metafields rather than tags or the product description.

                        Example of using metafields in fitler and search

                        Source: brosa.com.eu

                        Read more:

                      1. Enhance Product Discoverability on Shopify Stores with Filter and Sort
                      2. Shopify Experts Reveal 3 Best Tips To Display Values In Product Filters

                      3. Final words

                        Learning to use metafields in Shopify may be complicated. However, if it is done correctly, it can help you in many important aspects of your eCommerce stor such as showing additional information, using in filter and search, or product management.

                        We hope after reading this article, you have learnt how to use metafield in Shopify.

                        If you have any questions, don’t hesitate to reach out to us through the contact page.

                        Subscribe to our email or follow us on Facebook, Twitter or Linkedin now for more valuable Shopify news, tutorials as well as eCommerce’s growth hacks to boost your business.

                        -----

                        Boost Commerce is a technology company that is helping more than 11,000 Online Stores Across 80+ Countries grow sales with Shopify Advanced Filter and Search app.