Variant selector
Product pages
Last updated
Product pages
Last updated
On product pages, the Variant selector allows customers to choose the product options they want.
Click the variant selector block to edit the settings. Use the drag handle to move the selector on the page.
To add and edit variants for products with multiple options (e.g. colors, sizes) go to Products in the Shopify admin. Learn more in Shopify's variant options guide ↗.
The selector can display variants as either a dropdown list, chips (buttons), or color swatches.
The 'unavailable' swatch and chip style is used for variants with an inventory of 0. Learn more about Tracking inventory ↗ on Shopify.
Click Variant selector block to find settings
| Setting | Description | Options |
|---|---|---|
By default, all product options named "Color" will display swatches. To change which product options should use swatches, add or remove the option names in Variant options for swatches in Theme settings > Products.
Required Set up colors for swatches using custom colors or uploaded images. After setting up, you can choose to display swatches in product listings and collection filters.
Go to Theme settings > Swatches to change the size of swatches on product pages.
| Setting | Description | Options |
|---|---|---|
Selector style
Display the variant selector as chips (buttons) or a dropdown menu.
Chips Default Dropdown
Chip layout
Choose the number of columns for the variant chips. Select Natural to display a layout that adapts to the natural length of the chips.
4 column grid 3 column grid 2 column grid Natural
Bottom padding
Add spacing below the variant selector.
1 - 50px
Default: 36px
Swatch size
Choose the size of swatches on product pages.
Small Medium
Large X-Large
Variant option popup
Add a popup link for product guides.