Product Recommendations

Design your recommendations
Create the recommendation block that will be displayed on your store. This is a template design that is dynamically populated in realtime when your visitors browse your store. Make sure your recommendation block match the style of your store as well as possible. If you encounter any issues with the design, contact us for design help.
Deploy the tracker script
If not already implemented, make sure to include the header script for our tracker to each page that will serve recommendations. Follow this guide to setup your tracker script.​
Deploy the recommendation block
Place your recommendation block anywhere on the page using the following tag.
<div data-id="1" id="my-recommendation-block"></div>
And put the following javascript code at the bottom of your page.
zlt.rec(pid, "my-recommendation-block")
pid: A string of comma separated product ids. E.g. "1,2,3"
tid: The id of the template you wish to display. E.g. "1"
The pid should contain the IDs of the currently viewed product and any product added to cart.
<!-- Example -->
<head>
   ...
   <!-- Initiate the tracker -->
   ### FOLLOW THE GUIDE ABOVE TO DEPLOY THE TRACKER SCRIPT ###
</head>
<body>
   ...
   <!-- Position the recommendation block -->
   <div data-id="1" id="my-recommendation-block"></div>
   ...
   <!-- Call the recommendation engine -->
   <script type="text/javascript">
      var pid = '1,2,3';
      zlt.rec(pid, "my-recommendation-block");
   </script>
</body>
Remember to replace [ADD YOUR TRACKER KEY] with your tracker key.
Extended options
Attribute
Usage
​
data-id
Template, or block selection
Required
data-mid
Model Selection, overwrites block in data-id
Optional
data-mprods
Number of Prods to get for Mobile
Optional
data-mslide
Number of Slides to show on Mobile
Optional
data-prods
Number of Products to get for Desktop
Optional
data-slide
Number of slides to show on Desktop
Optional
data-variant
Define variant for A/B testing
Optional
Examples
...
<!-- Position the recommendation block -->
<div data-id="design-id" data-model="model-id" id="my-recommendation-block"></div>
...
​
OR
​
...
<!-- Position the recommendation block -->
<div data-id="block-id" id="my-recommendation-block"></div>
...
Placement
We recommend that you position the recommendations as visible as possible on the product, cart and checkout pages. The position is vital for good recommendation performance. Read more about it in our article on product recommendations.

Wishlist

Recommendation Models

Last modified 11mo ago

Export as PDF

Copy link

On this page

Design your recommendations

Deploy the tracker script

Deploy the recommendation block

Extended options

Placement