Product swatches

Group name

Purpose

General

Change the overall settings for the swatches in the collection and search page

• Show options with variant images instead of plain color* 
• Adjust the swatch option style (Square, Round, or Natural)
• Adjust the swatch option size.

Product card

Adjust the type of swatches (color, text, both, etc.), the option name, values and the number of swatches shown by default.

Filter

Adjust the swatches display on the filter.

🤔 How to customize color swatches in the collection/search page?

By default, the swatches are displayed in the collection/search page, on the product cards and filter as color swatches. 

Here are simple steps to customize them:

STEP 1: Select the Product swatches section

Go to Theme Editor > Theme Setting > Product Swatches section.

STEP 2: Customize the overall look of the swatches 

Click on the Product Swatches section, navigate on the setting panel:

• In the General setting group, choose a Swatch style and Swatch type.

STEP 3: Customize the swatches appearance on product card

Still in the Product Swatches setting panel, in the Product card setting group:

• Choose a Swatch type.
• If the Swatch type is Text, you can enter corresponding values in the Text option name and Text option values fields.
• Drag to adjust Swatches text and Swatches color shown by default (0-12).

STEP 4: Customize the swatches appearance on filter

Still in the Product Swatches setting panel, in the Filter setting group:

• Enable Display text next to swatches to show both the swatches and their title
• Choose the Visual value style to be Compact or Large

STEP 5:

Click “Save” when done.

🤔 How to replace color swatches with image variants?

STEP 1: Create individual products

Go to Admin Editor > Product > “Add product” to create new products.

You are now in the newly created product detail page.

STEP 2: Add images to the variants of the created product above

Still in product detail page:

• In the Variants setting group, select “Add options like size or color”.
• Select Color to add a color variant to the product. For example, a “Red” color variant.
• Add an image to the newly created color variant.

STEP 3: Replace the color swatches with image swatches

• Go to Theme Editor > Theme Setting > Product Swatches section, navigate on its setting panel.
• In the General setting group, enable Replace color options with variant images.

STEP 4:

Click “Save” when done.

Now, the ‘Red’ color swatches of the product created in Step 1 are replaced with the variant image added in Step 2.

🤔 How to customize the swatches in the Product information?

For details, go to this guide > part 5 Common Use Cases > 🤔 How to set up a block in the Product information section? > Variant picker.

🤔 How to customize the swatches in the Quick view?

For details, go to this guide > part 5 Common Use Cases > 🤔 How to set up a Quick view? > Variant picker.