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!

RESULT:

Advanced CSS & JSS customizations

This is an example from the very first user of this new feature (see below how he used it)

More control over the discount display

*Requires coding knowledge

You can basically do whatever you have in mind about the active discount display. Example below:

Simple example

<script>  
    var my_func = function(data){
      //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 "Discount ........ " + data.discount_amount;
    }
  </script>
  <div class="tabarnapp_discount_applied" style="display:none;"> ${ my_func(obj)}</div>

More detailed example

           var clean_currency = function(currency) {
             return (Math.abs(Number(currency.replace(/[^0-9\.-]+/g, "")) || 0));
           }
          var promo_func_display = function(data){
            var label_total = "{{ 'cart.general.total' | t }}";
            var label_discount = "{{ 'customer.order.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>";
          }
        </script>
        <div class="tabarnapp_discount_applied" style="display:none;"> ${ promo_func_display(obj)}</div>

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.

E: support@tabarnapp.com

Try our Shopify Apps for Free

Automatic Discount Shopify Ultimate Upsell Shopify App

⭐ Discover our Apps ⭐

Buy our Shopify theme

Konversion Theme Shopify

⭐ Discover our theme ⭐