Shopify Metafields: The Complete Guide for Store Owners

Shopify's default fields cover the basics, but most stores need more. In this Shopify Metafields Tutorial, you'll learn how to use metafields to display custom data, from care instructions and size charts to color swatches and product specs, without coding. Follow this practical guide from NextSky to create a richer shopping experience.

What Are Metafields in Shopify?

Metafields are custom data fields that let you store extra information beyond Shopify's default fields. They can be added to products, variants, collections, customers, orders, pages, and more. Each metafield includes four parts:

Namespace: Groups related fields (e.g. custom, product_specs).
Key: The field name (e.g. care_instructions).
Value: The stored content (e.g. "Machine wash cold").
Type: The data format, such as text, number, file, date, URL, reference, or boolean.

Before Online Store 2.0, using metafields often required custom Liquid code. Today, you can create, manage, and display them directly in Shopify Admin without any coding.

How to set up metafields in Shopify admin

Setting up metafields is a three-step process: define the structure, add values, then display them on your storefront.

Step 1: Create a metafield definition

A definition is the blueprint, it tells Shopify what the field is, what type of data it holds, and where it appears.

In Shopify Admin, go to Settings > Metafields and metaobjects
Select the resource type (Products, Collections, Customers, etc.)
Click Add definition
Enter a name (e.g., "Care Instructions")
Choose a content type (Single-line text, Rich text, File, Page reference, etc.)
Optionally add validation rules — character limits, number ranges, or URL formatting
Click Save

Shopify also provides standard metafield definitions for common needs like "Material," "Care guide," and "Product subtitle." Using these when available is recommended because they are recognized by most themes and third-party apps automatically.

Step 2: Add values to products (or other resources)

Once your definition exists:

Open a product (or collection, customer, etc.)
Scroll to the Metafields section at the bottom
Click the field and enter the value
Click Save

For large catalogs, use the Bulk Editor, a spreadsheet-style interface inside Shopify Admin that lets you fill in metafield values across many products at once. You can also use CSV import/export for even larger updates.

Step 3: Display metafields on your storefront

With an Online Store 2.0 theme, this is straightforward:

Go to Online Store > Themes > Customise
Open the product (or collection) template
Add a content block: Collapsible row, Text, Image, or Pop-up
Click the connect dynamic source icon next to the content field
Select your metafield from the list
Save

The block will now pull in the metafield value for each product automatically — and if a product has no value for that field, the block simply won't display. One template handles every product.

For older (vintage) themes, you can output metafields directly in Liquid:

{% if product.metafields.custom.care_instructions != blank %}

{% endif %}

Adding color swatches with category metafields

Shopify's native color swatch system, introduced in Winter Edition '24 and supported in Dawn V13 and later, uses category metafields rather than custom metafield definitions. Here's how to set it up:

Step 1: Assign a Product Category

Open the product in Shopify Admin
In the Category section, select a category from the Standard Product Taxonomy (e.g., Apparel & Accessories > Clothing > Clothing Tops > Shirts)
Save, this unlocks the category metafields for that product, including Color

Step 2: Add Colour Entries

In the Category metafields section on the product page, click the Color metafield.
Click Add new entry (or select an existing entry).
Enter a label (e.g., "Forest Green"), a hex color code, and optionally a pattern image.
Save.

Color entries become reusable metaobject records (type shopify--color-pattern), create one and link it across multiple products.

Step 3: Connect Color to Variant Options

Still on the product page, go to the Variants section.
Click Add options like size or color.
When setting up the Color option, select the Color category metafield as the source.
Variant values auto-fill from the entries you created.

Step 4: Enable Swatches in Your Theme

In the Theme Editor, go to Theme Settings or the Variant Picker block and enable Shopify Native Swatches. This feature is supported by themes such as Dawn, Sense, Refresh, Craft, Spotlight, Origin, Horizon, and many Archetype and Out of the Sandbox themes updated in 2025.

Where do swatches appear?

Shopify's native swatches are displayed in:

The variant picker on product pages
Collection and search page filters through the Search & Discovery app

Swatches shown beneath products in collection grids are not part of Shopify's native system. To display them, you'll need a Combined Listings app or custom theme code.

Adding Color as a Filter

Using the Search & Discovery app:

Go to Apps > Search & Discovery > Filters
Click Add filter and select + Select source
Choose Color with type Category metafield
Under Manage values, enable Include swatch to display colors visually
Save

Adding a size chart with metafields

Wrong sizing is one of the top reasons for online returns. A size chart linked via metafields lets you assign different charts to different products — all from a single product template.

Step 1: Create the size chart page

Go to Online Store > Pages > Add page
Name it (e.g., "Women's Tops Size Chart")
Add your size chart — either as an HTML table or an uploaded image
Save

Create as many pages as you have distinct size charts — one per product category, age group, or brand.

Step 2: Create a metafield definition for the page reference

Go to Settings > Metafields and metaobjects > Products
Click Add definition
Name it "Size Chart"
Select Page as the content type
Save

Step 3: Link each product to its size chart page

Open a product
Scroll to the Metafields section
Click the Size Chart field and select the appropriate size chart page
Save

Repeat for all products. Products without a size chart assigned won't display the element.

Step 4: Display the size chart in your theme

As a collapsible row:

In the theme editor, open your Default product template.
Under Product information, click Add block > Collapsible row.
Enter a heading (e.g., "Size Guide").
Next to Row content, click the dynamic source icon and select Size Chart.
Save.

As a pop-up:

Add block > Pop-up.
Link the popup content to your Size Chart metafield.
Save.

When a shopper clicks the "Size Guide" button or link, the associated size chart page opens in a modal overlay, without leaving the product page.

Using metafields to power Shopify filters

Structured metafields can be used as storefront filters, helping customers find products more easily. Using Shopify’s free Search & Discovery app, category and product metafields such as color, size, material, and eco-friendly attributes can be displayed as filter options on collection and search pages.

Setup overview:

Install Search & Discovery from the Shopify App Store if not already active
Go to Filters and click Add filter
Select the metafield you want as a filter source
Configure display options (checkboxes, swatches, ranges, etc.).
Save and review on your storefront

For filtering with custom (non-category) metafields, the metafield definition must have Storefront access enabled. This is selected by default when creating definitions.

Examples of powerful metafield-based filters:

Material (text metafield) → "Cotton," "Linen," "Recycled Polyester"
Assembly Required (boolean) → Yes / No
Eco-Friendly (boolean) → toggle filter
Weight Capacity (number) → range slider
Certification (text list) → "OEKO-TEX," "GOTS," "Fair Trade"

This approach creates the kind of refined filtering experience that speciality retailers, outdoor gear, children's products, furniture, need to help customers confidently find the right product.

General