Search

Customizing and Styling Clerk.io Facets

Customizing and Styling Clerk.io Facets Customize the style of your Clerk.io facets to fit your website. Carlen Wilutis

Facets add great functionality and improve the user experience for webstore pages like Search Results. To customize 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 lives either:

  • In your Design within my.clerk.io (likely the Design for your Search Page)

  • Or, inside of <style></style> 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!

Did this answer your question?