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 |
| The value of the matching product metafield. |
| 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:
customKey:
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
In your Shopify admin, go to Settings → Custom data → Products.
Click Add definition to define a new metafield (or use an existing one).
Set the namespace and key. (Tip: Shopify's default “Standard” metafields use the
customnamespace.)Choose a type that makes sense (single-line text, multi-line text, etc.).
Save the definition.
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.
