Shopify Experts in Montreal

Montreal-based Shopify experts ready to build your Shopify store, app, or theme.

Shopify Post Image

How to display the active discount applied on Shopify?

1. Install the Automatic Discount app and when you're inside, click on "Learn more".

2. Copy this snippet of code:

<div class="tabarnapp_discount_applied" style="display:none;"> A discount of <em>${discount_amount}</em> from <em>${discount_code}</em> coupon will be applied at checkout. </div>  

You can edit this text however you want as long as you provide ${discountamount} and ${discountcode} inside it. Html is also supported. We also added the helper class .tabarnapp_discount_sentence for extra CSS customizations.

3. Paste it inside your cart.liquid template or your cart-template.liquid section.

You can paste it inside any file template that you want (eg. Cart drawer, Cart popup, Top bar or any page). The exact location where to poaste the snippet depends on 1) the theme used and 2) your preference. Try to find your best fit. For example:

4. Make sure you have a discount link or a discount rule created. The savings message will appear once a discount is automatically applied.

5. Test it live.

6. Edit the message and Style with CSS your active discount message as you want.

Eg 1. You can remove the discount name from the message:

Eg 2. You can align the text to the center and highlight it with a bright color.
.tabarnappdiscountsentence { text-align: center; background-color: yellow; font-size: 22px; }

You can go a lot more fancy if your CSS skills are sharp!


Premium CSS & JSS customizations (Do it yourself or hire us to do it)

You can basically do whatever you have in mind about the active discount display. Or hire us to do it.

Example 1

Example 2

1. Add over $20 worth of products to cart (eg. add this product ( to cart.

2. Then go to the cart page (

3. When the discount applies, you should see something like the screenshot above.

           var clean_currency = function(currency) {
             return (Math.abs(Number(currency.replace(/[^0-9\.-]+/g, "")) || 0));
          var promo_func_display = function(data){
            var label_total = "{{ '' | t }}";
            var label_discount = "{{ '' | t}}";

            var total = (Number(data.cart.original_total_price / 100) - Number(data.discount_amount_number || 0)).toFixed(2);
            var discount_amount = clean_currency(data.discount_amount).toFixed(2);
            var total_label = data.discount_amount.replace("- ","").replace(discount_amount,total);

            //data.discount_amount holds the formatted discount amount. Example "- $123.00"
            //data.discount_code holds the coupon code used. Example "2016givesyou10off"
            //data.discount_amount_number holds the discount amount without currency. Example "123.00"

            return "<p class='subtotal_amount'><strong>"+data.discount_amount +" "+label_discount+"</strong></p><h4>"+label_total+"</h4>" + "<p class='subtotal_amount'><strong>"+total_label+"</strong></p>";
<div class="tabarnapp_discount_applied" style="display:none;"> ${ promo_func_display(obj)}</div>  

In this example below, I've simply pasted a really similar version of the snippet of code above inside my theme cart-template.liquid and added a few lines of CSS.

Script pasted in cart-template.liquid (or cart.liquid)

.tabarnapp_discount_sentence CSS class added to theme.scss.liquid


Example 3

Your turn now! Install the Automatic Discount and get started.

Get In Touch

Tabarnapp's mission is to help you get the most of each visit on your Shopify store.


Try our Shopify Apps for Free

Automatic Discount Shopify Ultimate Upsell Shopify App Ultimate Upsell Shopify App

⭐ Discover our Apps ⭐

Buy our Shopify theme

Konversion Theme Shopify

⭐ Discover our theme ⭐