Buttons for variant selection, not dropdowns

Open a product page with more than one size. If every size and its availability are visible without opening a control, the selector passes the first check. If the choices hide inside a dropdown, start here.

The decision: show size options as tappable buttons. Treat exposed controls as the default for other short option lists such as color or flavor when they remain easy to scan. Baymard's button recommendation and benchmark figures concern size, although its testing observed similar problems when color choices were hidden in dropdowns.¹

Why dropdowns hurt

The mechanism is straightforward: a dropdown collapses the choice behind a tap, so the shopper must open it before deciding, and a closed dropdown says nothing about stock. Baymard repeatedly observed shoppers overlooking size dropdowns or discovering too late that their preferred size was unavailable. In its 2021 top-93 ecommerce benchmark, 71% of desktop benchmark sites used buttons for size selection, up from 63% in 2017. Among benchmark sites selling many products with size variations, 28% still used dropdowns.¹ Adoption is context, not proof; the observed discovery problem carries the recommendation.

Check your store

Load your highest-traffic product with variants, on your phone, logged out. Can you see all options and their availability without opening anything? Does a sold-out variant look different before you tap it, or does it fail only at add to cart?

Implement it

1. Theme setting first. Check the product template for a button, pill, or swatch option before touching code. Available controls and labels vary by theme.
2. Wire availability honestly. With multi-option products (size and color, say), a variant is one specific combination. An option value can be unavailable given the other selections even though the value exists elsewhere. Good themes update option states as selections change and distinguish sold out from combination-does-not-exist. That distinction is theme behavior, not something Shopify handles for you, so if your theme marks everything simply "available," fixing it is theme modification, not a setting.
3. Never auto-select a sold-out default. The page should not load with a dead add to cart.
4. Sync the rest of the buy box. Price, image, and the button state should change the moment an option is tapped.

When a large option set makes the selector hard to scan, group sizes by type or use another structured selector while keeping the useful choices exposed. Liquid returns at most 250 variants unpaginated, so extremely high-variant products need their own selector design regardless.²

Measure: product page to add-to-cart rate, segmented by device. Guardrail: sold-out errors surfacing at cart. Interpretation limit: this rate moves for many reasons, so treat a change as directional unless you tested it properly.

Mobile: a native dropdown opens an OS-level control that covers part of your page, and the exact behavior varies by device and OS version. Buttons stay in the page flow. Keep tap targets comfortably large.
Accessibility: use real buttons or radio inputs with labels and visible selected state, not color alone. Keyboard and screen-reader selection must work.

Evidence and further reading

1. [1]"Always Use 'Buttons' for Size Selection (28% of Desktop Sites Don't)," Baymard Institute, published Feb 9, 2021, https://baymard.com/blog/use-buttons-for-size-selection. Supports the observed problems with hidden size choices, similar problems with color selectors, and the 71%, 63%, and 28% size-selection figures within Baymard's top-93 ecommerce benchmark. Accessed Aug 21, 2026.
2. [2]"product" object, Shopify Liquid documentation, https://shopify.dev/docs/api/liquid/objects/product. Supports the 250-variant unpaginated render limit and the definition of variant availability. The sold-out versus nonexistent-combination distinction discussed above is theme-level behavior, not documented platform behavior. Accessed Aug 21, 2026.