Color swatches

A comprehensive guide to adding color swatches to a product card.

Take the following steps:

1. In the theme editor (Customize), click Theme settings

2. Locate Color swatches

3. Make the necessary adjustments.

4. Save

This is the option for enabling or disabling color swatches across the entire website.

Settings	Description
Enable color swatches	Color selections are displayed in swatches on the product card, allowing you to swiftly select.
Color swatch activation	Define the color option name. Eg. Color, Colour, etc. The name you used for the variant color option name must be entered exactly as it was there.
Maximum number of swatches to show	You can set a limit on how many color swatches to display.
Swatch type	Color swatch (Default selected) Variant image (You can display a variant image instead of the color swatch )
Recently viewed product	You can also enable/disable color swatches for the recently viewed product section.

Color swatches for a specific section

For each section, color swatches can be enabled or disabled Following the screenshot -

Adding custom colors to swatches

Suppose you are using such color names. Names that are not supported as colors in browsers. Then you should follow the steps below -

Take the following steps:

1. In the theme editor (Customize), click on the Color swatches Section

2. Add Color item

3. Make the necessary adjustments.

4. Save

Video Tutorials