Variant selector

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.