Skip to main content
Variant Picker preview A Shopify-connected variant selector component for Framer that renders clickable option buttons (size, color, frame style, etc.) with real-time availability checking.

​
What It Does

The Universal Variant Picker displays the selectable options for a Shopify product — such as Size, Color, or Frame Style — as a row or column of buttons. It is designed to be placed once per option type, so a product with both Size and Color options would use two separate instances of this component. Key behaviors at a glance:
  • Renders one option group — each instance handles a single option type (e.g. one picker for Size, another for Color). The option name is set via the Variant Name control.
  • Live availability from Shopify — on load, the component queries the Shopify Storefront API to fetch fresh availableForSale status for every variant, overriding stale CMS data.
  • Smart selection logic — when a user selects a value (e.g. “XL”), the component finds the variant that matches both the new value AND all other currently selected options (e.g. the current Color), keeping selections consistent across pickers.
  • Unavailable options — variants that are out of stock are shown at reduced opacity with a diagonal strikethrough line and cannot be clicked.
  • URL-driven state — the active variant is stored in the ?variant= URL query parameter. All pickers on the page read and write to this same parameter, so they stay in sync with each other and with the gallery components.
  • Auto-selects first available — if no valid variant is in the URL, the component automatically selects and sets the first available variant.
  • Optional label — a text label (e.g. “Size”) can be shown above or beside the options, with full typography and color control.

​
Property Controls

All controls are accessible in Framer’s right panel when the component is selected. They are grouped into four sections: Variants, Variant Name, Label, and Options.

​
Variants (CMS)

​
Variant Name

​
Label

Controls the label displayed alongside the option buttons.

​
Options

Controls the appearance and layout of the individual option buttons.

​
Layout

​
States

Option buttons have three visual states — Selected, Unselected, and Disabled — each with independent color controls. Selected (the currently active option) Unselected (available but not active) Disabled (out of stock)

​
Notes

  • This component requires window.DOMAIN and window.ACCESSTOKEN to be set globally on the page for live Shopify availability fetching. Without these, it falls back to the availability data from the CMS.
  • Place one instance of this component per option type. A product with Size and Color options needs two separate Universal Variant Picker components, each with a different Variant Name.
  • The Variant Name must exactly match the option name as defined in Shopify (e.g. Frame Style, not frame style or FrameStyle).
  • All pickers and gallery components on the same page share state through the ?variant= URL parameter automatically — no additional wiring needed.