The variant picker is the set of buttons, dropdowns or swatches on a product page that lets a shopper choose Size, Color or Material. When they pick, the theme finds the matching variant, updates the price, image and stock message, and sets which variant goes into the cart. Your theme controls how it looks; your options and variants control what it shows.
This guide explains how the picker works in Dawn and other Shopify themes, how to choose between buttons, dropdowns and swatches, and where personalization fields fit alongside it.
How the picker works
Every product has up to three options, and every combination of option values is a variant. The picker shows one control per option. When the shopper changes a value, the theme looks up the variant that matches all the selected values and then:
- updates the price (and compare-at price, if any),
- switches to the variant's image, if it has one,
- shows whether that variant is in stock,
- changes the page URL to include
?variant=and the variant ID, - sets the variant that the Add to cart button will add.
If a combination doesn't exist (say, you never created "XL / Pink"), the theme shows it as unavailable. Our options vs variants explainer covers how options turn into variants.
Default picker behavior
Dawn renders each option as a row of buttons (pills) by default, and you can switch to dropdowns in the theme editor under the variant picker block. Older themes such as Debut use dropdowns. Both are built on the same Liquid loop, {% for option in product.options_with_values %}, so the data is identical; only the display changes.
When the page loads, most themes preselect the first available variant. That means the order of your option values decides what shoppers see first. If the wrong size is preselected, fix the order as shown in our guide to reordering variants.
Buttons vs dropdown
| Picker style | Works best for | Example |
|---|---|---|
| Buttons (pills) | 2 to 8 short values | S, M, L, XL |
| Dropdown | Long lists or long labels | Shoe sizes 5 to 13 in half sizes (17 values) |
| Color swatches | Colors, patterns, finishes | Black, Navy, Heather Grey |
| Image swatches | Materials or prints that are hard to name | Walnut, Maple, Cherry wood |
Buttons let shoppers see every choice at once, which is why they're the default for sizes. Dropdowns hide choices behind a tap, so use them only when the list is too long for buttons. For really long lists, our notes on long option lists suggest other layouts.
Color swatches
Recent versions of Dawn can show color swatches when your Color option is linked to Shopify's color values (the category metafield for color). Each value then has a real color or pattern image, and the theme draws a chip instead of a text label. Older themes need a code change or an app.
Swatches work best when every color variant also has its own image, so the gallery changes as the shopper taps. See our variant images guide for setting that up.
Sold-out state
Show sold-out variants crossed out or faded rather than hiding them. The shopper knows the color exists and can check back. Dawn already marks unavailable combinations; our guide to hiding or crossing out sold-out variants covers the options and when hiding is the better choice.
The picker and personalization fields
The variant picker handles choices that change the physical item: size, color, material. Choices that only change what gets printed or engraved, such as a name, a font or an uploaded photo, work better as personalization fields below the picker. They don't create variants, so they don't hit the three-option limit.
A typical personalized tumbler page looks like this: Color as swatches in the variant picker, then a Print It My Way text field labelled "Name (up to 12 characters)", a font picker, and a live preview on the product image. The variant picker sets which tumbler is shipped; the fields tell you what to print on it. Both show up on the order.
Frequently asked questions
How to change variant picker from dropdown to buttons?
In Dawn and similar themes, open the theme editor, select the variant picker block on the product template and choose the pills or dropdown style. Older themes need a code change that replaces the select element with a fieldset of radio buttons.
Best variant picker for size selection?
Buttons for up to about eight sizes, because shoppers see every option at once. Use a dropdown for long lists such as shoe sizes in half steps.
How to add color swatches to variant picker?
Link your Color option to Shopify's color values so each value has a real color, as explained in our color swatch setup guide. Recent versions of Dawn then show chips automatically; older themes need code or an app.
Should sold-out variants be hidden or disabled?
Usually disabled with a strikethrough. Hiding a value makes shoppers think you never stocked it, so hide only discontinued items.
Can I customize variant picker without an app?
Yes. Most current themes let you change the picker style in the theme editor, and anything beyond that can be done in theme code.
Is variant picker mobile-friendly?
It depends on the theme. Dawn uses large tap targets, but older themes can render small buttons or cramped dropdowns, so test on a real phone.
How to add variant picker to custom section?
Add the theme's variant picker or product form block to the section if it supports blocks. Otherwise, replicate the options Liquid loop in your custom section and connect it to the product form.
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
Print It My Way's permanent Free plan includes live preview, custom options, and Cart Transform pricing.
Install Print It My Way