Color swatches

A guide to customizing Color swatches for your store’s products, helping you showcase variants more visually and improve the shopping experience.

Setting	Description
Hide sold out variants	Hide swatches for color variants that are out of stock.
Color shape	Select the shape of the color swatch: Choose either round or square.

Swatch type

Choose how to display product variants:

• Variant image – Displays the image assigned to each variant as the swatch.

• Color – Displays a solid color swatch or a custom image based on the selected color option and any custom colors you define.

Variant image

Color

Color swatch trigger

Enter the exact option name(s) for the variant type you want to display as color swatches (e.g., “Color,Colour,Cor").

If you have multiple option names, separate each with a comma. The names must match your product variant option names exactly. If left blank, the default option name “Color” will be used.

When the color swatch trigger has been set:

When no color swatch trigger is defined, or the defined trigger does not match any of your variant options:

Custom colors

Define a custom value for your color variants by listing them with either a hex color code or an image name. Use the format:

• Hex color code → Sunlit Bronze:#4b2f27

• Image name → Sunlit Bronze:sunlit-bronze.png

Separate multiple entries with commas, and make sure each color name matches your product variant name exactly. Ensure any referenced images are uploaded to your store’s files beforehand.

For example: You upload an image named cosmetic_products_29_7.jpg and assign it to the Black Cherry color. After this, even if the swatch type is set to Color, the Black Cherry option will still display using the cosmetic_products_29_7.jpg image.