Using Clerk.io In Your Store

Setting up Facets on Lightspeed

Setting up Facets on Lightspeed Make it easier for your customers to navigate your Search Page Carlen Wilutis

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"}'>
</span>


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

By adding these to your Search Page 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 (more about facet styling here), to add any custom styling:

Adding Facets to your Lightspeed Store

To add facets to your Search Page within your Lightspeed 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 collection.rain.

For example:

You can also add any styling CSS to the same file. Make sure to surround all of the facets CSS with <style> </style> tags:

Did this answer your question?