Adding Facets to your BigCommerce Search Page

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

Any product attributes you send to Clerk.io 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"}'
  data-facets-design='12234'>
</span>

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

By adding these to your Search Page embed code, 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 CSS selectors (more about facet styling here, to add any custom styling.

Adding Facets to your BigCommerce Store

To add facets to your Search Page within your BigCommerce webshop, simply add the appropriate data attributes to your Search Page embed code which you copied into the file where your Search Page lives, likely search.html.

For example:

You can also add any styling CSS to the same file. Make sure to surround all of the facets CSS withtags: