The UI element (dropdown menu, color swatches, size buttons) that lets customers choose product options like size, color, material, or flavor.
On Shopify, these are powered by product variants — the different versions of a single product.
Learn more
Variant selectors might seem like a small detail, but they're a major part of the product page experience. A clunky selector can create friction; a smart one can actually boost conversions by making the decision feel easy and visual.
The most common formats are:
- Dropdowns — compact, but require an extra click and hide options until opened
- Swatches — visual (great for color/pattern), but can look messy with too many options
- Buttons — clear and clickable (ideal for sizes or simple choices like "set of 2" vs. "set of 4")
The best choice depends on what you're selling and how many variants you have. If you've got 12 colors, swatches make sense. If you've got 3 sizes, buttons are cleaner. If you've got 47 SKUs across multiple attributes... you might need to rethink your product structure entirely.
Variant selectors also affect inventory visibility — Shopify can show which options are sold out or low stock, which is great for urgency but only if it's designed clearly.
Examples / tips:
- Use swatches for anything visual (color, pattern, finish) so customers can see what they're choosing.
- Use buttons for non-visual choices (size, quantity, subscription frequency) — they're easier to tap on mobile.
- Avoid dropdowns if you have 5 or fewer options; they add unnecessary friction.
- Show sold-out variants (grayed out or crossed out) rather than hiding them — it builds scarcity and prevents customer confusion.
- If a variant affects price, make sure the price updates visibly when someone selects it.
