# What Are Shopify Metafields and How Are They Published?

> What Shopify metafields are, what parts they have, how they get from the admin to the product page's HTML and how to check your theme publishes them.

URL: https://clione.ai/glossary/shopify-metafields/
Lang: en

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](/glossary/meta-title/) or the [meta description](/glossary/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.[^shopify-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.[^shopify-help-metafields]

A metafield has four parts:[^shopify-metafields-dev]

| Part       | What it is                                                               | Example                |
| ---------- | ------------------------------------------------------------------------ | ---------------------- |
| Identifier | The namespace plus the key                                               | `custom.warranty_info` |
| Value      | The data that is stored                                                  | "Two-year warranty"    |
| Type       | The kind of value: text, number, date or a reference to another resource | Single-line text       |
| Resource   | The Shopify object it belongs to                                         | Product                |

**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.[^shopify-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.[^shopify-metafields-dev] That matters on a [headless](/glossary/headless-commerce/) 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.[^shopify-help-metafields] In [Liquid](/glossary/shopify-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.[^liquid-metafield] An app does not touch your theme: it does it with a [Shopify app embed](/glossary/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.[^theme-app-ext-config]
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.[^shopify-render-server] That is [server-side rendering](/glossary/server-side-rendering/), and it is what makes a [crawler](/glossary/web-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:

```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:

```html
<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](/glossary/structured-data/) work: Clione, for example, writes its signals to metafields and paints them with two app embeds, one for the [JSON-LD](/glossary/json-ld/) graph in the header and another for the FAQ accordion, which are turned on from its panel with one click.


Stored is not published. A metafield having a value in the admin only means the data exists; for it to show on the store, the theme has to read it, from a dynamic source in the editor or from its code.[^shopify-help-metafields] If an app publishes it, its app embed has to be activated, and it is not by default.[^theme-app-ext-config]


## 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.[^shopify-metafields-dev]
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.[^shopify-help-metafields]
3. **If an app publishes the data**, check in the theme editor that its app embed is activated.[^theme-app-ext-config]
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.[^shopify-metafields-dev]

## Related concept: Shopify metaobject

A metafield extends a resource that already exists; a [Shopify metaobject](/glossary/shopify-metaobject/) is a new type of record that you define, for data that does not belong to any Shopify object.[^shopify-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](/glossary/bigcommerce-custom-fields/).

To go further, the [publishing by platform reading path](/learn/publishing-by-platform/) explains how each piece of data gets to the store on Shopify and on BigCommerce.