Set a colour for each value

How automatic mapping works

Every time it reads your catalog, the app looks at each value that has no colour yet and tries two sources, in this order:

1. The swatch you set in Shopify. If you gave the value a colour or an image in Shopify's own option settings, the app uses it.
2. A built-in colour dictionary. Common colour names such as Black, Navy or Sage are matched to a colour automatically.

Whatever is still unknown stays empty for you to set. The app never overwrites a colour you chose yourself.

Open an option's values

1. 1

   Open Options and click Edit

   In Options, click Edit on the option's row. The Values page lists one row per value, 25 per page.

2. 2

   Find the values that need attention

   The badges at the top show how many values are set and how many are missing. Tick Show missing only to hide everything that's done, or search for a value by name.

   

Set a colour

1. 1

   Click Colour

   On the value's row, click Colour. The Choose colour window opens.

2. 2

   Pick one colour or two

   Choose One colour for a plain colour, or Two colours for values like Black / White, which show as a chip split in half.

   

3. 3

   Enter the colour

   Use the colour picker, or type a hex code such as #1A1A1A in Color 1 (and Color 2). The preview updates as you type.

4. 4

   Apply, then save

   Click Apply. Repeat for any other values, then click Save in the save bar to publish them all at once.

   Important

   Applied colours are a draft until you click Save. Leaving the page asks you to confirm before your changes are discarded.

Change how two colours are split

Two-colour chips are split diagonally by default. To split them horizontally or vertically, edit the style the option uses and change Color split direction. See Size, shape and layout.

Remove a colour

Click the small × next to the colour preview on the value's row, then Save. The value goes back to missing.

Where a colour is used

• A colour belongs to the value within its option: Red in Color is set once and used on every product that has Color: Red.
• Colours show in Color swatch, Swatch in pill and Dropdown with swatches, and as the fallback in Image swatch, Variant image and Polaroid when no image or variant photo is available.
• Buttons and plain dropdowns show text, so a colour is saved but not visible there.
• A value with nothing set shows as an empty chip, with its name on hover, so shoppers can still pick it.
• A value can hold a colour and an image. The option's style decides which one is drawn, and the other is used when the first is missing.

Troubleshooting

• You clicked Save after applying colours.
• The option's style draws colours, or has no image to prefer over them (see the list above).
• The option's Swatch image isn't set to Variant photo, which uses product photos instead of your colours.
• If you just renamed or added a value in Shopify, click Sync catalog at the top of the Values page so it appears here.