Variant Metafield Text

Shows a variant-level Shopify metafield's text for the currently selected variant.

Last updated

August 14, 2026

How to use

In the Butter plugin, enable the variant metafield in the CMS field picker's Variant subsection and sync — this creates a CMS string field holding every variant's value.
Place the component on the product page or card.
Connect ⛁ Butter Data to the product's Butter Data CMS field.
Connect ⛁ Metafield to that metafield's CMS field.
Choose Display — All or Single (set ↳ Slot, 1-based, for list metafields).
When Display is All, set Gap for the space between stacked items.
Style Font, Color, and Transform.
Optionally set Fallback text, shown when no variant is selected yet or the selected variant has no value.

Variant selected and a value exists for it → renders that variant's text. Newlines inside a value are preserved.
Variant selected but no value for it, or no variant selected yet → renders Fallback if set, otherwise nothing (an empty div that keeps the layout).
On the Framer canvas: previews the first non-empty value in the connected field, else the Fallback, else a "Variant metafield text" placeholder.

Display: All stacks every list item as its own line, spaced with Gap. Display: Single shows just the item at the 1-based ↳ Slot number.

Both ⛁ Butter Data and ⛁ Metafield must be connected — the value lives in the metafield's own CMS field, not in Butter Data.
Text only — for image or video file metafields, use Variant Metafield Media instead.
Rich text metafields are flattened to plain text at sync time — no bold or links.
The characters [, ], and | inside values are replaced at sync time (with (, ), and -).
Values update at sync time, not live — a metafield edit in Shopify shows up here after the next sync.
If your store is connected without full admin access, only metafields marked publicly visible in Shopify will sync — the plugin tells you after the sync if some were skipped.