Search: Omnisearch

Powered by our Search 3.0, Clerk’s omni-search will serve your visitors with the most relevant results and related content for their searches.

As an e-commerce manager, it provides you with the flexibility that you need to offer the best search experience:

• It’s easy to integrate in your site (see insert your omni-search content in your website)
• It’s fully customizable: you can get started with one of our minimalistic templates, and align the design with your brand identity by just changing a few things (logo, fonts, colors…)
• Focuses on providing the best user experience by supporting:
  • Query suggestions (based on popularity, search history, auto-completion…): to guide your visitors along the way
  • Live results: providing your visitors with fast search results as they type, as well as category, brand and content suggestions.
  • Sorting and filtering: to let your visitors refine their search in an intuitive an easy way.

Getting started #

Creating an Omni-search design #

Similarly to our live and search page contents, you will need an omni-search design to create an omni-search content. For that reason, it is a good idea to get started by customizing one of our templates:

1. In your Clerk.io account, navigate to Store > Search > Designs
2. Click on New design
3. Select the Omnisearch type of design.
4. Choose a template to get started with.
5. Hit “Create design” to start personalizing your design.

All omni-search designs consist of a general layout and a set of sub-designs that can be referenced in the main layout.

Note: Only the sub-designs available in your omni-search design can be referenced in the general layout.

In order to edit a specific sub-design, click on its Edit icon and you will navigate to the sub-design’s page. Once you’re finished editing, click Save & close, and you’ll be back in your general layout editor.

You can also delete, duplicate and copy the reference of any sub-design by clicking its three dots button.

While editing an omni-search design, bear in mind that some elements need specific clerk identifiers for your design to work, such as the input field (id=”clerk-omnisearch-input”) or the content wrapper (id=“clerk-omnisearch-content”).

To get started with, you may want to only adjust a few things to make the design match your brand’s look and feel - remember that you can always edit your design later on, after previewing and testing it in your site.

• Logo: access the TopBarSearchForm and replace the default logo with yours.
• Fonts: if needed, adjust the fonts to match your site’s look and feel.
• Colors: you can add your brand’s colors in those elements you want to emphasize or streamline with the rest of your site like buttons and tags.
• Buttons and tag borders: you can adjust their color, radius, width…
• Links: if you have a specific styiling for your links, you can also edit it.

Whenever you want to check your progress, you can do it by clicking the “Preview design” button. You will get to check the latest saved version of your design.

Once you feel your design is ready, you can go to the next step in the process: creating a content for your omnisearch.

Creating an Omni-search content #

Contents in Clerk.io can be somehow considered as “containers” of the elements that you can create from your account (search dialogs, or recommendation carousels). For each element that you want to insert in your site, you need to create a content.

To start using Omni-search in your store, you need to create a content for it:

1. Navigate to Search > Content.
2. Click on “New content” in top right side of the page
3. Fill in the required fields:
   • Name: it will help you identify your content in case you want to create more than one (it can be modified later on)
   • Content type: it’s Omni-search by default, so you don’t need to do anything with it.
   • Design: all contents require a compatible design. Click on the field and you should be able to select it among all the omni-search designs you have created.
     • If your design includes any variables, set there values here.
     • Decide how many products should we display per load. Each search query may return lots of matches. To ensure the best performance, we won’t load them all at once, but on demand, when your visitors click the Load more button.
     • Limit the query suggestions, the number of categories and the number of content pages that can be displayed at a time. This ensures that, no matter the query, your visitors don’t feel overwhelmed with excessive information, and that your design doesn’t break.
     • Choose the attributes you want to include as facets (filters) and set readable names for them. If you cannot find a specific attribute in the list, it may be that you forgot to include it in the “filterable attributes” list, under Search configuration.

Insert the content in your site #

The last step to include a content powered by Clerk.io in your webshop is inserting it in your site.

For your omni-search content, the default method is “Using injection” but you can also insert the content in your site by “Using embedded code”.

Insert using injection: #

This is the easiest method to add a Clerk.io content to your site. You just need to indicate:

• The event that should trigger the content to display (most likely you want it to display when your visitors click on your search icon or input field)
• The element on which that event will happen. For example, if you want your Omnisearch content to display only when your visitors interact with your search bar (click or focus over it), you just need to find the unique CSS selector applied to it (it will look something like #search, #search_bar…). If you have different identifiers in mobile and desktop, add them both. How to find the CSS selector of my search bar? 1. Inspect your site’s code; 2. Find the element you want to target. 3. Rigth click over it, and find the option copy > copy selector.

Note: Make sure to find a CSS selector that is a unique identifier of the element(s) you want to target. You can use any CSS selector supported by the querySelector() method.

• Set the visibility of the content:
  • In preview: allows you to test your content without impacting your live site. You can open your site in preview by clicking “Open site in preview” or by adding ?clerk_content_mode=preview to your site’s url.
  • In my live site: once you have tested your content, and are ready to make it public, it’s time to chose this option.

Insert using embedded code: #

This is the alternative to adding the content in your site using injection. It requires some more steps, and editing your site’s code.

To add the embedded code in your site:

1. Expand the section “Insert into website” and select the “Using embedded code” option.

2. If you have any unsaved changes, save them and generate the embedded code. Else, you will the code by default. Copy the embedded code.

   

3. Access the backend of your web-shop

4. Paste the embed code in the file that generates all pages of the web-shop, underneath the clerk.js injection code.

5. Replace INSERT_CSS_SELECTOR_FOR_ELEMENT_THAT_SHOULD_TRIGGER_OMNISEARCH with the CSS selector of the html element that should enable your Omni-search content.

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:

<div>
    <input type="text" id="clerk-omnisearch-input"/>
    <div id="clerk-omnisearch-content">
        Content!
    </div>
</div>

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 #

Overview #

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

Close Button #

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

Sorting #

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.