PDP

Variant Selector

Renders product option selectors (size, colour, material) and writes the chosen variant to the shared store. Supports Buttons, Swatches, and All modes.

What it does

AP_VariantSelector renders product option selectors for a Shopify product and writes the chosen variant to a shared variant store. It supports three display modes:

Buttons – renders non-colour options only (e.g. size, material)
Swatches – renders colour options only, as visual swatches
All – renders both non-colour buttons and colour swatches together

Swatch colours are sourced directly from Shopify's product swatch API, so you don't need to maintain a manual colour mapping. When a user changes any option, the component resolves the matching Shopify variant using selectedOptions and writes the full variant object to the shared store, including:

id
title
price
compareAtPrice
image

Property Controls

ControlTypeDefaultDescription

ShowEnumButtonsControls which option types are rendered: Buttons = non-colour options only, Swatches = colour options only, All = both non-colour buttons and colour swatches.

Product IDString—Shopify product ID used to fetch variants and swatch data for this selector.

Variant FieldString—CMS field key or path containing the variant string from your Framer product collection; used to link the selector to the correct variant data.

Auto-select FirstBooleantrueWhen enabled, automatically selects the first available option in each option group on load.

Color MapJSON String—Optional JSON string mapping colour option values to hex codes, used as a last-resort fallback when Shopify swatch colours are not configured.

Button StylesObject—Styling configuration for non-colour option buttons, including font, gap, padding, radius, border, colours, selection ring, and out-of-stock appearance.

Swatch StylesObject—Styling configuration for colour swatches, including size, radius, gap, border, selection ring, optional text label, and out-of-stock appearance.