All Collections
Recommendations
FAQ
Styling The Recommendation Templates
Styling The Recommendation Templates

HTML/CSS additional styling and editing examples of recommendation templates

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

Adding basic CSS styles to the recommendation template

Styling the recommendations is generally quite straightforward. Just add a style block to the template and use CSS to style the recommendation elements as you would style any HTML content.

<style type="text/css">
.nosto-recommendation {
  font-size:12px;
  color:#333;
  width:100%;
  margin-bottom:10px;
}
.nosto-header {
  font-size:14px;
  font-weight:bold;
}
.nosto-product-list {
  list-style:none;
  margin:0;
  padding:0;
}
.nosto-product-list-item {
  float:left;
  width:100px;
  margin-right:10px;
}
.nosto-product-image {
  display:block;
  margin-bottom:5px;
}
.nosto-product-name {
  font-weight:bold;
  text-decoration:none;
}
</style>

<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(2)" alt="">
      </a>
      <div class="nosto-product-info">
        <a class="nosto-product-name" href="$!product.url">$!product.name</a>
        <div class="nosto-product-description">$!product.description</div>
        <div class="nosto-product-price">$!product.price</div>
      </div>
    </li>
#end
  </ul>
</div>

Encapsulating the styles

While the basic styling of the recommendations works great, it can be problematic if there are multiple recommendation elements on the same page. If styles from different recommendations share same classnames, the last element on the page will override the styles of the previous recommendations.

You can use the $divId variable to print out the current slot name in the template. Using the variable you can form CSS selectors that start with the ID of the slot, which limits the scope of the CSS to only the current recommendation element. You can also target styles to the recommendation slot directly by using the ID selector.

<style type="text/css">
#$divId {
  margin-bottom:10px;
}
#$divId .nosto-recommendation {
  font-size:12px;
  color:#333;
  width:100%;
}
#$divId .nosto-header {
  font-size:14px;
  font-weight:bold;
}
#$divId .nosto-product-list {
  list-style:none;
  margin:0;
  padding:0;
}
#$divId .nosto-product-list-item {
  float:left;
  width:100px;
  margin-right:10px;
}
#$divId .nosto-product-image {
  display:block;
  margin-bottom:5px;
}
#$divId .nosto-product-name {
  font-weight:bold;
  text-decoration:none;
}
</style>

<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(2)" alt="">
      </a>
      <div class="nosto-product-info">
        <a class="nosto-product-name" href="$!product.url">$!product.name</a>
        <div class="nosto-product-description">$!product.description</div>
        <div class="nosto-product-price">$!product.price</div>
      </div>
    </li>
#end
  </ul>
</div>
Did this answer your question?