For fashion, home and accessories stores, the variation form is where the sale happens. A clear choice of color and size reduces hesitation, mistakes and returns. Here are ten practices that make a difference.
1. Show colors as colors
Replace the color dropdown with swatches. People choose a color by looking, not by reading. See why dropdowns cost sales.
2. One picture per color
Assign an image to each variation. When the customer taps Terracotta, the picture should be terracotta.
3. Sizes as buttons, in the right order
S, M, L, XL, not alphabetical (L, M, S, XL). Set the term order in Products › Attributes.
4. Show the chosen value
“Color: Sage” next to the label confirms the choice, especially for similar shades.
5. Warn before, not after
Cross out combinations that are out of stock. A customer who discovers it after choosing feels misled.
6. Offer a back in stock alert
For sold-out sizes, let customers leave their email. See back in stock notifications.
7. A size guide next to the sizes
Not in a tab at the bottom: right next to the buttons. It is the best tool against returns.
8. Think about the default
Preselect the most popular color if you want, but never preselect a size: customers must choose it consciously.
9. Show the range in the shop
Color dots under each product tell shoppers that the shirt exists in four colors before they open it.
10. Test on a phone
Buttons at least 36 to 44 pixels, enough space between them, and the add to cart button visible after choosing.
The tools
- Swatchly for color, image and button swatches, crossed out combinations and shop dots (demo).
- Sizely for the size guide next to the sizes.
- Restockly for back in stock alerts.
Frequently asked questions
Should I preselect a size?
No. Let customers choose their size consciously to avoid mistakes and returns.
How do I order sizes correctly?
Set the order of the attribute values in Products › Attributes and use “Custom ordering”.
Do variation images matter?
Yes, a picture that follows the chosen color is the most convincing proof.