A visible color and size must map to price, image and stock for that same variant.
Colors, sizes and variant selection
Visible size buttons make available and sold-out sizes easier to discover than a closed dropdown.
Research context: Baymard · Size selection ↗
Famme uses color and size buttons; Trade has multiple quantity fields; small support products can use a simple selector.
Try the pattern
Task and expected result
- 01
In Softy: brown L is marked sold out and cannot be selected.
- 02
Choose brown XS, then change to black. An unavailable previous size must not carry through.
- 03
In Essential: choose 10 kr and check that the cart shows that exact amount.
- 04
Choose black L and switch to brown on Softy: clear L when brown L is sold out.
- 05
Open quick-add from a filtered card: color and size follow the card’s matching variant.
How to investigate value
Ask shoppers to explain their variant choice and fit. Later measure confirmed purchases per eligible product visitor, with return reasons as follow-up.
Watch for side effects
Wrong sizes, unknown details shown as facts, mismatched expectations and product-related support/returns.
This is a proposed investigation, not a measured result. Choose one hypothesis and define the audience before testing.
Build a measurement plan for this concept ↗