Custom color variant

1 - Step 1

Go to Product Setting of a product > Add more some Color variants

2 - Step 2

You must go to Product Page settings to set up the Product option names to be displayed as Color style

This is how the Option names: Color display before configuration

* Eg) The Option names as you see are Black, Blue, Pink, Olive in order. You want to change the default appearance of this Blue, Pink, Olive . The Blue should be darker, Pink should be brighter

3 - Step 3

Go to Section > Custom color variation > Add choose color

  • I want to change the variant Blue darker

  • Eg) I want to change the variant Pink brighter

Result:

4 - Select color 2 (optional)

  • Eg) If these variants have 2 colors each, you can add 2 colors

  • Set up for Blue and Pink variants

Result:

5 - Show image?

  • Eg) If these color variants have abnormal color, you can add image

Result:

6 - Show as Product images style not Swatch color style

Go to Product page > Swatch image variant

Result:

6.1 - Swatch image variant

6.2 - Swatch crop image variant

6.3 - Swatch color

Eg) If you want to change the shape of the variant such as Square, Circle, Drop-down

Go to Product Page > Style for option

Result:

6.4 - Combo box

6.5 - Combo box with out variant

6.6 - Square

6.7 - Circle

6.8 - Radio button

6.9 - Radio button inline

From The4

Hope you success!!