How to setup variants on your product page

Step 1: Select the Variant Picker #

• Navigate to your product page settings and locate the variant picker section to begin configuring how customers will select product options.

Step 2: Choose Your Variant Picker Type #

You have two main options for displaying variants:

• Dropdown: A traditional dropdown list that saves space but requires customers to click to see options.
• Button: Individual buttons for each variant option. Note: If you want to use color swatches, the variant picker type must be set to ‘Button’.

Dropdown:

Button:

Step 3: Enable Color Swatches #

Step 4: Select Your Swatch Type #

Choose from three different swatch display options:

• Variant Image: Shows actual product photos for each variant, giving customers the most accurate preview of their selection.
• Color Swatch: Displays solid color blocks representing each available color option.
• Native Swatches: Uses Shopify’s built-in swatch system for a standardized appearance across your store.

Variant image:

Color Swatch:

Native swatches:

Step 5: Customize Color Option Style #

Fine-tune the visual appearance of your color options to match your store’s overall design aesthetic.

This setup creates an intuitive product selection experience that helps customers easily identify and choose their preferred variant options.

Step 6: Color option style and Sizes #

Swatch shape:

• Circle
• Square

Swatch size:

• Small
• Medium
• Large