What are Shopify Metafields?
Metafields would be better named “Custom fields” because that’s exactly what they are. They allow us to store and display extra information about products, collections, pages, blog posts and more. While Shopify by default allows you to add certain information to products like the product title, description and price, metafields allow you to create fields that store addition information like product ingredients, washing instructions or size charts. This improves the customer experience by showing additional relevant information to help them make a purchasing decision.
Types of Shopify Metafields
Metafields don't stop at products. You can create metafields for products, variants, collections, customers, orders, locations, pages, blogs, blog posts and markets. You can also expand the functionality of metafields by creating Metaobjects which we explain in our post, What are Shopify Metaobjects (and how to use them).
Within these metafield types, we're allowed to input different types of information as well. Shopify gives us the options: Single line text, Multi-line text, Rich text, Date and time, Date, Dimension, Volume, Weight, Decimal, Integer, Product, Collection, Product Variant, File, Metaobject, Page, True or false, Color, Rating, URL, Money, JSON and Mixed reference.
With all these options, we're easily able to connect any type of value we need to.
Shopify Metafield Examples
The most popular use case for metafields is Product metafields, but the possibilities are endless.
Some uses for product metafields are:
- Product subtitle (display a caption under a product title to help customers quickly understand if this product is for them)
- Ingredients (list a product's ingredients in a collapsible tab on the product page)
- Materials (list the materials a product is made of in a collapsible tab on the product page)
- Measurements or size charts (add product measurements with text or by attaching an image)
- Washing instructions (communicate a product's washing instructions in a collapsible tab on the product page)
- Product videos (add a unique video to the product page for each product)
- Testimonials (showcase your best product testimonial in its own section on the product page)
- Accent Colours (make every product page have a different accent color to match the packaging)
- Lifestyle images (select specific images to populate the product template)
How to create Metafields
To create metafields, go to Settings > Custom data from the Shopify Admin. Select the type of metafield that you'd like to create (where do you need to add additional data?), and then click Add definition. Create a name for the new field, and select what type of data you'll be adding. There are a lot of different data types, so choose the one most appropriate for the information. The definition is optional but can be helpful if you're working with a team.
Once that's created, go to edit the product, page or whatever object you created the metafield for. Scroll down and you'll find a Metafields section where you can add new content to the new fields. Populate these for each product or page, and you're ready to use them.
How to use Metafields in your theme
Shopify makes it very easy to use metafield data in your theme. Go into the Theme Editor, click on any section's settings and look for the dynamic source button shown below.
After clicking on this, you'll be shown metafield content that is able to be added there. It will only show you metafields that match the type of the input. For example, if you're adding text, then it won't show you metafields that were set up to accept images as an option to add in that spot. That's why it's important to select the correct type when setting up your metafields.
I've noticed that some text fields don't have the dynamic source button, but you can still add liquid code to add your metafield like this: {{ product.metafields.custom.field_name.value }} . You can get the metafield code on the Custom data page where you set up your metafields, but note that you need to add .value for the content to show, and of course wrap it in Liquid's double curly braces {{ }}.
Now what if you have some products with metafields and some products without them, and you want to use the same product template? Then you might need to build some custom sections or blocks. You can reference the metafields in the code the same way as shown above.
To reference metafields in the theme code files , you can do so like this: {{ product.metafields.custom.field_name }}. However, for most types of data, we're required to add the metafield_tag filter to the liquid object like this: {{ product.metafields.custom.field_name | metafield_tag }}. The metafield_tag filter generates an HTML element to hold the metafield data, according to the type of metafield. You'll know you need to use the filter if you get a jumble of code on your page in the place of the metafield text.
Planning for Metafields
As I mentioned before, when adding metafields through the dynamic source button in the theme editor, it will only show you options that match the input type. Here are some scenarios you might not expect:
Example 1
You're trying to add metafield text to a text field but it's not showing up as an option.
Most likely you've set up the metafield as a different text type. If you're editing a single-line text box, then it won't give you the option to add a metafield that uses the multi-text content type.
Example 2
You're adding a video section to the product page but the metafield you set up isn't showing. In this case, your section might accept text for the video link, but you've created the metafield as a File content type and uploaded the video there. Instead, you need to set up the video metafield as a single line text input.
Lesson
The input box type must match the metafield content type, so choosing the right content type when creating your metafield is important because it will affect how you can use the stored metafields. Unfortunately you can’t edit metafields to change the content type once they’re created. If you’ve made a mistake, you have to delete the metafield and create it again.
Because of this, creating metafields does sometimes require a bit of planning. I usually write down a list of the metafields I will need, and the type they should be, and then create them.
Designing for Metafields
You should consider how metafields work starting from the design stage of a website.
Shopify's themes use templates so you only need one template to create an unlimited number of pages that all look the same, but populate different information. So if you're designing a particular section to go on in the product template, then you want to be relatively sure that you'll have that information for all products.
If you add a section to the page that should be filled with metafield information, but one of your products doesn't have this, then you'll be left with a blank section.
When designing, it’s important to consider, can your client provide this information for each product? For example, if the client wants to include Testimonials or UGC (user generated content), you might think of using a multicolumn section to show 3 product reviews. If the reviews will appear the same on each page then this is fine and you don't need to use metafields at all, but if you want different reviews to show on different product pages, then it's doable but more complicated.
Each review has an image, title and text. In this case, you would need all this content, that’s 9 different metafield values, for each product. It might not be possible for your client to produce this content for each product, depending on how many products they have.
If you are using metafields, perhaps a better design decision would be to highlight just one testimonial with a section like an Image and Text section. That way your client only needs to provide one shining testimonial per product, and you only need to create 3 metafields. The Multicolumn section design with testimonials might be a better fit for the homepage, where metafields aren’t being used.
If you're comfortable with Shopify code, you can get around this issue a by hard-coding in the blocks and metafield values into sections, and set up items to display only if certain conditions are met (like a metafield being populated with information). But this doesn't make it easy for your client to make updates.
Before metafields became a Shopify feature, you always had the option of creating a new product template if you need product pages to hold different amounts or types of content. And you still can do this. However, it's not ideal because means you have to maintain a second template if you ever make changes to the website, and it’s more complicated when your client wants to add more products because they have to know which template to choose.
Metafield Quirks
There are some additional quirks about metafields to be cautious about. If you're a web designer, I recommend working on metafields in the final client’s store, not in your own staging store, because there isn’t a way to export these and you’ll spend time setting them up all again. The theme also doesn’t import files correctly if the metafields stored in the theme haven’t been created in the store yet, so it’s a bit of a headache.
For example, if you export a theme that has a product template that uses metafields... when you import the theme to another store, the product template will be missing because the metafields don't exist in the new store. You'll have to manually add the product template to the theme.
*Update*: You can now control the order that metafields show up in on the product editor. You can pin up to 20 metafields to the top, and these can be dragged and reordered in the store Settings. They rest cannot be reordered so you may want to first make a list of all the metafields that need to be created, and create them in a specific order that makes the most sense to the client when they’re adding the content or making edits.
Shopify is continuously working on improving metafields so it could be that when you’re reading this, some of these details have changed.
Conclusion
To summarize what we've learned today:
- Metafields are custom fields to store additional information that’s helpful to the customer.
- Be careful to select the correct content type when creating new metafields.
- Design with metafields according to what content the client can provide.
- Choose using metafields over custom product templates for maintainability reasons when possible.
If you want to learn more about how you can make even more use of metafields, read our blog post, What are Shopify Metaobjects (and how to use them). Let us know in the comments below if you enjoyed this post and what you want to learn about next!
Hana Drdla
