Using Clerk.io in Your Store

Manually Setting Up Live Search on Other / Custom Platforms

Help customers find the right products fast, with Search.

This section will show you how to install Clerk.io's Live Search with everything driven by Content and Designs.

Live Search / Search As You Type

   1. Create a Search Design called "Live Search". Start by using a default
       Instant Search Dropdown Right design.

   2. Create a Search Content block called "Live Search".
   3. Choose Live Search as the Product Logic, and select your Live-Search design
   4. Copy the embedcode from the section "Insert into website" into the bottom of the file              that generates all pages of your webshop.

   
5. Replace INSERT_SEARCH_INPUT_CSS_SELECTOR_HERE in data-instant-search with the class or ID of your search-field.


   6. Now live search is correctly bound to the search field when customers type.

Example Live-Search Code

<span class="clerk" 
  data-template="@live-search"
  data-instant-search="#search"
  data-live-search-categories="true">
</span>