Tutorial: Displaying Saved Amount/Percentage on the Sale Badge

Highlighted
Shopify Staff
Shopify Staff
1400 139 383

This tutorial goes through displaying the saved amount in the sale badge of your product. Following this tutorial will see your product sale badge change from this:

Bo_0-1603192703902.png

To this:

Bo_1-1603192740778.png

 

Debut

1. Open ‘product-price-listing.liquid’ if your theme version does not have this, open ‘product-price.liquid’.

2. Find {{ 'products.product.on_sale' | t }}, replace this with the code below.

To show savings amount:

 

 

{% if template == 'product' %}
      {{ 'products.product.on_sale' | t }}
    {% else %}
      {% assign amount = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price %}
      {% assign amount = saving | at_least: amount %}
      {% endfor %} 
      {% capture saved_amount %}{{ amount | money_without_trailing_zeros }}{% endcapture %}


      Save up to {{ saved_amount }}
    {% endif %}

 

 

To show saving percentage:

 

 

    {% if template == 'product' %}
      {{ 'products.product.on_sale' | t }}
    {% else %}      
      {% assign percentage = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price | round %}
      {% assign percentage = saving | at_least: percentage %}
      {% endfor %} 


      Save up to {{ percentage }}%
    {% endif %}

 

 

The code above will generate a text “Save up to $x” or “Save up to x%”. To change the messaging, you can edit the words “Save up to” 

3. Click Save. 

 

Supply

Note: In order to show a sale badge, please ensure you have this enabled in your theme settings. You can find this setting under 'Online store > Themes > Customize’, go to ‘Collection pages’ and check ‘Show saved amount’.

06-29-1vztl-2ft0e

1. To edit the collection page, open ‘price-sale.liquid’.

2. Find {{ 'products.general.save_html' | t: saved_amount: saved_amount }}, replace this with either snippets of code below. 

To show savings amount:

 

 

{% assign amount = 0 %}
{% if template contains 'search' %}
  {% for variant in item.variants %}
    {% assign saving = variant.compare_at_price | minus: variant.price %}
    {% assign amount = saving | at_least: amount %}
  {% endfor %} 
{% else %}
  {% for variant in product.variants %}
    {% assign saving = variant.compare_at_price | minus: variant.price %}
    {% assign amount = saving | at_least: amount %}
  {% endfor %} 
{% endif %}
{% capture saved_amount %}{{ amount | money_without_trailing_zeros }}{% endcapture %}
Save up to {{ saved_amount }}

 

 

To show saving percentage:

 

 

{% assign percentage = 0 %}
{% if template contains 'search' %}
  {% for variant in item.variants %}
    {% assign saving = compare_price | minus: product_price | times: 100 | divided_by: compare_price | round %}
    {% assign percentage = saving | at_least: percentage %}
    {% endfor %} 
  {% else %}
    {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price %}
      {% assign percentage = saving | at_least: percentage %}
    {% endfor %} 
{% endif %}

Save up to {{ percentage }}%

 

 

The code above will generate a text “Save up to $x” or “Save up to x%”. To change the messaging, you can edit the words “Save up to” 

 

Brooklyn

Part 1: Editing ‘product-grid-item.liquid’.

1. Open ‘product-grid-item.liquid’.

2. Find {{ 'products.general.save_html' | t: saved_amount: saved_amount }}  and replace this with either snippets of code below:

To show savings amount:

 

 

{% assign amount = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price %}
      {% assign amount = saving | at_least: amount %}
      {% endfor %} 
      {% capture saved_amount %}{{ amount | money_without_trailing_zeros }}{% endcapture %}

      Save up to <br>{{ saved_amount }}

 

 

To show saving percentage:

 

 

      {% assign percentage = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price %}
      {% assign percentage = saving | at_least: percentage %}
      {% endfor %} 
      Save up to <br>{{ percentage }}%

 

 

 

The code above will generate a text “Save up to $x” or “Save up to x%”. To change the messaging, you can edit the words “Save up to” 

3. Click Save. 

Part 2 (optional): editing badge color:

If your badges overlap with the product image, you might find your badge unreadable. For example:

20-10-50hyc-arkro

You’ll want to edit the badge color by following the guide here.

 

Boundless

Part 1: editing sale badge content

1. To edit the collection page, open ‘product-grid-item.liquid’. To edit the search result page, open ‘search-template’.

2. Find {{ 'products.product.on_sale' | t }} and replace this with the code below:

To show savings amount:

 

 

 {% assign amount = 0 %}
{% if template contains 'search' %}
  {% for variant in item.variants %}
    {% assign saving = variant.compare_at_price | minus: variant.price %}
    {% assign amount = saving | at_least: amount %}
  {% endfor %} 
{% else %}
  {% for variant in product.variants %}
    {% assign saving = variant.compare_at_price | minus: variant.price %}
    {% assign amount = saving | at_least: amount %}
  {% endfor %} 
{% endif %}
{% capture saved_amount %}{{ amount | money_without_trailing_zeros }}{% endcapture %}
Save up to <br>{{ saved_amount }}

 

 

To show saving percentage:

 

 

   {% assign percentage = 0 %}
{% if template contains 'search' %}
  {% for variant in item.variants %}
    {% assign saving = compare_price | minus: product_price | times: 100 | divided_by: compare_price | round %}
    {% assign percentage = saving | at_least: percentage %}
    {% endfor %} 
  {% else %}
    {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price %}
      {% assign percentage = saving | at_least: percentage %}
    {% endfor %} 
{% endif %}
Save up to <br>{{ percentage }}%

 

 

The code above will generate a text “Save up to $x” or “Save up to x%”. To change the messaging, you can edit the words “Save up to” 

3. Click Save. 

 

Part 2 (optional): editing sale badge position:

Depending on how long your badge text is, you may see the text being cut off. To fix this, follow these steps:

1. Open ‘theme.scss.liquid’.

2. Paste either of these code snippets of code on the bottom of the file:

To show savings amount:

 

 

{% assign amount = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price %}
      {% assign amount = saving | at_least: amount %}
      {% endfor %} 
      {% capture saved_amount %}{{ amount | money_without_trailing_zeros }}{% endcapture %}
      Save up to <br>{{ saved_amount }}

 

 

To show saving percentage:

 

 

     {% assign percentage = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price %}
      {% assign percentage = saving | at_least: percentage %}
      {% endfor %} 
      Save up to <br>{{ percentage }}%

 

 

The code above will generate a text “Save up to $x” or “Save up to x%”. To change the messaging, you can edit the words “Save up to” 

3. Click Save.

 

Simple

1. Open ‘product-grid-item.liquid’.

2. Find {{ 'products.product.on_sale' | t }} and replace this with either snippets of code below:

To show savings amount:

 

 

 {% assign amount = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price %}
      {% assign amount = saving | at_least: amount %}
      {% endfor %} 
      {% capture saved_amount %}{{ amount | money_without_trailing_zeros }}{% endcapture %}
      Save up to <br>{{ saved_amount }}

 

 

To show saving percentage:

 

 

{% assign percentage = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price %}
      {% assign percentage = saving | at_least: percentage %}
      {% endfor %} 
      Save up to <br>{{ percentage }}%

 

 

The code above will generate a text “Save up to $x” or “Save up to x%”. To change the messaging, you can edit the words “Save up to” 

3. Click Save. 

 

Part 2 (optional): Editing Sale Badge Position:

Depending on how long your badge text is, you may see your text being cut off or looking uneven. To fix this, follow these steps:

1. Open ‘theme.liquid’.

2. Find </head> add this code right above it:

 

 

  <style>
    .badge .money {
      padding: 0px;
    }
    {% unless template == 'product' %}
    .badge span {
      height: auto;
      padding: 10px;
      width: 70px;
    }
    {% endunless %}
  </style>

 

 

You may need to change the padding and width under .badge span depending on the length of the text.

4. To change the position of the badge, paste the following code above {% endunless %} from step 3.

 

 

.badge--sale {
  top: -10px;
  right: -15px;
}

 

 

Adjust the numbers accordingly. 

5. Click Save. 

 

Venture 

1. Open ‘product-card.liquid’.

2. Find {{ 'products.product.on_sale' | t }} and replace this with either snippets of code below:

To show savings amount:

 

 

 {% assign amount = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price %}
      {% assign amount = saving | at_least: amount %}
      {% endfor %} 
      {% capture saved_amount %}{{ amount | money_without_trailing_zeros }}{% endcapture %}
      Save up to {{ saved_amount }}

 

 

To show saving percentage:

 

 

      {% assign percentage = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price %}
      {% assign percentage = saving | at_least: percentage %}
      {% endfor %} 
      Save up to {{ percentage }}%

 

The code above will generate a text “Save up to $x” or “Save up to x%”. To change the messaging, you can edit the words “Save up to” 

3. Click Save. 

 

Express

1. Open ‘product-price-listing.liquid’.

2. Find {{ 'products.product.on_sale' | t }} and replace this with the code below.

To show savings amount:

 

 

     {% assign amount = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price %}
      {% assign amount = saving | at_least: amount %}
      {% endfor %} 
      {% capture saved_amount %}{{ amount | money_without_trailing_zeros }}{% endcapture %}
      Save up to {{ saved_amount }}

 

 

To show saving percentage:

 

 

  {% assign percentage = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price %}
      {% assign percentage = saving | at_least: percentage %}
      {% endfor %} 
      Save up to {{ percentage }}%

 

 

The code above will generate a text “Save up to $x” or “Save up to x%”. To change the messaging, you can edit the words “Save up to” 

3. Click Save. 

 

Narrative:

1. Open ‘product-card.liquid’.

2. Find {{ 'products.product.on_sale' | t }} and replace this with the code below:

To show savings amount:

 

 

    {% assign amount = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price %}
      {% assign amount = saving | at_least: amount %}
      {% endfor %} 
      {% capture saved_amount %}{{ amount | money_without_trailing_zeros }}{% endcapture %}
      Save up to <br>{{ saved_amount }}

 

 

The code above will generate a text “Save up to $x” or “Save up to x%”. To change the messaging, you can edit the words “Save up to” 

3. Click Save. 

 

Part 2 (optional): Editing Sale Badge Position:

Depending on how long your badge text is, you may see the text being cut off. To fix this please follow these steps:

1. Open ‘theme.scss.liquid’.

2. Paste this code on the bottom of the file: 

 

 

.card__badge {
  width: 220px;
  padding-top: 45px;
}

 

 

You may need to change the numbers above depending on the length of the text.

3. Click Save. 

 

 

Bo - Social Care @ Shopify


Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Tourist
11 0 1

Hi There

Thanks for this. I am using the Debut template. This works for showing a saved percentage when I view products in list/grid form, but when I select that particular product to view it singularly, it goes back to just "Sale" without showing "Save up to X%". How can I adjust it so it always shows the percentage saving wherever that particular product is viewed?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1400 139 383

Hey there, @Luvita 

 

Great question! Here are some additional steps to achieve this: 

1. Open 'product-price.liquid' and find {{ 'products.product.on_sale' | t }}, replace this with the code below:

 

 

{% assign percentage = 0 %}
{% for variant in product.variants %}
  {% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price | round %}
  {% assign percentage = saving | at_least: percentage %}
{% endfor %} 
Save up to {{ percentage }}%

 

 

2. Click Save. 

 

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

 

All the Best,

Bo

Bo - Social Care @ Shopify


Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
To learn more visit the Shopify Help Center or the Shopify Blog

Highlighted
Tourist
11 0 1

Thanks Bo, this works perfectly!

- Luvita Team