Getting Started

Adding Recommendations to Your Store using Lightspeed

How to add Recommendations to your Homepage, Product Pages, and Category Pages in your Lightspeed webstore

To add Recommendations to your store, you'll need to access your theme files in the Theme Editor. To do this, click "Design" in the left-side menu, then "Code bewerken" in the Geavanceerd dropdown.

Homepage Recommendations

  • Create your Recommendations Design and Content in my.clerk.io that you’d like to add to your Homepage.

  • In the file or snippet where your homepage theme lives (in this case, snippets/homepage.rain), paste the appropriate embed code from your my.clerk.io Content wherever on the page you’d like the Recommendations to appear.

Product Page Recommendations

  • Create your Design and Content in my.clerk.io that you’d like to add to your Product Page.

  • In your product page or snippet file (in this example, product.rain), paste the embed code from your Recommendations Content in my.clerk.io wherever you’d like the slider to appear on the Product page.

    • Be sure to update the data-products placeholder to included the value used in your Lightspeed store (likely "[ ]").

Category Page Recommendations

  • First, Create your Recommendations Design and Content in my.clerk.io that you’d like to add to your Category Page.

  • To add Recommendation sliders to your webshop’s Category pages, head over to the appropriate theme page, likely collection.rain.

  • Here, you place the Content embed code generated in my.clerk.io wherever you’d like the slider to appear on the page.

    • Be sure to update the data-category placeholder to the appropriate category ID value in Lightspeed (in this example, "").

Brand Page Recommendations

  • First, Create your Recommendations Design and Content in my.clerk.io that you’d like to add to your Brand Page.

  • To add Recommendation sliders to your webshop’s Brand pages, head over to the appropriate theme page, likely collection.rain.

  • You'll need to differentiate Brand Pages from Category Pages by adding an IF statement to check for Category IDs (in this example, , like this:

Exit Intent Recommendations

  • First, Create your Recommendations Design and Content in my.clerk.io that you’d like to add if visitors are exiting your store.

  • Exit Intent is added to your main theme file, likely custom.rain.

  • Here, you place the Content embed code generated in my.clerk.io just before the closing </body> tag. If you have Live Search implemented, the Exit Intent code should be placed just after this.

Cart Page Recommendations

  • First, Create your Recommendations Design and Content in my.clerk.io that you’d like to add to your Cart Page.

  • To make sure the Cart IDs can be passed to Clerk.io, be sure to add this script under the Config section of Clerk JS:

    "[]";
  • First, Create your Recommendations Design and Content in my.clerk.io that you’d like to add to your Cart Page, then copy that embed-code into fixed.rain within your Lightspeed themes.

    • To make sure the Cart IDs can be passed to Clerk.io, be sure to add this script as the value for data-products within your embed-code:

      data-products="[]"
  • Finally, you'll surround this in the IF statement line.

     

  • This will all need to be placed within <div class="content clearfix"> </div> to display properly in the Cart Page, like this:

Powerstep Recommendations

  • First, Create your Recommendations Design and Content in my.clerk.io that you’d like to add to the powerstep.

  • Find the powerstep snippet file in the Snippets section of your theme files, popup-buy.rain in this example. Paste the embed code generated from Content here: