The variant selector is the part of the product page where the shopper actually decides. Pick the wrong style and people miss options, choose the wrong size or give up on a phone. There are five common patterns, and each suits a particular kind of option. The right choice depends on two things: how many values the option has, and whether the difference is easier to see or to read.
5 patterns
| Pattern | What it looks like | Best for |
|---|---|---|
| Button group (pills) | A row of tappable boxes, one per value | Short text lists like S, M, L, XL |
| Color swatches | Small chips filled with each color | Solid colors |
| Image tiles | Thumbnails of patterns, prints or finishes | Patterns, wood grains, fabrics |
| Radio buttons | A vertical list with a dot beside each choice | Choices that need a line of explanation |
| Dropdown | One box that opens a list | Long lists like shoe sizes |
Buttons, swatches and radio buttons show every choice at once. A dropdown hides them until the shopper taps. That makes the dropdown compact, but it also means shoppers can't compare choices at a glance.
Decision by option count
- 2 to 6 values: buttons or swatches. Everything fits in a row or two, and every choice is visible.
- 7 to 15 values: buttons if they still fit on two rows on a phone, otherwise a dropdown.
- More than 15: a dropdown, ideally one the shopper can search or that groups values. Our guide to long option lists covers grouping and search.
Decision by option type
- Size: buttons, with a size chart link beside them. See how to add size options for the full setup.
- Color: swatches. A word like "Sage" means different things to different people; a chip doesn't.
- Pattern or print: image tiles. A solid color chip can't show plaid versus houndstooth.
- Material or package: radio buttons with a short description, such as "Premium cotton, heavier weight (+$4)".
- Quantity packs: buttons, such as "1", "3 pack" and "6 pack", with the per-unit price shown.
Setting it up in your theme
In Dawn and most Online Store 2.0 themes, open the theme editor, select the product page, click the Variant picker block and choose Pills or Dropdown. Many recent themes can also show color swatches for an option named Color, using colors set up in the admin. If your theme can't, our guide on swatches instead of dropdowns shows other ways to get there.
Theme settings usually apply one style to every option on the product. If you need buttons for Size and swatches for Color on the same product, check that your theme supports it per option before buying an app.
Personalization fields follow the same rules
The same patterns apply to fields a personalization app adds, such as font, thread color or ring size. PIMW Product Personalizer lets you show these as dropdowns, color or image swatches, or a font picker where each font is shown in its own style, with the live preview updating as the customer picks. A font list of 35+ choices works better as a visual picker than a plain dropdown of font names. For simple yes or no add-ons, such as "Gift wrap (+$4)", a checkbox or radio button option is clearer than a dropdown.
Mobile considerations
Most shoppers on a typical store browse on phones, so design for a thumb first:
- Make every tap target at least 44×44 px, with space between them so the shopper doesn't hit M when aiming for L.
- Let button rows wrap onto a second line instead of scrolling sideways.
- Show the selected value in words next to the option name, such as "Color: Sage", because a tiny chip is hard to confirm on a small screen.
- Keep the add-to-cart button close to the options, or use a sticky bar.
Our mobile variant picker guide goes into more detail.
Common mistakes
- Dropdowns for two or three values, which hides choices for no reason.
- Color names without swatches, such as "Heather Grey" versus "Charcoal Heather".
- Sold-out values that look identical to available ones.
- No default selection, or a default that is the most expensive option without saying so.
Frequently asked questions
Best UI for size selection on Shopify?
Buttons for up to about six sizes, such as S, M, L and XL, with a size chart link nearby. Use a dropdown for long lists like shoe sizes with halves.
Best UI for color selection?
Color swatches, because a chip shows the color better than a name. For products where color changes the look a lot, image swatches showing the product in each color work even better.
Best UI for material selection?
Radio buttons with a short description, or a dropdown if the list is long. Materials often need a line of explanation, which a chip can't give.
When to use image tiles as variant selector?
Use them for patterns, prints, wood grains and textures. A solid color chip can't show the difference between two patterns.
Radio button vs button group vs dropdown?
Radio buttons and button groups both show every choice; radios suit longer labels, buttons suit short ones. A dropdown hides choices until tapped, so save it for long lists.
How many variants before dropdown?
Switch to a dropdown when an option has more values than fit on two rows on a phone, usually around 10 to 15. Below that, buttons or swatches are easier to scan.
Mobile-optimized variant selector?
Use buttons and swatches with tap targets of at least 44×44 px, let rows wrap, and show the selected value in words. Test on a real phone.
Custom variant selector app?
Dawn and most modern themes cover buttons, dropdowns and color swatches. Consider an app or custom code only for searchable lists, per-option styles your theme lacks, or image tiles.
Related reading
Sources & further reading
Primary sources referenced in this article. We link to official platform documentation and standards bodies rather than secondary summaries so you can verify claims directly.
- Shopify Help Center: Product variants
- Shopify.dev: Product variant limits
- Shopify Help Center: Line item properties (customization)
Try it free on Shopify
PIMW Product Personalizer's permanent Free plan includes live preview, custom options, and Cart Transform pricing.
Install PIMW Product Personalizer