We Build Shopify Apps

Montreal-based Shopify experts cooking some Shopify apps.

Shopify Post Image

How to display the active discount applied on Shopify?


1. Install the Automatic Discount app and go to the "Active discount display" section.

Image from Gyazo

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:


Example from the Parallax Shopify theme (from Out of the Sandbox)

Cart page

The cart drawer code is located inside the cart.liquid file.

Where to put the snippet of code

In the example above, we pasted this code on line 97 of the cart.liquid file. The row number might vary based on the previous customizations that you did to your theme, or based on other scripts from other apps.

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

Result

Cart drawer

The cart drawer code is located inside the theme.liquid file.

Where to put the snippet of code

In the example above, we pasted this code on line 217 of the cart.liquid file. The row number might vary based on the previous customizations that you did to your theme, or based on other scripts from other apps.

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

Result


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 (https://tabarnapp.myshopify.com/products/biker-jeans?variant=34210234374) to cart.

2. Then go to the cart page (https://tabarnapp.myshopify.com/cart).

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

<script>  
           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>  

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

Result


Example 3


Some other basic examples from users




Install the Automatic Discount and get started.

Not enough? Ok then, display a coupon field in cart

Get In Touch

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

E: support@tabarnapp.com