Styling Facets #
Facets add great functionality and improve the user experience for webstore pages like Search Results. To customise the look and feel of your results facets, you’ll just need to adjust the CSS within the page Design as needed.
Depending on your setup, the CSS for your facets will be found either:
- In your Search Page Design within my.clerk.io
As its own separate Design in my.clerk.io. If using this option, make sure to use the Design ID from the facets in the Search code with data-facets-design=“12322”
Or, inside of tags within your webshop’s main Search Page template file, like this example:
In either case, adjusting the styling of your facets simply requires adjustment of the styling included in your facet classes and IDs.
To double-check that you’re styling the correct classes, it’s easiest to “Inspect” your facets using your website browser to identify which features you’re adjusting.
Once you’ve found the right values to style, you’re able to change different features like the text and background colors, facet width, fonts, and more!