For the complete documentation index, see llms.txt. This page is also available as Markdown.

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)

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

Last updated