Getting Started with Search using Lightspeed

Installing your Live Search and Search Page within Lightspeed.

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

  • First, create your Live Search Design and Content in

  • In your main layout file (likely fixed.rain or custom.rain), the Live Search embed code should be placed just before the closingtag.

    • 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, 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 “{% if page. search %}”, and add {% else %} at the end of the 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 {% endif %} 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.