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


Bestsellers (see note for how to make this specific to a category)

<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">
</div>


Most Viewed (see note for how to make this specific to a category)

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


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>



Note

For Bestsellers and Most Viewed recommendation widgets, there is an extra parameter data-tagalys-widget-opts-f which can be dynamically set to a category or some other attribute to allow category specific widgets. For example: data-tagalys-widget-opts-f='{"__categories":["3"]}'. It should be a valid JSON string following the same filter format as the search API uses (https://www.tagalys.com/docs/api/front-end/).