What are Shopify metafields?

A Shopify product comes out of the box with a title, a description, a price, some images and little else. When you need to store a garment's composition, a size guide or a toy's recommended age, Shopify does not ask you to change platforms: it asks you for a metafield. Despite the name, it has nothing to do with the meta tags in the header, like the meta title or the meta description: it is one more data field on the product. It matters to you because on a Shopify store the data you enrich usually ends up in metafields, and stored data is not published data until the theme paints it on the page.

How it works

Shopify defines it as an extra field on a resource that already exists, with data that describes a product, an order, a customer or another store object.⁠^{[1]Shopify.dev. Custom data} Its help center gives examples of what it is for: care instructions on clothing, recommended age and possible hazards on toys, dimensions on furniture or size guides.⁠^{[2]Shopify Help Center. Metafields}

A metafield has four parts:⁠^{[3]Shopify.dev. Metafields}

A metafield with a definition is more than a free-form field. Shopify gives defined metafields a typed editor in the admin, validation on save and the ability to search and filter by them.⁠^{[1]Shopify.dev. Custom data}

The namespace says whose data it is. The ones the merchant creates use unreserved namespaces, such as custom; apps store theirs in a reserved namespace, $app, so that their data does not collide with the merchant's or with another app's; and Shopify reserves those that start with shopify--. Each definition also decides who can read the data: by default, a metafield is not visible from the Storefront API, and you have to open it up explicitly.⁠^{[3]Shopify.dev. Metafields} That matters on a headless store, whose storefront reads data precisely through that API.

From the admin to the published HTML

A metafield goes through three states, and each one is checked in a different place.

1. Stored. The value exists in the admin or in the API. Nothing shows on the store yet.
2. In the template. The theme reads it. With a theme that supports dynamic sources, it is connected from the theme editor without touching code; with an older theme, or with metafield types the editor does not support, you have to edit the theme code.⁠^{[2]Shopify Help Center. Metafields} In Liquid, Shopify's templating language, you access it with product.metafields.namespace.key, and the value property returns the data in its type's format.⁠^{[4]Shopify.dev. Liquid objects: metafield} An app does not touch your theme: it does it with a Shopify app embed, a block that Shopify paints before the closing head or body. App embeds arrive deactivated after installing the app, and the merchant activates them in the theme editor.⁠^{[5]Shopify.dev. Theme app extension configuration}
3. In the published HTML. Liquid is resolved on the server, so the value comes out already written in the HTML the browser receives. Shopify recommends painting essential content this way, with Liquid and HTML, instead of building it with JavaScript in the browser: the initial HTML works without JavaScript.⁠^{[6]Shopify.dev. Render essential content server-side} That is server-side rendering, and it is what makes a crawler that does not run JavaScript find the data.

In a store

Fictitious example. A clothing store keeps each garment's care instructions in a product metafield, custom.care_instructions, of single-line text type. The theme paints them under the description with this line of Liquid:

<p class="care">{{ product.metafields.custom.care_instructions.value }}</p>

And in the HTML the store returns for that page it shows up like this, without the browser having to run anything:

<p class="care">Machine wash cold. Do not tumble dry.</p>

If the Liquid line is not in the template, the metafield is still stored and the page does not show it. That is also how apps that publish structured data work: Clione, for example, writes its signals to metafields and paints them with two app embeds, one for the JSON-LD graph in the header and another for the FAQ accordion, which are turned on from its panel with one click.

How to check it

1. Locate the definition in the custom data settings in the admin, note its namespace and key, and check that the product has a value.⁠^{[3]Shopify.dev. Metafields}
2. Open the theme editor on the product template and see whether any block is connected to that metafield as a dynamic source; if not, search for the key in the theme code.⁠^{[2]Shopify Help Center. Metafields}
3. If an app publishes the data, check in the theme editor that its app embed is activated.⁠^{[5]Shopify.dev. Theme app extension configuration}
4. Open the page's source code (view source, not the inspector) and search for the value. If it is in the source, it travels in the initial HTML; if it only shows up in the inspector, JavaScript added it afterward.
5. If your storefront is headless, check that the definition lets the metafield be read from the Storefront API.⁠^{[3]Shopify.dev. Metafields}

Related concept: Shopify metaobject

A metafield extends a resource that already exists; a Shopify metaobject is a new type of record that you define, for data that does not belong to any Shopify object.⁠^{[1]Shopify.dev. Custom data} A size guide shared by fifty garments fits as a metaobject, and each garment links to it from a reference-type metafield. On BigCommerce, the closest thing to a product metafield is custom fields.

To go further, the publishing by platform reading path explains how each piece of data gets to the store on Shopify and on BigCommerce.