What counts as variant selectors
This collection covers size, color, flavor and pack selectors on product pages, size pickers in the cart, and help with sizing such as model size overlays.
It also includes larger redesigns where the selector was changed along with other things.
The answer first: win/loss record
12 measured tests, 12 wins, no reported losses.
One, Kasper Dolk's benefits-first hero, was at 94% probability to beat control when reported.
Dave Diederen ran seven, Kasper Dolk three and Oliver Kenyon two.
Where variant selectors were tested
Product page (6 tests)
The selector-only tests sit here. Dave Diederen's argument for visual blocks is that a dropdown hides the options behind an extra tap.
Oliver Kenyon's size selector test changed nothing but how sizes were grouped.
Sizing confidence also won. Dave Diederen added a model size overlay to fashion images ("Elly is 5'8" and wears a size S") and reported +2.63% conversion rate and +4.61% revenue per visitor.
Dave Diederen's sticky add-to-cart bar that scrolls to the top when a variant must be picked reported +$32,565/month.
Cart (2 tests)
Oliver Kenyon's cart drawer test showed the size as a dropdown shoppers could change, along with a dispatch, returns and payment block under the checkout button.
It reported +23.8% revenue per visitor and +21.9% conversion rate at 99.4% confidence over 16 days and 200,000+ visitors.
Site-wide and homepage
Kasper Dolk's new theme with a BOGO offer lifted conversion rate from 2.44% to 3.53% (+44.54%).
Dave Diederen's homepage hero redesign reported +72.15% revenue per visitor. Both changed far more than the selector.
@oliverkenyon@oliverkenyon
@DaveDiederen@DaveDiederen@DaveDiederen@DaveDiederenBiggest wins and their numbers
- Homepage hero redesign: +72.15% revenue per visitor (Dave Diederen).
- New theme with BOGO offer: +44.54% conversion rate, 99.7% probability to beat the old theme (Kasper Dolk).
- Cart drawer reassurance block and size dropdown: +23.8% revenue per visitor (Oliver Kenyon).
- New sections under the add-to-cart button: +14.19% conversion rate, +A$52,743/month (Dave Diederen).
- Men's and women's sizes separated: +12.9% revenue per visitor (Oliver Kenyon).
Tests that lost or were flat
No test lost overall, but some variants did.
In Dave Diederen's model swap test, the blonde model won at 9.55% conversion rate against 9.32% for the control, and the brunette variant fell to 9.01%.
The sections-under-the-button test won on conversion rate but AOV fell 2.52%.
Design patterns that won
- Visible selector blocks or swatches instead of dropdowns, where the choice matters.
- Sizes grouped the way shoppers think about them, such as men's and women's.
- A reference for fit, such as the model's height and size.
- A sticky add-to-cart that sends shoppers back to the selector when an option is needed.
How to add or change variant selectors on Shopify
Most current Shopify themes let you switch the variant picker between dropdown and button (pill) styles in the theme editor.
Color swatches and size charts may need a theme setting, metafields or an app.
Browse product page variant selector tests and the sticky add-to-cart tests for related changes.
How to test it on your store
Hypothesis: shoppers hesitate because they cannot see or understand the options, so replacing the size dropdown with visible size blocks will lift conversion rate.
Change only the selector so you know what caused the result.
Measure conversion rate and revenue per visitor, and watch return rates for fashion.
Effects near +4%, as in the dropdown test, need a lot of traffic; check the sample size calculator.
Ideas not yet tested
- Kasper Dolk suggests big, spaced image swatches with an obvious selected state, and a label showing the variant name and color code when shoppers switch.
- Kasper Dolk also suggests disabling add-to-cart and marking sold-out options right in the selector.
- Dave Diederen suggests image swatches for colors and flavors, and a size chart on clothing product pages.