The color swatches can be enabled and shown on all product cards and in the product page itself.
The settings are as follows.
This should be the name of the option like
Materialetc. where you want to show swatches. The value in the field should match the option name taken from Shopify's admin page:
If you want to show the swatches for your
Coloroption - then in this field you should enter
Color. If you want the swatches to be shown for
Materialin this field.
Updated: you can now have swatches for more than one variant group. For example you can have swatches for both
Materialby just listing them both in the field separated with comma
By default, the browser converts the color names to HTML hex codes. So if you add a color value like
Blueyou'll automatically see the browser interpretation for these colors like pure red and pure blue colors.
However, If you want to use custom hex color codes OR images, and custom color names, you can add them by assigning them with pairs of color name and hex code or image name. Then, once these names are used in the products colors - you'll see them in the swatches.
To do so - list the pairs in the given textarea with the following format:
ColorName=swatch.png. Each entry should be on a new line. Example:
Example with more entries:
This field is used to tell the theme which variant option is actually used for the sizes. Based on that field additional settings will be available like showing size chart and picking the variants style like buttons/dropdowns.
The value here should match the size option name from Shopify's admin page: