We Build Shopify Apps

Montreal-based Shopify experts cooking some Shopify apps.

How to display the savings on Shopify with Automatic Discounts

👉 Requires Automatic Discounts for Shopify

We've pimped the Display Savings feature from what is was before to what it is now.

Here are 2 simple examples you can achieve within 5 minutes. We took the BROOKLYN theme as an example, but it's similar in most themes, only the theme file name may be different and the location in the theme file where to input our below script.


Display savings (discount)

display savings automatic discounts shopify

This above was achieved by inputting the following script in the Drawer Cart of the Brooklyn theme.

     <div class="grid--full" data-tbnadhide='NO_DISCOUNT' style='display:none;'>
          <div class="grid__item two-thirds">
            <p class="ajaxcart__subtotal">Discount</p>
          </div>
          <div class="grid__item one-third text-right">
            <p class="ajaxcart__subtotal">-<span data-tbnadfield='CART_DISCOUNT'></span></p>
          </div>
        </div>
        <div class="grid--full">
          <div class="grid__item two-thirds">
            <p class="ajaxcart__subtotal">Total</p>
          </div>
          <div class="grid__item one-third text-right">
            <p class="ajaxcart__subtotal"><span data-tbnadfield='CART_TOTAL'></span></p>
          </div>
        </div>

Display savings + coupon code

display savings automatic discounts shopify

This above was achieved by inputting the following script in the Drawer Cart of the Brooklyn theme.

<style type='text/css'>  
    .nice_discount_style {
        font-size: 11px;
        line-height: 22px;
        vertical-align: middle;
        border: 1px dashed white;
        display: inline-block;
        padding: 1px 5px;
        margin-top: 5px;
        margin-bottom: 5px;
        border-radius: 5px;
    }
</style>  
<div class="grid--full" data-tbnadhide='NO_DISCOUNT' style='display:none;'>  
    <div class="grid__item two-thirds">
        <p class="ajaxcart__subtotal nice_discount_style" data-tbnadfield='DISCOUNT_CODE'></p>
    </div>
    <div class="grid__item one-third text-right">
        <p class="ajaxcart__subtotal">-<span data-tbnadfield='CART_DISCOUNT'></span></p>
    </div>
</div>  
<div class="grid--full">  
    <div class="grid__item two-thirds">
        <p class="ajaxcart__subtotal">Total</p>
    </div>
    <div class="grid__item one-third text-right">
        <p class="ajaxcart__subtotal"><span data-tbnadfield='CART_TOTAL'></span></p>
    </div>
</div>  

Get In Touch

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

E: support@tabarnapp.com