Variant Content

A conditional wrapper that shows or hides a connected design based on the selected variant or option value.

Last updated

August 14, 2026

How to use

Connect ⛁ Butter Data to the product's Butter Data CMS field.
Set Show When — selected or unselected — to decide whether the content reveals or hides on a match.
Set Match to Option or Variant ID, and provide the corresponding Option + Value or Variant ID to match against.
Connect your design — and if it should differ per screen size, see the responsive section below.

Matching by option value or by exact variant

`Match`	Use it for
Option	Any variant that has a given option value selected — e.g. show a callout whenever any "Blue" variant is chosen, regardless of size.
Variant ID	One exact variant — e.g. a note that should appear only for the specific Blue / Large combination.

Responsive content per breakpoint

The revealed content can differ by screen size — a full explainer panel on desktop, a one-line callout on mobile. Set States to how many designs you need (1–4) and connect one per tier, then on each of Framer's breakpoints set Display to the tier it should use.