Color Swatches

Color swatches are colorful buttons that can be placed on a product page. They replace the traditional drop-down menu or pills and allow customers to ‘click’ on the color button to see different colors of product. 

You can add color swatches to the product on Product detail page in Customizer of theme.

For this:

1) In theme settings mark the checkbox 'Enable color swatches';

2) In the 'Product information' template of Product detail page find the 'Variant Picker' block;

3) In the 'Variant picker' block choose type Pills to see color swatches on the page.

*To use this feature, you must have variants of product colors. To add more options for color swatches go to admin panel of the store and choose the page of the needed product. Then in options add a new variant and click Save.

In Theme settings 'Color Swatches' tab you can set different shades for colors. Check settings below this screenshot. 

Swatch option name

In this field, you have the flexibility to replace “color” with various alternatives such as "colour", “palette”, “hue”, “shade”, “tint”, or “tone”, or even write it in another language of your choice.

To ensure functionality, the name in the field must match the name displayed on the product detail page within the variants section. You have the option to edit and add the desired name. The chosen name should remain consistent across all product detail pages within the variants section.

Color swatches rules 

You can change standard colors for color swatches. Set up the color of your product by typing the correct format. 

Explanation: Format: <Color option>: <value>(separated by lines). The color name must match the variant color option name. Example: Rose Gold: #b76e79 .

Color picker

Click on the "Color picker" circle to choose different color shades, for example, shades of red or black colors. Then copy the color number and put it into "Color swatches rules" in the correct format.