Setting up Faceted Search Page Filters on Other / Custom Platforms

Clerk.js comes with built in support for Faceted Search.

Any product attributes you send to us can be used as part of the Faceted Search.

Let’s start with a quick example:

<div id="clerk-search-filters"></div>
<div id="clerk-search-results"></div>

<span
  class="clerk"

  data-template="@search-page"
  data-query="shoes"
  data-offset="0"

  data-target="#clerk-search-results"

  data-facets-target="#clerk-search-filters"
  data-facets-attributes='["categories","manufacturer","gender"]'
  data-facets-multiselect-attributes='["categories","manufacturer"]'
  data-facets-titles='{"categories":"Categories","manufacturer":"Brand","gender":"Sex"}'>
</span>

The data-facets- parts allow you to enable and customise the Faceted Search.

By adding these to your Search embedcode, facets will be displayed as soon as results are shown.

Below, you can see what each a part does:

Styling Facets

Facets comes with a simple styling out of the box. To alter this, simply use these CSS selectors, to add any custom styling: