Color swatches

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

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

Next:

For example, for the color Beige it would be:

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

📘

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