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


Similar Products

<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>

Bestsellers

<div id="tagalys-namespace" class="tagalys-namespace"
  data-tagalys-widget="bestsellers"
  data-tagalys-widget-opts-heading="Bestsellers"
  data-tagalys-widget-opts-per-page='{"300":2,"600":3,"900":4,"1200":5}'
  data-tagalys-widget-opts-hide-if-results-under="10"
  data-tagalys-widget-opts-f='{"attribute_1":["AT1_ID1", "AT1_ID2"], "attribute_2":["AT2_ID1"]}'
</div>

Most Viewed

<div id="tagalys-namespace" class="tagalys-namespace"
  data-tagalys-widget="most_viewed"
  data-tagalys-widget-opts-heading="Most Viewed"
  data-tagalys-widget-opts-per-page='{"300":2,"600":3,"900":4,"1200":5}'
  data-tagalys-widget-opts-hide-if-results-under="10"
  data-tagalys-widget-opts-f='{"attribute_1":["AT1_ID1", "AT1_ID2"], "attribute_2":["AT2_ID1"]}'
</div>

New Arrivals

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

Top Discounts - By Percentage

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

Top Discounts - By Amount

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


Please note

1. per page should be a valid JSON string, where each key is the pixel size and value is number of visible product tiles

2. f should be a valid JSON string following the same filter format as the search API uses (you can see by clicking on filters and analysing XHR requests)