No. Dropdown remains the default variant display for existing stores, and existing stores do not automatically switch to Pills. Choose Pills in Variants styling to change the display.
Customize product selector styles on the product details page
Switch how product options display on the Product Details Page by choosing Dropdown or Pills in the Product Element's Variants styling setting in the Store Builder. Dropdown shows options in a compact selector and remains the default for existing stores; Pills shows options as selectable button-style choices directly on the page.
Dropdown vs Pills
Pick the style that fits how many options a product has and how you want customers to select them.
Dropdown shows product options inside a compact dropdown. Use it when a product has many variant options, when you want a compact layout, or when you prefer traditional selection behavior. Existing stores keep this as the default.
Pills shows product options as selectable button-style choices directly on the page. Use it when a product has fewer variant options, when you want a more visual selection, or when you want options to be easier to discover. Pills support customizable selected and unselected color states.
Pills display all variant options visually and allow a single selection per variant group. Multi-price selectors follow the same Dropdown or Pills styling, and the behavior applies across desktop and mobile storefront experiences.
Configure the selector style
Set the style for your store from the Product Details Page in the Store Builder. Your products need pricing and variants configured first; see Create and sell products for the full product setup.
Open the Store Builder.
Edit the Product Details Page.
Select the Product Element.
In the general settings panel, locate Variants styling.
Choose Dropdown or Pills.
Review the Product Details Page in Builder Preview.
Save and publish the changes.
The selector behavior is reflected in both the Page Builder and Builder Preview. Existing stores do not switch to Pills automatically; Dropdown stays their default until you change this setting.
Selecting a variant automatically selects the image assigned to that variant when one is available. If the selected variant has no assigned image, the currently displayed image remains, and selecting a product image never changes the selected variant.
Products and their variants are created from Payments > Products before they appear in the store; see Set up an ecommerce online store for the full workflow. To mark products on the product list and product details pages, see Add product labels and ribbons.
Frequently asked questions
Do existing stores switch to Pills automatically?
Can I customize the quantity colors?
Quantity color customization is available only when Pills is selected.
Do multi-price selectors follow the same style?
Yes. Multi-price selectors follow the same Dropdown or Pills styling you choose.
Does the style apply on mobile?
Yes. The selector behavior applies across desktop and mobile storefront experiences.
What happens to the product image when I select a variant?
Selecting a variant automatically selects the image assigned to that variant when one is available. If the selected variant has no assigned image, the currently displayed image remains, and selecting a product image does not change the selected variant.
Was this helpful?
Was this helpful?