Websites · 1 min read
Product Selector Styles on the Product Details Page
Product selector styles control how shoppers pick variants and price options on your store's product details page.
| Style | How it looks | | --- | --- | | Dropdown | Options inside a compact menu. | | Pills | Options as buttons right on the page. |
Existing stores keep using Dropdown until you change it.
What the style affects
| Control | How it works | | --- | --- | | Variants | Show as a dropdown or pills. | | Multi-price options | Follow the same style as variants. | | Quantity | You can change its colors when Pills is on. | | Upsell choices | Use the matching style for a consistent look. |
Which to use
Dropdown works well for:
- Products with lots of options
- Compact product pages
- A classic shopping experience
Pills work well for:
- Products with only a few options
- A more visual look where shoppers see every choice at once
- Custom colors for selected and unselected options
With Pills, shoppers pick one option in each variant group.
Set the style
- Open your store in the store builder.
- Edit the Product Details Page.
- Click the Product Details element.
- In its General settings, find Variants styling.
- Choose Dropdown or Pills.
- Preview the page and check variants, price options, and quantity.
- Save and publish.