The variant picker is the part of the product page where a shopper chooses size, color or material. On a laptop with a mouse, almost any layout works. On a phone held in one hand, small buttons, crowded rows and dropdowns that open off-screen turn a simple choice into a fight.
If you are new to how Shopify themes render variants in the first place, start with our guide to the Shopify variant picker and come back here.
Tap target sizing
Every swatch, size button and dropdown should be big enough to hit with a thumb. Apple's guidelines recommend at least 44 by 44 points, and Google's Material guidelines recommend 48 by 48 density-independent pixels. In practice, aim for about 44 to 48 CSS pixels with at least 8 pixels of space between targets.
Most Online Store 2.0 themes let you choose between "pills" (buttons) and dropdowns for each option in the theme editor. Pills are usually easier to tap for short lists such as sizes S to XL. If your swatches render at 28 pixels, a few lines of custom CSS in the theme can enlarge them.
Bottom sheet variant picker
For products with many choices, a bottom sheet works well: a panel that slides up from the bottom of the screen with all options inside, scrollable, with a clear "Done" or "Add to cart" button at the bottom. The shopper stays on the page and does not lose sight of the product.
A bottom sheet usually needs a theme customization or an app. It is worth the effort for complex products with three options and long value lists. For a T-shirt with five sizes and four colors, inline buttons are simpler and better.
Swipe for image variants
If you sell a product in 15 colors, do not squeeze 15 tiny swatches into a single row. Let the swatch row scroll sideways, or wrap it onto two lines with larger swatches. Link each color to its own variant image so the main photo changes when the shopper picks a color. Our guide to swatches instead of dropdowns covers when swatches are worth it.
Native OS pickers
A standard HTML dropdown opens the phone's own picker: a scroll wheel on iPhone and a list on Android. Shoppers already know how to use it, and it handles long lists well. Custom-styled dropdowns can look nicer but often break on small screens. If you use a dropdown at all on mobile, the native one is usually the safer choice.
What to use when
| Option type | Number of values | Best mobile control |
|---|---|---|
| Size (S to XXL) | 3 to 7 | Pill buttons |
| Color | 2 to 12 | Color swatches, wrapped or scrolling |
| Shoe size in half sizes | 15 or more | Native dropdown |
| Font or design style | 4 to 10 | Image swatches |
| Long lists (teams, schools) | 30 or more | Searchable list or bottom sheet |
For lists with dozens or hundreds of values, see our guide to long option lists UX.
Personalization fields on mobile
If the product also has a name field or photo upload, the keyboard covers half the screen as soon as the shopper starts typing. Keep the live preview visible above the field, label each field clearly ("Name on the front, up to 12 letters") and show a character counter. Print It My Way's live preview updates on the product image as the customer types, which keeps the result in view on a small screen. We look at where personalizers tend to struggle on phones in our article on personalizer mobile UX.
Testing checklist
- Open the product on a small iPhone and a mid-range Android phone, not only in desktop browser dev tools.
- Pick every option with your thumb, one-handed.
- Check that the price and main image update after each choice.
- Check that sold-out combinations are clearly marked, not silently unselectable.
- Add to cart and confirm the cart shows the right variant.
Frequently asked questions
Best mobile UX for Shopify variant picker?
Use large tap targets of about 44 to 48 pixels, pill buttons for short lists, swatches for colors and the native dropdown for long lists. Use a bottom sheet only for complex products with many values.
How to make Shopify variant picker touch-friendly?
Switch short options to pill buttons in the theme editor and enlarge small swatches with CSS. Leave at least 8 pixels between targets, then test on real phones.
Should variant picker be bottom sheet on mobile?
Only for products with several options and long value lists. For a simple size and color choice, inline buttons are faster and need no extra code.
How to test variant picker on mobile?
Use real devices, ideally a small iPhone and a mid-range Android phone. Desktop browser emulation does not show how a thumb actually hits small targets.
Does mobile variant picker affect conversion?
It can. If shoppers struggle to pick a size or color on their phone, some give up before adding to cart. Compare your mobile and desktop add-to-cart rates in Shopify Analytics to see whether mobile is lagging.
Best variant picker theme for mobile?
Dawn and the other free Online Store 2.0 themes from Shopify, such as Refresh, Sense, Studio and Trade, all offer mobile-friendly pill and swatch pickers. Test your own products in the theme preview before switching.
How to handle long option lists on mobile?
Use a native dropdown, a searchable list or a bottom sheet with search. Avoid long rows of tiny buttons squeezed into the page.
Mobile keyboard for variant option input?
Variant selection uses buttons or pickers, so the keyboard does not appear. It only matters for personalization text fields, where you should keep the preview visible while the customer types.
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