Using Clerk.io in Your Store

Setting up Facets on Shopify

Make it easier for your customers to navigate your Search Page

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 Page embed code, facets will be displayed as soon as results are shown.

Below, you can see what each 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 Shopify Store

To add facets to your Search Page within your Shopify 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.liquid or search-template.liquid.

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?