Adding Recommendations to Your Store using Lightspeed

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

Platforms:

Lightspeed

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 “[ {{product.id}} ]”).

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, “{{collection.category_id}}”).

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, {%if collection.category_id %} ).
- Add and ELSE statement, then add the Brand Page embed-code here and close with {% endif %}, 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 closingtag. 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:

{%raw%}"[{% for clerk_line in page.cart.products %}{{ clerk_line.id }}{% if loop.length > 1 and not loop.last %}, {% endif %}{% endfor %}]";{%raw%}

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="[{% for clerk_line in page.cart.products %}{{ clerk_line.id }}{% if loop.length > 1 and not loop.last %}, {% endif %}{% endfor %}]"
```
Finally, you’ll surround this in the IF statement {% if ‘cart’ in template %} in the example below, and closing with an {% endif %} line.
This will all need to be placed within
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:

Some embed codes require variables like product or category IDs. In these cases, they’ll be populated in the embed code, but be sure to double-check these are the correct variables to reference within your Lightspeed portal.