Configure on Product & Collections Page

Let’s understand the pre-defined swatch style configuration step-by-step for the Product page and Collection page:

• On the product page, by default, the Button swatch is enabled.

• On the collections page, you need to activate the toggle to enable the swatch functionality.

1. Swatch Configurations - Product & Collections

• Product - Click on default and choose a swatch style (Circular, Square, etc.)

• Collections - Click on default and choose a swatch style (Circular, Square, etc.)

2. Select Swatch Type

Select the Type - Variant Image or Custom Color, or Image (available for both Product and Collection options)

• Select the Variant Image option to display the default Variant image on swatches.

• Select Custom Color/Image to display custom color/image on swatches.

3. Preview option

You can open the product directly from the app to check the implemented configurations.

4. Visibility

• Product Page

• Collection Page

To customize the Product or Collection swatches, go to Swatch Styles and customize the styles according to your requirements.

Swatch styles