Using Metafields in Your Shopify Theme

Using Metafields in Your Shopify Theme

Using Metafields: heroIf 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 lot 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 to products, collections, orders, blogs, and pages. Using Liquid, you can display the additional metafield information on shop storefronts.

Today, I'll go over a few examples, tools, and apps you can start using to get the most out of metafields.

You might also like: 4 Advanced Shopify Theming Techniques to Add to Your Workflow

Metafields and product pages

I've been lucky enough to travel around the world this year, attending conferences and speaking to designers and developers building amazing things on Shopify. One issue that kept coming up was the difficulty and time consuming task of accommodating unique product information. I spoke with a developer who was using over 20 custom product Liquid templates – after introducing him to metafields he reduced that number to one. I'll show you how you can do the same.

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:

You can learn more about customizing metafields in our documentation page.

Modify metafields with apps

With an understanding of metafields under our belt, this method works well but only if you're familiar with Liquid. It may not be a solution we want to share with our clients. That's 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:

Metafields Editor (FREE)

Using Metafields: EditorMetafields Editor’s interface is simple and easy to use. It also packs a punch by allowing you to create, modify, and delete product and variant metafields.

Metafields 2 ($7/month)

Using Metafields: 2This app gives you the ability to add, manage, import, and export extra fields to nearly everything — the shop itself, collections, products, product variants, customers, orders, blogs, articles, and  pages! This app recently introduced writable customer metafields, so you can ask customers for their preferences, measurements, birthday, etc.

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, once installed on 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.Using Metafields: OthersI 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 checkout ShopifyFD's other features and side tool called custom fields.

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 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? Tell me in the comments section below.

You might also like: The Power of Link Lists

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.

Grow your business with the Shopify Partner Program

Learn more