All Collections
Building Recommendation Templates
Building Recommendation Templates

Advanced Options: Building recommendation templates from scratch

Dan Macarie avatar
Written by Dan Macarie
Updated over a week ago

Here’s a bare-bones example of a recommendation template that outputs the HTML for product recommendations:

#foreach($product in $products)
    <a href="!$product.url"><img src="$product.thumb(1)" alt=""></a>
      <a class="name" href="$!product.url">$!</a>
      <div class="price">$!product.price</div>

The template outputs a heading and an unordered list populated with the product image, name and price. For more control over how the recommendation will look like you might want to add some class attributes to the rendered elements, depending on the CSS styles set in your site’s stylesheets. You can also use the class pattern we use in our default elements:

<div class="nosto-recommendation">
  <div class="nosto-header">$!title</div>
  <ul class="nosto-product-list">
#foreach($product in $products)
    <li class="nosto-product-list-item">
      <a class="nosto-product-image" href="!$product.url">
        <img src="$product.thumb(1)" alt="">
      <div class="nosto-product-info">
        <a class="nosto-product-name" href="$!product.url">$!</a>
        <div class="nosto-product-price">$!product.price</div>

Displaying a discounted price

When outputting the price you can do a check to see if the product is on sale and display the old price in addition to the current price. Note that the product information is only available inside the foreach loop.

## only works inside the foreach loop

<div class="discounted-price">
   $!product.price <span class="regular-price">($!product.listPrice)</span>
<div class="price">

You can also make changes to the markup and classes to make the discounted price stand out more by styling them differently.

A full list of supported variables can be found in templating language reference.

Did this answer your question?