Get started with Omni-search

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.

How to get started with Omni-search

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.

What to consider when editing an Omnni-search 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.