Discount badge

In this tutorial we will add a discount badge to the product cell within a Klevu Recommendations banner.

Discount Badge Customisation

This is actually very straightforward, as within the Klevu Merchant Centre you can directly edit the HTML and CSS used to render the content of the banner. Whatever changes you make will be reflected in your banner.

Navigate to Klevu Merchant Centre > Recommendations > Templates and edit the template for your banners. Within the “Use Custom HTML” area, find the section <div class="kuRECS-item"> and add the following code immediately inside:

<% if (item.sku && item.sku != "") { %>
    <div class="kuDiscountBadge">
        <span class="kuDiscountTxt">
            <%= item.sku %>
<% } %>

Here we have used item.sku for illustrative purposes, as this is a product attribute found within most Klevu catalogues, but you will want to replace this with your own indexed attribute, eg. item.discountText.

Next we need to add some CSS to control the appearance of our badge. Copy and paste the following into the end of the “Use Custom CSS” section of the template:

.kuDiscountBadge {
  top: 6px;
  left: 6px;
  position: relative;
  background: #333333;
  padding: 0px;
  color: #FFFFFF;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  font-weight: normal;
  text-align: center;
  box-sizing: border-box;
  z-index: 1;
  font-style: italic;
  display: flex;
  align-items: center;
  line-height: 100%;
.kuDiscountBadge span {
  width: 100%;
  align-items: center;
  text-align: center;
  font-size: 11px;

Once again this is just an example, so once you have completed the tutorial and can see the discount badges appearing, feel free to modify this as you need to.

Click on the Preview button to check your badge’s appearance, then Save once you are happy for these changes to be reflected in your store.