The JS Implementation supports all types of filters you can configure in the Tweakwise App. One of which is the color filter. This type of filter has a color swatch giving a visual representation of the color that can be selected.

By default the color filter supports the following colors: Black, Blue, Brown, Green, Grey, Orange, Pink, Purple, Red, White and Yellow. However, 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 .twn-facet-collection__gyph.is-red {
  background-color: #FF0000;
}
</style>

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

📘

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

Example

If you want to add the color Beige your JS Implementation. The HTML snippet you need to add could look like this:

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