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.

Pre-requisites

Basic knowledge of HTML and CSS.
Familiarity with the Tempura template language

To get started,

Open the Search UI Designer
Select the Custom option in the Search result template section
Click Edit

Add a banner

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>

Adding conditional content

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.

Styling the content

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.

Display Sales Percentage

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>

Final Result

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

PreviousCreating a user interface NextShopify

Last updated 1 year ago