Selected Variant
Displays the customer's completed variant selection (e.g. "Black / L") anywhere on the page.
Last updated
How to use
Place the component anywhere on the product page and connect
⛁ Butter Datato the product's Butter Data CMS field.Set the
Formattemplate —{{variant}}inserts the customer's selection, e.g. "You selected {{variant}}".Set the
↳ Separatorbetween option values (defaults to " / ").Choose the
Incompletebehavior — Hide or Text — for before the selection is complete.Style
Font,Color, andTransform.
Formatting the selection
The Format control is a copy template — anywhere you write {{variant}}, the component inserts the customer's chosen option values joined by the ↳ Separator (default " / "), e.g. "Black / L". Use it to build copy like "You picked: {{variant}}" without adding a separate text element.
Handling an incomplete selection
Until every option is chosen, Incomplete controls what shows: Hide renders an invisible placeholder that preserves layout, or Text shows the ↳ Text fallback copy you set. On a single-variant product, the Variant Selector's auto-select runs first — until it does, this component briefly shows the incomplete state.
Staying in sync with the page
This component is read-only — it never sets the selection itself. It reads the same shared selection the Variant Selector writes to, so it updates instantly when the customer picks an option anywhere on the page, including through a shared ?variant= URL parameter. It reflects the page-level selection, so it won't work per-row inside a Cart List — use that component's own cart-item data there instead.