How do I install Tagalys Product recommendations? (Similar Products, Personalized Recommendations, Recently Viewed, Bought also Bought)

Tagalys Widgets are loaded by reading data attributes on HTML tags. You place a line of HTML code with your requirements where you want the widget to appear and Tagalys will load this content asynchronously.

In all these examples, data-tagalys-widget-opts-per-page should be a valid JSON string, where each key is a browser window size in pixels and value is the number of visible product tiles at that size. You can use custom pixel sizes, but Tagalys internally sets the keys 300, 600, 900, and 1200 so you should also overwrite these if you want them to be different from the defaults mentioned below.

Similar Products (data-tagalys-widget-opts-product-id should be dynamically set to the ID of the product)

<div id="tagalys-namespace" class="tagalys-namespace" 
data-tagalys-widget="similar_products"
data-tagalys-widget-opts-product-id="product-id-for-similar-products"
data-tagalys-widget-opts-heading="More like this"
data-tagalys-widget-opts-per-page='{"300":2,"600":3,"900":4,"1200":5}'>
</div>

Personalized recommendations

<div id="tagalys-namespace" class="tagalys-namespace"
data-tagalys-widget="personalized"
data-tagalys-widget-opts-heading="Recommended for you">
</div>

Recently Viewed

<div id="tagalys-namespace" class="tagalys-namespace"
data-tagalys-widget="recently_viewed"
data-tagalys-widget-opts-heading="Recently Viewed"
data-tagalys-widget-opts-per-page='{"300":2,"600":3,"900":4,"1200":5}'
data-tagalys-widget-opts-hide-if-results-under="1">
</div>

Bought also Bought

<div id="tagalys-namespace" class="tagalys-namespace"

 data-tagalys-widget="bought_also_bought"

 data-tagalys-widget-opts-product-id="PRODUCT-ID"

 data-tagalys-widget-opts-heading="Bought also bought"

 data-tagalys-widget-opts-per-page='{"300":2,"600":3,"900":4,"1200":5}'>

</div>