Swatch styles
Customize and add styling to pre-defined templates and change the swatch position on the page.
Last updated
Customize and add styling to pre-defined templates and change the swatch position on the page.
Last updated
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.
For the Product page - you can explore the pre-defined templates and click on add to add them to options for the product page.
For the Collection page - you can explore the pre-defined templates and click on add to add them to 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
