Color swatches

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

You can add color swatches to the product on the Product detail page in the Customizer of the theme. For this, on the Product detail page choose the “Product information” section and click on the “Variant picker” block, then select the type “Dropdown” and mark the checkbox “Enable type Button for variant Color” (if dropdown is selected), save your changes.

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

In Theme settings find “Color Swatches” to select different color shades. Check the settings below this screenshot. 

1. Enable color swatches (mark checkbox)

To change the standard color for color swatches, mark this checkbox.

2. “Color swatches” rules 

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.

3. Color variant 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.

4. Color picker

Click on the “Color picker” circle to choose different color shades. For example, you can use different shades of red or black colors. Then copy the color number and put it into “Color swatches rules” in the correct format.