Setting Up Size and Colour Variants Properly on Shopify
Variant setup looks trivial and then quietly determines your product page UX, your inventory reporting, and whether your size chart appears where the shopper needs it.
Quick answers
- Which option should come first?
- Colour, then size
- Dropdown or buttons for size?
- Buttons — they're faster and show what's out
- Hide sold-out sizes?
- No — show them as unavailable
- Where does the size chart go?
- Right next to the size buttons
Variant Setup Decisions
| Decision | Recommendation |
|---|---|
| Option order | Colour first, size second |
| Colour display | Visual swatches, not a dropdown |
| Size display | Buttons, not a dropdown |
| Sold-out sizes | Show, don't hide |
| Size chart link | Directly beside the size buttons |
Notes
Colour first, size second — because that's the shopping order. Shoppers choose the colour they want, then work out their size. Ordering options that way matches the decision sequence and means the size chart appears at the moment it's needed rather than before the shopper cares.
Use buttons for size, not a dropdown. Buttons show every size at a glance, including which are unavailable, in one tap. A dropdown hides that information behind an interaction — on mobile, where most fashion traffic is, that friction costs you.
Show sold-out sizes, don't hide them. Hiding an out-of-stock size means a shopper who wears it can't tell whether you ever carry it. Show it as unavailable and offer a back-in-stock alert. That converts an invisible bounce into a captured email.
Attach the size chart to the size selector. This is the setup detail that matters most and gets forgotten. The chart must be one tap from the size buttons — not in a tab further down the page, and certainly not in the footer.
FAQs
Should colour or size come first in Shopify variants?
Colour first, size second. That's the order shoppers actually decide in — they pick the colour they want, then work out their size — and it means the size chart surfaces at the moment they need it.
Should I use a dropdown or buttons for sizes?
Buttons. They show every size at a glance, including which are unavailable, in a single tap. A dropdown hides that behind an extra interaction, which costs you on mobile where most fashion traffic sits.
Should I hide sold-out sizes?
No — show them as unavailable and offer a back-in-stock alert. Hiding them means a shopper who wears that size can't tell whether you ever stock it, and they leave without a trace instead of giving you their email.
Need this on your store?
Tailor Size Guide ships pre-built size charts for Shopify.