Color swatches transform standard text-based facets into visual selection tools. Instead of a list of color names, you can display actual color codes or small image tiles (e.g., for patterns or textures), significantly improving the visual appeal and usability of your navigation.

Implementation

Implementing swatches involves mapping your attribute values to visual assets (hex codes or image URLs) within the Tweakwise App and rendering them in your frontend.

1. Configuration in Tweakwise App

To enable a slider for an attribute:

• Go to the filtertemplate you want to contain the slider.
• Select or add the attribute (e.g., "Color").
• Set the Selection type to Color.

2. Handling the API Response

When an attribute is configured for swatches, the Tweakwise Delivery API includes additional metadata in the facetsettings of the facet: Selectiontype is set to color.

Note: the response does not return extra attributes to implement color swatches in your storefront.

{
  "facets": [
    {
      "facetsettings": {
        "title": "Color",
        "selectiontype": "color",
        //..
      },
      "attributes": [
        {
          "title": "Black",
          "nrofresults": "3806"
        },
        ...
      ]
    }
  ]
}

<navigation>
  <facets>
    <facet>
      <facetsettings>
        ...
        <title>Color</title>
        <selectiontype>color</selectiontype>
        ...
      </facetsettings>
      <attributes>
        <attribute>
          <title>Black</title>
          <nrofresults>3806</nrofresults>
          ...
        </attribute>
      </attributes>
      ...
    </facet>
  </facets>
  ...
</navigation>

3. Rendering in Frontend

The title attribute can be mapped to a css color. That color can be used to display the filter in your desired way.

See Color swatches how this is implemented in Tweakwise JS.