Manually Setting Up Live Search on Other / Custom Platforms

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>

Did that answer your question?