Add a Custom Color Name and Value

This section explains how to add a custom color name and assign your own color value to it.

It is helpful when the default color options do not match your brand style or product variations. By configuring the Color swatch settings in the theme editor, you can display your own named colors on product cards, in filters, and on product pages, ensuring a consistent visual experience across your store.

---

Adding custom Color/Image with a custom name

• Open your Shopify Admin and configure the product variant options as usual.

• In the Theme Editor, go to Theme settings → Color swatch. For detailed reference, see the documentation chapter: https://wokiee.gitbook.io/docs/theme-settings/color-swatch

• In the Option name(s) field, enter the exact variant option name used in the Shopify product admin. For example: Custom option name

If multiple option names are used, separate them with commas.

• In the Colors configuration field, list all custom color names along with their assigned color values. Each entry should follow the pattern Name: value and be separated by commas.

For example:

Black-white:red,
Some kind of blue:blue,
Color custom:green,

You can also review the formatting rules shown directly below this field.

• In the Swatch mode field, select how your swatches should be displayed. You can choose: Default, Flat color, or Variant’s image.

Flat color

To display your custom colors, choose Flat color.

Variant's image

Default