With Variant Swatches
Working color and size selection with the chosen pair echoed in the add to cart button.
Working color and size selection with the chosen pair echoed in the add to cart button.
The Ecommerce Collection unlocks the source for every Ecommerce block. All Access unlocks every Collection.
Already purchased? Log in
With Variant Swatches is a working variant picker, color swatches and size buttons carry real useState selection, the chosen pair echoes in both the labels and the add to cart button, and aria pressed keeps the state accessible. The batch variance footnote turns a complaint into a feature, yours will not look exactly like the photo.
Colors and sizes are small arrays, the selected swatch rings with an offset so it reads selected in both themes. Swatch fills stay on theme tokens here, swap in real colorway values when wiring actual products.
Reach for this block on apparel and any product where variant choice is the main interaction. The size guide link belongs next to the size label, exactly where doubt occurs, wire it to the size chart.
A natural flow around it on an Ecommerce Pro page:
Before
After
One strong use is a garment with color and size axes. Other pickers:
Tip: echo the selection in the add to cart label, Tan, M in the button is the cheapest mistake prevention in commerce.