Getting Started

Getting Started with Search using Lightspeed

Getting Started with Search using Lightspeed Installing your Clerk.io Live Search and Search Page within Lightspeed Carlen Wilutis

To incorporate your embed code for either Live Search or Search Page, you'll need to access your theme files. To do this, click "Design" in the left-side menu, then click "Code bewerken" in the Geavanceerd dropdown

Live Search

  • First, create your Live Search Design and Content in my.clerk.io.

  • In your main layout file (likely fixed.rain or custom.rain), the Live Search embed code should be placed just before the closing </body> tag.

    • Make sure to update the placeholder within “data-instant-search” to include the query class or ID used in your webshop (in this example, “#searchInput”).

Search Page

  • In Lightspeed, the Search Page lives within the Categories file (collection.rain).

  • After creating your Search Page Content and Design in my.clerk.io, place the Search Page embed code generated in Content wherever in the collection.rain code you’d like the page to appear.

    • Make sure to update the data-query to reference the search query appropriately, in this case, the query is referred to using the URL of the search page using “”.

  • Add an “if” statement to appropriately reference the search page here, in this example “ at the end of the Clerk.io Search Page code to reference the other page types using collection.rain, and to make sure non-Search Page collections are not populated. Lastly, after you category code, add to close the if-statement.

  • If you have a snippet set up for your search page (something like snippets/search.rain), be sure to comment out the entire snippet to keep that search page from populating in your webshop.

Did this answer your question?