Skip to main content

Dynamic content with metafields and {{sku}}

Pull live data into tab content.

Written by Steve Jones

Inside the content of any tab - whether it's a product tab or a shared tab - you can use placeholders that get replaced with live product data on the storefront. This lets you build a single shared tab that automatically adapts to whichever product it's shown on.

Supported placeholders

Placeholder

Replaced with

{{metafields.namespace.key}}

The value of the matching product metafield.

{{sku}}

The SKU of the currently-selected variant.

Using product metafields

Shopify lets you attach metafields to your products - structured pieces of information like material, weight, technical specs, manuals, etc. Tabs+ can pull these into your tab content, so a single shared tab can display product-specific data without you having to write each one individually.

How metafields are referenced

Metafields in Shopify have a namespace and a key. For example, a metafield holding a product's care instructions might have:

  • Namespace: custom

  • Key: care_instructions

To reference that in tab content, you'd write:

{{metafields.custom.care_instructions}}

Example: a shared “Specs” tab

Suppose every product in your store has metafields custom.material, custom.weight, and custom.dimensions. You could create one shared tab labelled “Specifications” with content like:

<ul>
<li><strong>Material:</strong> {{metafields.custom.material}}</li>
<li><strong>Weight:</strong> {{metafields.custom.weight}}</li>
<li><strong>Dimensions:</strong> {{metafields.custom.dimensions}}</li> </ul>

Apply this shared tab to all products, and each product's tab automatically displays its own values.

You can use any combination of HTML and placeholders. The placeholder is replaced with the metafield value as plain text, exactly as stored in Shopify.

Setting up the metafield in Shopify

  1. In your Shopify admin, go to Settings → Custom data → Products.

  2. Click Add definition to define a new metafield (or use an existing one).

  3. Set the namespace and key. (Tip: Shopify's default “Standard” metafields use the custom namespace.)

  4. Choose a type that makes sense (single-line text, multi-line text, etc.).

  5. Save the definition.

  6. Open a product, scroll to the metafield and enter a value.

Now that metafield is available in any Tabs+ tab using the placeholder.

What about empty metafields?

If a product doesn't have a value for a referenced metafield, the placeholder is replaced with an empty string. The rest of the tab still renders. If you'd like a tab to disappear entirely when its metafield is empty, this isn't supported automatically - consider applying that shared tab only to specific products instead.

Using {{sku}}

The {{sku}} placeholder is replaced with the SKU of the variant the customer currently has selected. As they switch between variants on the storefront, the value updates automatically.

Useful for:

  • Embedding the SKU in a “product details” tab.

  • Building a custom “ask about this product” link that includes the SKU in a query string.

  • Displaying a unique product identifier prominently.

Example:

Product code: <strong>{{sku}}</strong>

Tips

  • Placeholders only work in tab content. They aren't supported in tab labels.

  • Metafields must be set on the product itself (not the variant) to be picked up by Tabs+.

  • If a placeholder isn't being replaced, double-check the namespace and key spelling, and confirm the metafield definition includes “Storefronts” in its access scope.

Did this answer your question?