Using Metafields in Your Shopify Theme

If you've ever had to create multiple custom Liquid product templates to accommodate unique product data, you know how difficult it is to manage. You can run into problems when code is inconsistent between pages, which is not good practice, and can lead to several bugs and lots of time wasted.

Instead of using custom Liquid templates, you can save yourself all the headaches and use metafields to store unique information. Shopify metafields can help you extend the functionality of online shops by giving you the ability to store additional information on products, collections, orders, blogs, and pages. Using Liquid, you can display the additional metafield information on shop storefronts.

In this article, we’ll look at a few examples, tools, and apps you can start using to get the most out of metafields. I’ll also show you how metafields can be edited from the Shopify Admin.

Metafields and product pages

If you've ever customized a Shopify theme or used the Shopify API, you might be familiar with metafields. Metafields are extra pieces of data that apps can attach to products, customers, orders, and other objects in the Shopify universe. They are useful for storing information that doesn’t otherwise have a home in the Shopify admin—like part numbers, customer titles, or blog post summaries.

As an example, let's say we're working on an apparel shop where we have a set of products that require the same product description, but the customer needs to be informed of unique washing instructions, like wash using hot or cold water, wash with similar colors, hand wash, hang to dry, etc. To learn how to do this with one product liquid template, we need to know a little about what metafields are.

Metafields have four components: namespace, key, value, and description (optional). Namespaces will be used to group different metafields, keys will be used to reference our information, and values will contain our unique content. We can also specify if the value is a string or integer.

Namespace

Key

Value

Instructions

Wash

Cold water

Instructions

Dry

Tumble dry

We can use the above metafields in our product.liquid template as follows:

For the second metafield, which provides our customers with drying instructions, we can do the following:

Modify metafields with apps

With an understanding of metafields under our belt, we can see that this method works well, but only if you're familiar with Liquid. It may not be a solution we want to share with your clients. This is where Shopify Apps come in. Apps provide us with nice Graphical User Interfaces (GUIs), meaning it's just a matter of populating a few fields to create and maintain metafield data for products. Give the following apps a try:

Other metafield tools

If you don't want to use an app and have Google Chrome, you can install the free ShopifyFD bookmarklet to add, modify, and delete metafields.

To use ShopifyFD, install the bookmarklet to your bookmark bar, navigate to a product page, and click the bookmark. On click, you will see a set of new fields which were once hidden in the Shopify Admin. We can do the same as before, and create our metafield with key and value.I personally use ShopifyFD on a regular basis because it's incredibly good at allowing you to make quick metafields edits on the fly. This eliminates the need to navigate from the product page you're working on, or keep a tab open with an app running. Your clients may like this tool for that very reason as well, especially since all they need to do is click on the bookmarklet to expose the metafield content.

I also encourage you to check out ShopifyFD's other features and side tool called custom fields.

Editing metafields from the admin

As we’ve seen, metafields have three components: a namespace, a key, and a value. Once you know the namespace and key for your metafield, you can display it in the bulk editor by making small changes to the URL of the bulk editing page in the Shopify Admin.

Editing an ISBN metafield

Here is an example URL that allows you to edit the ISBN metafield on the bulk editing page of the admin:

In this URL, global is the metafield’s namespace and isbn is its key. You can replace these with values to match your use case. The string part of the URL tells Shopify about the type of data that we want to store in the metafield. The bulk editor is able to display five types of metafields – string, money, boolean, select and number.

Two metafields and the variant SKU

You can display more than one metafield in the bulk editor by separating them with commas. This URL combines the ISBN metafield with a cost metafield and the product variant SKU:

Do more with metafields

While metafields may be looked at like a hidden secret feature only available to a select number of lucky developers, they're not. You and your clients can start using them today.

Save time, write less code, expand functionality, and become even more efficient by using some of the techniques, apps, and tools mentioned above. One single line of code, like: {{ products.metafields.instructions.Wash }}, can open new capabilities for you and your clients.

How are you using metafields in your Shopify stores? Let us know in the comments section below.

Email address

Password

Your store name

Let’s grow your freelance or agency business.

Get design inspiration, practical takeaways and free resources to help you find and delight clients.

Email Address

Thanks for subscribing

You’ll start receiving free tips and resources soon. In the meantime, find out how Shopify’s Partner Program can help you grow your business.

About the Author

Levin is a self-taught designer and front-end developer whose passion for design combined with his thirst for continual learning inspired him to run his own conference: Go Beyond Pixels. He has worked for clients all over the world, such as Vox Media in NYC, and now works for Trello.