How to display product metafields in a Shopify theme

Metafields are Shopify's answer to "I need a custom field on my product." Roast date, fabric, wattage, care instructions — anything that doesn't fit the built-in fields lives in a metafield. The wrong way to store that data is in the product title or tags. The right way is a metafield, and reading one in Liquid takes a single expression.

Reading a metafield

Metafields are addressed by namespace and key. If you defined a metafield with namespace specs and key origin, you read it like this:

1{{ product.metafields.specs.origin }}2{# Ethiopia #}

Always guard for empty metafields

Not every product will have every metafield filled in. Wrap the output so you never render an empty label or a stray heading:

1{% if product.metafields.specs.origin != blank %}2  <p><strong>Origin:</strong> {{ product.metafields.specs.origin }}</p>3{% endif %}

Metafield types matter

A metafield isn't always a plain string. Depending on the type you chose when defining it, the value behaves differently — and rendering it wrong is the most common metafield mistake.

• Single-line / multi-line text — outputs directly, as above.
• Rich text — render it through the metafields_tag helper or with .value, not as a raw string, or you'll print escaped markup.
• Number / integer — comes back numeric; format it yourself (it won't carry units).
• File or product reference — the value is an object, so reach into it: an image reference exposes .value you can pass to image_url.

1{# Rich text: render the .value, don't print the raw field #}2<div class="care-instructions">3  {{ product.metafields.specs.care.value }}4</div>

Rendering several metafields as product tabs

A common pattern is turning a handful of metafields into an accordion or tab strip. Loop the ones that have values and skip the empties:

1{% assign fields = "origin,roast,brew_time" | split: "," %}2{% for key in fields %}3  {% assign value = product.metafields.specs[key] %}4  {% if value != blank %}5    <details>6      <summary>{{ key | replace: "_", " " | capitalize }}</summary>7      <p>{{ value }}</p>8    </details>9  {% endif %}10{% endfor %}

What AI tools get wrong here

AI assistants tend to assume every metafield is a plain string and print rich-text or reference metafields directly — giving you escaped HTML or [object Object]-style noise. Knowing the metafield's type and reaching for .value when it's structured is the difference between data that renders and data that leaks.