How to - Extend color swatches

Tweakwise JS supports all types of filters you can configure in the Tweakwise App, including color facet / swatches .

By default, the following colors are supported:

Black
Blue
Brown
Green
Grey
Orange
Pink
Purple
Red
White
Yellow

It is possible to override the colors that are shown and/or to add new ones. To override or to add a new color, add the following snippet to your HTML:

<style>
.twn-facet-collection__glyph.is-red {
  background-color: #FF0000;
}
</style>

replace the .is-red CSS class selector with the name of the color you want to add or change.
replace the #FF0000 color value with the color you want to use. This value needs to be a valid CSS color data type.

For example, for the color Beige it would be:

<style>
.twn-facet-collection__glyph.is-beige {
  background-color: #F5F5DC;
}
</style>

💡
Need help finding the right color value? Check out this color picker.