Heads up! We have a new documentation site and this article has been rewritten.

Check out the latest version of this article →

Facets and filters have a default look if you've implemented Tweakwise in your website using Javascript. An exception to this is the color filter, which offers a visual aid in addition to the text or title. While it's a widely used method to show both the title and the color swatch, you may want to just show color swatches in some situations. You can easily set this in the Tweakwise App.

In case you want color filters on your website to just have swatches instead of swatches and text, you only need to change one setting in the Tweakwise App. Please mind that this setting will be applied to all your filter templates after publication, and making exceptions based on templates is not possible at the moment.

Step 1: Editing the right setting in the Tweakwise App

Find your JS Implementation tab in the Tweakwise App and click Settings. The User Interface section contains the setting for the display of your color filter. This is set to the display that shows both the swatches and the titles by default. If you only want to show the color swatches, then select the second option and save the configuration. Your display will automatically change after publication.

If you chose the display of just the swatches, then it's good to know that we will show all available colors in the filter template by default. There will be no 'show more' or 'show less' button for this filter. The filter will show the selected options first in the list, just like with the default setting.

Step 2: Editing the look and feel (optional)

Color swatches are displayed as round, clickable buttons in the right color. When a color is selected as the active filter, then it will be shown with a black or white check, depending on the selected color. If you want to make changes to the look and feel of the default color swatch or the selected one, you can do this using custom CSS.

The DOM contains the title and the number of times that the color occurs in the results. If you do want to show titles under the color swatches, then you can do this with the following CSS line:

*[id^="twn-starter-"] .twn-facet-color-swatch__text {
   display: block;
}

If you want to show the number of results, then use the following CSS adjustment.

*[id^="twn-starter-"] .twn-facet-color-swatch__count {
   display: block;
}

A combination of elements is also supported. You can, of course, change fonts and text color using the same CSS classes.

Note: if certain colors in your filter aren't linked to the right color swatch, you may have to first define it in CSS. By default, we support ten different colors: red, green, blue, yellow, purple, black, white, brown, orange, and pink.

If you want to add a color, for example 'violet' to this list, then you need to place the following CSS class.

*[id^="twn-starter-"] .twn-facet-color-swatch__color.is-violet {
   background-color: violet;
}

The class name cannot contain any spaces. So if you're using bordeaux red, then spaces will automatically be removed. Various color value formats are supported. You could use a hexadecimal or rgb notation to indicate a color.

*[id^="twn-starter-"] .twn-facet-color-swatch__color.is-bordeauxrood {
   background-color: #45150D;
}