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 Product and Collection sections. 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 the 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 the swatch configuration options for the collections page
Also, you can customize the product card on the collections page.
Last updated