Swatch styles

Customize and add styling to pre-defined templates and change the swatch position on the page.

In the Swatch Style, you can explore the following features:

• It has two sections - Product Page - Collection Pages

• Pre-defined Templates – Template Library

• Swatch Style Editor – My Templates

• Product Card Customization – for the Collections page

Swatch styles for Product and Collection Pages – You can configure swatch templates for both Product and Collection pages.

Template library – This option is available in both the Products and Collections section. In this option, you can choose a template style from pre-defined templates and add it to the My Templates section.

My Templates – In this option, you can edit and modify the swatch styles according to your requirements. In the swatch editor, you can change the size, border, label, layout etc. Also, you can add the custom CSS for swatch customization.

Product Card Customization – This option is available only for the Collections page. You can customize the swatches alignment, Add-To-Cart, Compare at Price etc. options on the collections page.

The process of customizing swatches in both sections is similar and easy to use.

1. Pre-defined Templates

• For the Product page - you can explore the pre-defined templates and click on add to add them to swatch configuration options for the product page.

• For the Collection page - you can explore the pre-defined templates and click on add to add them to swatch configuration options for the collections page

If you encounter any difficulty in configuring a new style or changing the position of the swatch on the page, please feel free to contact us at [e-mail]