Color swatches

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

📘

The color facet works similarly to the standard Checkbox type, however, the checkboxes are hidden by default. If you want to show them next to the color glyph, you have to override the display setting on the twn-facet-collection__right class. Note: this is not available with color swatches.

By default, the following colors are supported:
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:

• 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 .twn-facet-collection__gyph.is-beige {
  background-color: #F5F5DC;
}
</style>

💡

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