Set color HEX code for each value

Use color hex as swatch, you can setup up to 2 color codes for the same variant option value.

Guide

Step 1. Choose variant(s) to be displayed as Swatch style

• Go to the Options section

• Select your product variations to display as swatches

  

Step 2. Change display style to swatch

List of styles that support HEX code:

✅ Swatch

✅ Pill swatch

✅ Custom swatch with price

✅ Swatch dropdown

Swatch

Pill swatch

Custom swatch with price

Swatch dropdown

• From the Display as dropdown, choose Swatch style.

• Click Save button to save the changes.

Step 3. Set HEX code for each color value

• Click the Set Swatches button

• In the configuration page, you can setup HEX code for value.

• If you use 2 colors, you need to tick the checkbox next to color 2

• Save and preview the changes on the frontstore.

Result:

Demo