Product page – Color Swatch

You might notice some of our products in the demos has the color swatch

To be able to achieve this, there is some settings need to me configured first

  1. Go to theme settings > Product settings

There are 2 special product option styles, Color Swatch style & Button Style. The original option is drop down list

In product settings, Enter variant using color swatch style which exactly the same with your product option, this will make your option became Color Swatch style

Enter variant using button style which exactly the same with your product option, this will make your option became button style

CUSTOM COLOR SWATCH

Sometimes, your color is not supported by the browser and it can not render the correct color. Or you need to add your own color pattern, you will need to create your custom color swatch

In the section settings, you will see this section right under the footer settings

Add new color by clicking on [+ Add custom color swatch] button

Enter the color name which should be matched with your custom product color option

Select color or upload your own color image pattern then everything will work for you!

Was this helpful to you?