Variant selector patterns
The variant selector is where decision becomes action. The pattern depends on what's being chosen, a few sizes and colours wants something different from a multi-axis configurator. Get this wrong and shoppers stall, get the wrong SKU, or abandon entirely.
Colour swatches and size pills
A row of circular colour swatches above a row of rectangular size pills. Active colour is named beside the label, active size is filled. Sold-out sizes show with strikethrough. Used everywhere fashion is sold.
> what's good
- +Direct visual mapping, the affordance matches what's being selected.
- +Sold-out states are easy to communicate inline without extra controls.
- +Compact, leaves room for size guide and shipping reassurance.
> what's risky
- ·Colour swatches lie, the dot rarely matches the real fabric, leading to returns.
- ·Many sizes plus many colours quickly overflows on mobile, requires careful wrapping.
- ·Sold-out strikethrough can be missed on touch, shoppers tap and get an error.
Stacked dropdown selectors
A vertical stack of dropdowns, one per configurable axis (chip, memory, storage, finish, etc.). The configured price updates as selections change. Used for laptops, bikes, custom furniture, and any product with a real configuration tree.
> what's good
- +Handles arbitrary numbers of axes without UI redesign.
- +Live-updating configured price keeps cost transparent during the build.
- +Familiar control surface, no new affordances to learn.
> what's risky
- ·Dropdowns hide options behind clicks, hurting browsability when shoppers don't know what they want.
- ·Invalid combinations (chip × storage tier) need careful disabling, easy to ship a buggy matrix.
- ·Long flows feel transactional, kills the wow factor on aspirational categories.
Visual option grid
A grid of cards, each showing a model with image, name, and starting price. The active card has a coral border and check badge. Used when models are visually distinct and the choice is itself a key part of the product story.
> what's good
- +Brings the product itself into the choice, shoppers see what they're picking.
- +Strong visual hierarchy makes the active selection unmissable.
- +Suits flagship product launches where the configuration is part of the brand story.
> what's risky
- ·Heavy on PDP real estate, only works for a small number of options.
- ·Image-led cards rely on consistent product photography, hard to maintain at scale.
- ·Doesn't scale to multi-axis configuration, you end up reverting to dropdowns anyway.