Styling image swatches

The different topics below allow you to change the styling of the image swatches. This is done through custom CSS code snippets you can safely add to your site. You can read here how this is done.

Changing the “selected” border color

By default, when a user selects an image swatch, the selected image swatch looks like this:

selected image swatch example

Notice the dark border color around the selected swatch “Turquoise”. If you want to change that border to a different color, you can do so with this small CSS snippet:

Supply your license key to unlock the code

Since this is a custom-coded snippet, please enter your license key so we can verify your purchase.

Change #00ff00 above to the color code of your choice.

Rounded image swatches

By default, image swatches are square, but with a CSS code snippet you can make them round like this:

Round image swatches

Supply your license key to unlock the code

Since this is a custom-coded snippet, please enter your license key so we can verify your purchase.

You can change #353c4e in the snippet above to your desired color.

Was this article helpful?

Related Articles