- Clerk.io Help Center
- Using Clerk.io on BigCommerce
- Getting Started
-
Working with Clerk.io
-
Using Clerk.io on Other / Custom Platforms
-
Using Clerk.io on Shopify
-
Using Clerk.io on Magento 1
-
Using Clerk.io on Magento 2
-
Using Clerk.io on WooCommerce
-
Using Clerk.io on Prestashop
-
Using Clerk.io on BigCommerce
-
Using Clerk.io on Shoporama
-
Using Clerk.io on Shopware 6
-
Using Clerk.io on DanDomain
-
Using Clerk.io on Lightspeed
-
Using Clerk.io on SmartWeb / HostedShop
-
Using Clerk.io on DynamicWeb
-
Using Clerk.io with Any Email Client
-
Using Clerk.io with Copernica
-
Using Clerk.io with Autopilot
-
Using Clerk.io with Active Campaign
-
Using Clerk.io with Marketing Platform
-
Using Clerk.io with MailChimp
-
Using Clerk.io with MailUp
-
Using Clerk.io with Apsis
-
Using Clerk.io with UbiVox
-
Using Clerk.io with CleverReach
-
Using Clerk.io with Google Ads
-
Using Clerk.io with Act-On
-
Audience Integrations with Facebook
-
Using Clerk.io with DotDigital
-
Using Clerk.io with Klaviyo
Adding Facets to your BigCommerce Search Page
How to add filters to your Search Results for your BigComemerce webshop
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 with <style> </style> tags: