Adding a sale banner
In this guide you will learn how to add a sale banner showing the sale percentage to your product listings by customizing the result template.
In this guide you will learn how to add a sale banner showing the sale percentage to your product listings by customizing the result template.

- Basic knowledge of HTML and CSS.
To get started,
- Open the Search UI Designer
- Select the Custom option in the Search result template section
- Click Edit
In this guide we will learn how to add a banner to all products that are on sale.
Topics covered in this guide
- Using "if" statements
- Checking the product status
- Editing the style sheets
Getting started
Select the Default template from the list of available templates. We use this template as a starting point.
<article class="item">
<div class="item__image-wrapper">
<img data-search-image-hover class="item__image-wrapper__image" src="{{image_url}}" />
</div>
<div data-search-variants></div>
<h3 class="item__title">
<a href="{{ url }}">
{{ title }}
</a>
</h3>
<p class="item__vendor">
{{ vendor }}
</p>
<span class="item__price {{#if productStatus.variantOnSale}}sale{{/if}}">
{{productPrice.displayPrice}}
</span>
{{#if productStatus.variantOnSale}}
<span class="item__price {{#if productStatus.variantOnSale}}original{{/if}}">{{productPrice.originalPrice}}</span>
{{/if}}
</article>
We want to add a sales banner that only shows when a product is on sale. To do that, we will add a conditional block, using an if statement in Tempura. Add the following code underneath the
<div class="item__image-wrapper">
tag.{{#if productStatus.onSale}}
<div class="sale-banner">On Sale</div>
{{/if}}
In the
#if
statement we check the productStatus.onSale
attribute, which returns true
if the product is on sale and false
if it is not on sale. As a result, the contained div
will only show if the product is on sale.You might have noticed that we gave the
div
a class name called sale-banner
. Let's use that class name to style this block. Click on the CSS tab to access the stylesheet for this template.At the end of the CSS file, add the following code.
.sale-banner{
position:absolute;
top:1rem;
left.5rem;
z-index: 100;
background: white;
padding: .2rem .5rem .2rem .5rem ;
font-size: 0.8rem;
color: #B80F0A;
font-weight: 700;
}
We are positioning the
div
on top of the image in the top left corner. By giving it a background and a prominent text color, we have created an attention grabbing banner.💡 The preview might not show the banner if the product is not on sale. Negate or remove the if statement above temporarily to see what it would look like.
The final result is shown below. All items that are on sale now have a banner in the top left, drawing attention to the sale item.

Product listing with "On Sale" banner.
Showing that an item is on sale is great, but it's even better to show the actual discount percentage. Since the percentage might vary depending on the variant prices, we will calculate the largest discount of any variant and display that number.
Topics covered in this guide
- Creating variables
- Using "each" loops to iterate over Array fields
- Using Math functions for calculations
Getting started
Taking the HTML code
{{#var discount = 0}} <!–– We are defining a variable called discount and set it to 0 ––>
<!–– Iterate over the list of compare_at prices in the variant array. ––>
{{#each variant_compare_at_prices as price,index}}
<!–– We calculate the discount percentage of the variant price ––>
{{#var discountCalc = Math.round(((variant_prices[index] / price) -1) *-100)}}
<!–– If the discount calculated is larger than the current discount ––>
{{#if discountCalc > discount}}
{{#var discount = discountCalc}} <!–– we will assign this number to the discount variable ––>
{{/if}}
{{/each}}
Lastly we replace the static "On Sale" text from the previous guide with the
discount
variable we used to calculate the percentage.<div class="sale-banner">
-{{discount}}%
</div>
The final result shows the automatically calculated discount percentage as a banner in the top left of the sale item. A simple but elegant way to draw attention to the sale while communicating the discount percentage to the customer.
Click to see the full template code

Product listing with calculated sale percentage banner.
Last modified 9mo ago