Color swatches

When selectiontype is set to color, our Frontend API 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>

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.