Old way to add color swatches to product
Add 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.
Admin/Product detail page
To add option values for color swatches, go to admin panel of the store and select the page of the certain product. Then in variants, add variant “Color”, and after it's option values (different colors of product) and click Save.
To preview color swatches on a Product Detail Page (PDP) in customizer, follow these steps:
1) In the 'Product information' template of Product detail page, find the 'Variant Picker' block;
2) In the 'Variant picker' block, choose type Pills to see color swatches on the page.
In Theme settings 'Color Swatches' tab, select “Enable color swatches”
In Theme settings 'Color Swatches' tab, you can also 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.
