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

Last updated

Was this helpful?