Creating your own omnisearch design

What to be aware of when creating an omnisearch design from scratch

Overlay structure

When omnisearch is initiated, it creates an element with the class clerk-omnisearch-overlay and is injected into the bottom of the body. This is where we will inject the design, as we have the input element as part of the design we need to have a structual demands to ensure we don’t re-render the input element on each load. The structure should look like the following underneath the overlay:

    <input type="text" id="clerk-omnisearch-input"/>

    <div id="clerk-omnisearch-content">


Input field

To find the input field it needs to have the following identifier clerk-omnisearch-input. Ones the trigger element has been fired, we are moving the cursor focus to this element, and add whatever query we have to it, so we can keep the user experience somewhat seamless.

Content Wrapper

The content wrapper is where most of the things are happening, the wrapper around it needs to have the identifier clerk-omnisearch-content. In here should be the facets, the sliders and everything else that is not the input field.

Classes and Their Functionalities


Functionality can be added to the design by adding specific classes to elements.

Class NameFunctionality
Close Buttonclerk-omnisearch-closeAdds a click listener to any close buttons present.
Sort Dropdownclerk-omnisearch-sortFinds sorting dropdowns and adds listeners to them.
Search Facetclerk-facet-searchIf there is a facet search present, creates a listener and hides facets that do not match the query.
Full Clearclerk-omnisearch-full-resetElements with this class deselect all facets and clear the query when activated.
Facets Clearclerk-omnisearch-facet-full-resetElements with this class need to deselect all facets when activated.
Group Clearclerk-omnisearch-facet-group-resetElements with this class need to deselect all elements within the group when pressed.
Facet Clearclerk-omnisearch-facet-resetElements with this class need to deselect a single element with the given group/value attribute pair.
Facet Clickclerk-facetElements with this class will be treated as a selectable facet.


Close Button

When attaching the class clerk-omnisearch-close to an element inside the design, that element will hide the overlay.


To get a sorting element in the design, add the class clerk-omnisearch-sort to the selecting element, e.g. a dropdown. To work, the element needs to be the following value:[desc|asc], so the value we want to sort, with a colon and then either desc or asc. Optionally you can add a data-sort-type attribute if you want it to sort categories or pages.

Search Facet

The clerk-facet-search class, when present in a webpage, checks for the existence of any facet search elements. Facetsearches provide a way for users to search in the facets. For it to work, the element need to have a string value.

Full Clear

Elements with the clerk-omnisearch-full-reset class will, when clicked clear all selected facets and reset the query.

Facets Clear

Elements with the clerk-omnisearch-facet-full-reset class will, when activated, deselect all of the active facets. This would be typically seen on a ‘Clear all’ style button within a group of facets, allowing users to reset their selected filters in one easy action.

Group Clear

To provide the feature of deselecting an entire group of facets, an element can be given the clerk-omnisearch-facet-group-reset class. Once the element is activated (e.g., clicked), all elements within its group become deselected, resetting that facet group. For it to work, the element must have the group we want to clear as an attribute with the name data-facet-group.

Facet Clear

This class is designed for scenarios where it’s necessary to deselect a single facet. An element with the clerk-omnisearch-facet-reset class can be associated with a specific facet in a group by giving it both an data-facet-group and a data-facet-value. Upon activation, it will only deselect its associated facet based on the given group/value attribute pair, leaving other selected facets unchanged.

Facet Click

All facets should have a clerk-facet class with the data-facet-group and a data-facet-value attributes, so we know what the customer is pressing.