Variant selector
Product pages
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 ↗.
Variant selector style
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 |
|---|---|---|
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 |
Swatches
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.
Change swatch size
Go to Theme settings > Swatches to change the size of swatches on product pages.
| Setting | Description | Options |
|---|---|---|
Swatch size | Choose the size of swatches on product pages. | Small Medium Large X-Large |
Variant popup (product guide)
Variant option popup
Add a popup link for product guides.
Last updated