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 6: 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

• Round
• Square