Logeix Icon

Mastering Metafields in Shopify (For Beginners!)

By Khang Nguyen 13 min read
Main image for Mastering Metafields in Shopify (For Beginners!)

If you’re serious about running your Shopify business, you’ll realize that you’re pretty limited in what type of information you can show on product and collection pages.

Don’t get me wrong, Shopify is amazing if you want to put together a store without prerequisite web and eCommerce knowledge. It also comes with a powerful variant and inventory management system to boot.

But for real users (i.e. people looking to buy your products), just out-of-the-box features won’t cut it.

This is where metafields come into play. In this guide, let’s go over what they are and how you can leverage them for user and SEO benefits.

What are Shopify metafields?

For a rather technical-sounding name, metafields serve a simple core purpose: to provide extra information.

Depending on your niche, there’s likely a lot of data types Shopify doesn’t support by default.

PC components compatible with a specific motherboard, food expiry date, ingredients in cosmetic products are a few examples.

You can make an argument that putting everything in the product description field is fine, but then you realize that it’s just treated as static text and thus not really useful for navigation, filters, etc.

Another problem is that it’s borderline impossible to keep it consistent across hundreds of products, visual or information wise.

With metafields, it’s easy to create and reuse custom data with just a few clicks. Then you can add them to your online store and style it up without any coding required.

Screenshot showing metafields being used for product features like unique features or care guides

One common use of metafields is to add unique features to a product or care guide for apparel.

How to add a metafield to my Shopify store?

For each type of custom data, you must create a metafield definition for it. Keep in mind that there’s a hard limit of 200 metafield definitions per resource (i.e. page type). In a normal setting you won’t be anywhere near this limit though.

From your Shopify admin, navigate to Settings > Custom data, then choose the type of page you want to assign your metafield to. For sake of demonstration, we will create a metafield for Products.

Screenshot of Shopify admin showing the custom data settings with a list of metafield definitions

Click Add definition, and you will be greeted with this:

Screenshot of the Shopify metafield definition setup screen

Here’s a rundown of each input field:

Name

Your reference name for this metafield. This (and everything else in this menu) is only visible in the admin panel. Nevertheless, give it an easily identifiable name. When you type in a name, Shopify might suggest a standard definition. Standard definitions are pre-configured for their specific use case and automatically integrates with your theme and apps.

We suggest using standard definition wherever possible. In this guide though, we’ll create a custom definition.

Screenshot showing standard metafield definition suggestion in Shopify

Namespace and key

This part might sound scary, but again it’s just a unique identifier string for your metafield. It follows a simple [namespace].[key] structure, and you can use the same namespace to group different keys together.

This is also purely for reference, but unlike Name, you will actually use this to refer to the metafield when you write custom code for it.

Shopify automatically generates a namespace and key combination when you give the custom field a Name, but you’re free to edit it to something more manageable.

Description

This optional value allows you to display short instructions or explanations next to this metafield. We usually use this to help store managers know how to input the correct values.

Type

You can select different types for your input value for validation and organization purposes. For many types, you can choose whether to accept input as a single value or as a list of values.

Here’s the full list of content types supported by Shopify as of 2023:

TypeDescriptionExample use case
DateDate values in ISO 8601 format (YYYY-MM-DD)Expiry dates, shipping dates for products made-to-order
Date and timeSame as above, but must include a timeSales events
WeightWeight values, supports decimals and metric + imperialProduct specifications, package weight
VolumeVolume values, supports decimals and metric + imperialVolume of a can of soft drink, how much a water bottle can hold
DimensionDimension values, supports decimals and metric + imperialFurniture height, length of an HDMI cable
IntegerWhole numbersNumber of servings for food or drink products
DecimalDecimal valuesPrecise measurements for products like jewelry or micro-electronics
File referenceImage, video or generic type filesInstruction manual, assembly guide, proof of calibration
Page referenceLink to another existing pageDelivery policy, measuring/installation guide for a range of products
Product referenceLink to another existing productProducts frequently bought together
Product variant referenceLink to another existing product variantOther clothing items in the same size or color as the current one
Collection referenceLink to another existing collectionRelevant complementary product collections
Single line textPlain text, no line breaksBlurb at the top of a product page, 2-3 word features
Multi-line textPlain text, supports line breaksCustom shipping/order notes
Rich textText with styling options, similar to product/collection descriptions. How it’s handled depends on your themeLong form content, FAQ sections that might include tables or hyperlinks
ColorRGB valuesGive a product page a different background color depending on the mood
MoneyMonetary values, same currency as store currencySpecifications about manufacture or shipping costs
RatingDecimal valuesNiche-specific grading scales
True or falseTrue or false, selected with a toggle checkboxShow or hide product options
URLLink values, can be limited to specific domainsReviews or instructions hosted somewhere else
JSONRaw JSON data, for advanced useTables of ingredients
Mixed referenceFor advanced use onlyCustom dynamic landing pages

Validation

Also optional, you can use this to limit your input values to a specific range. Options will vary depending on what content type you select.

Here’s what we created for this demonstration. This metafield is in the navigation namespace and named room. It accepts one or multiple values out of 4 possible.

Screenshot showing a custom metafield definition for 'Room' in Shopify with multiple value options

When you press save, take note of the full name for the metafield as it might come in handy later. This one is called “product.metafields.navigation.room” for reference.

Now that you have defined your first metafield, let’s actually add it to your product.

How to add Shopify metafields to my products?

Navigate to your product’s page in Shopify admin. Then simply scroll down to the bottom and you will see your new metafields.

Simply click on one of them and you’ll be prompted to enter a value. If it’s defined as a list, you’ll also have the option to add a new list item.

What type of metafields and how many you need really depends on the products you sell and whether you need backend management/integration with a supplier. Here’s a basic example if you sell window blinds online:

Screenshot showing filled-in metafields on a Shopify product page for window blinds

Peep the “Room” metafield we created just earlier.

How to bulk add or edit Shopify metafields

Adding a metafield to a single product or collection is easy. If you have hundreds of them though, it may be time-consuming to edit each one individually to add or update metafields.

Fortunately, Shopify offers a bulk edit feature that allows you to make changes to multiple products or collections at once. Here’s how to do it:

Bulk edit metafields using Shopify’s editor

From your Shopify admin, head to Products, then select all of your products. If you have more than 50 products, click “Select all products in this store” too:

Screenshot showing how to bulk select products in Shopify admin, including the option to select all in the store

Then click “Bulk edit” on the box that pops up:

Screenshot of the Shopify bulk edit prompt

You will now be taken to the bulk editor page. Click the Columns in the top right corner:

Screenshot of the Shopify bulk editor interface with the 'Columns' button highlighted

Scroll down to the bottom and select whichever metafield definitions you’d like to edit. After ticking your preferred checkboxes, bookmark the page so you don’t have to go through this process again when you eventually need to update the values.

Now you can add or edit values to multiple products at the same time. Remember to save when you’re done.

Using a third party app and a tracking sheet

The bulk editor is sufficient for setting up metafields for the first time. The tricky part though, is if you need to update thousands of products frequently.

We have a different process to handle this, using a spreadsheet dedicated to managing metafields and the Matrixify app:

  1. Export all of your products via the Products panel
  2. Import it to Excel or Google Sheets, then filter it to show each product’s URL handle once, on a single row.
  3. Create a new column for each metafield you want to update, and enter your value(s)
  4. Export it to a CSV or Excel file and import it back into Shopify with Matrixify, carefully assigning each column to the correct metafield.

As different content types have different syntax rules in a spreadsheet, if you’re using this approach for the first time, try these steps:

  1. Manually enter values for several products, including edge cases like multiple values for a list, empty values, etc.
  2. Bulk export your products using Matrixify
  3. Wait for Matrixify to process the export, then open the resulting file
  4. Take note of the metafield columns to learn the correct syntax and spreadsheet structure, then repeat for the rest of the products

Here’s what the spreadsheet would look like for window blind metafields:

Example spreadsheet structure for bulk editing Shopify metafields, showing columns for URL handle and metafields

If your metafield accepts multiple values, you might see square brackets and quotation marks like this. Otherwise, it will most likely resemble plain text.

As with all bulk editing practices, be absolutely sure that you have read the instructions before mass updating anything.

After taking the time (and effort) to mass update your products and/or collections, it’s finally time to actually roll these new metafields to your storefront.

How to display Shopify metafields on your storefront

With Online Store 2.0 fully rolled out and compatible with most themes, it’s really simple to edit your theme to display metafields without any coding.

First, enter your theme builder by going to Online Store > Themes > Customize:

Screenshot of the Shopify themes admin page with the Customize button highlighted

Then, select the page type on which you wish to display your metafield. In this demonstration we’re editing the default template for product pages:

Animated screenshot showing how to select a page template in the Shopify theme builder dropdown

Once you’re in the right page, add a new block of text where you need to display your metafield:

Screenshot showing the option to add a new text block in the Shopify theme builder

Don’t type in your metafield name. Instead, click on the “Insert dynamic source” icon, then the metafield definition you need.

Screenshot showing the 'Insert dynamic source' icon in the Shopify theme builder text block settings

This element still behaves exactly like every other text block though, so you can add static text and style it however you like:

Screenshot showing a metafield displayed on a product page preview within the Shopify theme builder

If your metafield accepts multiple values, it’s automatically formatted as an HTML list element. Huge success!

The metafield we have created is now dynamically inserted to every single product page. You can now save the theme and see it on the live storefront.

Conditional visibility for Shopify metafields

You’ve successfully added your shiny new metafield to your storefront, you’re happy to see an extra bit of helpful information for your visitors. Everyone rejoices.

Until you release a new product without filling the metafield.

If your input value is empty, it will look a bit… odd:

Screenshot showing empty space and remaining static text when a metafield value is missing

That is because while your dynamic data is blank and thus not visible, the rest of the block is just good old static text. It doesn’t really care that it shouldn’t be there in the first place!

There’s at least two way to get around this:

  • Create a new template for products that don’t have this value and remove the text block altogether
  • Require that every product has at least something filled in, even if it doesn’t make sense

But both ways are equally annoying to deal with.

To fix this, we recommend working with a developer to implement conditional visibility. But if you can handle writing a basic Liquid snippet, here’s how to do it:

First, open the theme code editor by going to the top left corner of your theme builder, clicking on the 3-dot menu and choose Edit code:

Screenshot showing how to access the 'Edit code' option from the dropdown menu in the Shopify theme builder

In the Templates folder, find the template you were working on, and within it the text block you added:

Screenshot showing the code view in the Shopify theme editor, highlighting the code for a text block

Copy the text in quotes (we’ve highlighted it in yellow). For reference, our example text block looks like this:

<p><strong>Looks best in:<\/strong><\/p>\n{{product.metafields.navigation.room | metafield_tag }}\n<p>Not sure how to measure your window for blinds? <a href=\""\/pages\/fitting-guides\"" title= \""How To Fit Blinds\"">Check out the guide.<\/a><\/p>

Take your code and paste it into a JSON unescape tool like this one. Your output should look like this:

<p><strong>Looks best in:</strong></p>
{{product.metafields.navigation.room | metafield_tag }}
<p>Not sure how to measure your window for blinds? <a href="/pages/fitting-guides" title="How To Fit Blinds">Check out the guide.</a></p>

Now that’s much more legible.

Now, let’s add a simple conditional statement to only show this whole snippet if its product.metafields.navigation.room is not blank i.e. filled in:

{% if product.metafields.navigation.room != blank %}
<p><strong>Looks best in:</strong></p>
{{product.metafields.navigation.room | metafield_tag }}
<p>Not sure how to measure your window for blinds? <a href="/pages/fitting-guides" title="How To Fit Blinds">Check out the guide.</a></p>
{% endif %}

Almost there…

Return to your theme builder, this time you’ll add a Custom Liquid block instead:

Screenshot showing how to add a Custom Liquid block in the Shopify theme builder

Copy your new code snippet (with the {% if %} lines added), and paste it in the newly created block:

Screenshot showing Liquid code pasted into a Custom Liquid block in the Shopify theme builder

Lo and behold, the text block will be shown only if the product’s product.metafields.navigation.room field is set. Delete the other text block and save your theme for the changes to take effect.

Practical implementation of Shopify metafields

At Logeix, we don’t just tick checkboxes and toss you a list of H1s to update. Other than displaying helpful information on shopping pages, here’s a few other ways we use metafields on our clients’ stores:

… but don’t most themes already come with them?

Well, that’s true. But if you have fixed your internal product links as you should have, they will be more or less useless.

The reason is that out of the box, Shopify checks the URL in the address bar to display breadcrumb links. And with the /collections/ part of the URL gone, it will only show Home > Product Name.

And also, wouldn’t you like more control over your breadcrumb links, including adding more than one layer?

By restoring the breadcrumbs functionality with custom metafields and enabling manual control, we can mass add hundreds of internal links to product pages.

(We actually have multiple guides for this, here’s a basic implementation)

Custom navigation

Here’s another one: adding sub-collections to collection pages.

On Blindstyle, we added swatches of blind styles (heh) to key collection pages. This not only adds a ton of internal linking juice to these pages, but also offers a pleasant browsing experience for visitors looking for specific options.

Screenshot showing metafields used for navigation links with product swatches on a collection page

To create this, we utilized Shopify’s navigation menu to give the collection a list of sub-categories, and (you guessed it), image metafields for those fancy icons.

If you want this on your store, get a developer to help you with it, but here’s a guide for your reference.

Delisting products from the store

Sometimes, a product doesn’t really need to be indexed on search engines. That actually was the case with all of Blindstyle’s products, where we decided to rank collections instead.

There’s a relatively obscure metafield called seo.hidden that does the following:

  • Removes the page from the sitemap
  • Sets the page to noindex and nofollow
  • Removes the page from your storefront’s search function

We discussed this in more detail here. Apart from a few cases, you most likely don’t need to do this often though.

Final thoughts

While Shopify’s built-in features are robust, there are limitations to the types of information you can add. Metafields allow you to add additional information that can help improve your store’s user experience and ultimately lead to more sales.

Learning how to actually use them though, is another story.

It’s pretty simple to configure and display dynamic information, but the most powerful implementations are usually done with the help of a developer.

Additional Reading