How to Use Shopify Metafields on Product Pages with Liquid

What Are Metafields?

A metafield is a custom data field attached to a Shopify resource. For product pages, you are almost always working with product metafields. They let you store information that does not fit into the default Shopify fields: care instructions, sizing details, material specs, video URLs, badge labels, or any custom data unique to your store.

Before Online Store 2.0, metafields required a developer and a third-party app just to manage. Now you can create definitions directly in the Shopify admin, fill them in on each product, and display them on your storefront using Liquid or the theme editor's dynamic sources.

Setting Up a Metafield Definition

Go to Settings > Custom data > Products in your Shopify admin. Click "Add definition." Give it a name, choose a type (single line text, multi-line text, true/false, number, file, etc.), and save. Once the definition exists, the field appears on every product edit page under a "Metafields" section.

Example 1: Custom Product Tabs

The most requested metafield use case. You want separate tabs for "Details," "Care Instructions," and "Shipping Info" on your product page, each with different content per product.

Create three metafield definitions: custom.details_tab, custom.care_tab, and custom.shipping_tab. Set each as "Multi-line text" type with rich text enabled. Then add this Liquid to your product template:

{%- if product.metafields.custom.details_tab != blank -%}
  <div class="product-tab">
    <h4>Details</h4>
    {{ product.metafields.custom.details_tab | metafield_tag }}
  </div>
{%- endif -%}

The metafield_tag filter renders rich text content with proper HTML. Without it, you would get raw text without formatting.

Example 2: Product Badges

Create a metafield definition called custom.badge_text as single line text. Fill it with values like "New Arrival" or "Best Seller" on specific products. Display it with:

{%- if product.metafields.custom.badge_text != blank -%}
  <span class="product-badge">
    {{ product.metafields.custom.badge_text }}
  </span>
{%- endif -%}

Keep badge text to two words maximum. "New Arrival" works. "Recently Added to Our Collection" does not render well at small sizes.

Example 3: Specifications Table

For products where physical details matter (dimensions, weight, materials), create a JSON metafield called custom.specs. Store structured data like:

{"Weight": "450g", "Material": "316L Stainless Steel", "Dimensions": "12 x 8 x 3 cm"}

Display it as a formatted table:

{%- if product.metafields.custom.specs != blank -%}
  <table class="specs-table">
    {%- for spec in product.metafields.custom.specs.value -%}
      <tr>
        <td>{{ spec.first }}</td>
        <td>{{ spec.last }}</td>
      </tr>
    {%- endfor -%}
  </table>
{%- endif -%}

Example 4: Dynamic Sources (No Code Required)

If you are using an Online Store 2.0 theme, you can connect metafields without writing Liquid. In the theme editor, click on any text block and look for the "Connect dynamic source" icon. Select your metafield from the list. The value will automatically populate for each product.

This works great for simple text fields. For anything more complex (conditional logic, custom HTML, formatted tables), you still need Liquid.

Common Mistakes

• Forgetting the blank check. Always wrap metafield output in an if != blank condition. Otherwise empty metafields will render empty HTML elements on products where you did not fill in the value.
• Using the wrong metafield type. Rich text requires metafield_tag to render properly. JSON requires iterating through .value. Single line text can be output directly.
• Not using the namespace. Metafields created in the admin use the custom namespace by default. If you are referencing a metafield created by an app, it will have a different namespace.

Need Help Implementing This?

If you want metafield-driven product pages built for your store, I handle the full implementation: definition setup, Liquid coding, styling, and testing. Check out my Liquid development service or send me your requirements.