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


Use our tool to generate fields to use: Discount code, Savings, Subtotal & Total

Use our tool to generate fields to use: Discount code, Savings, Subtotal & Total


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>  

Anoter example

Code used for the screenshot above:

 <tr class="cart-subtotal">
                              <th>{{ 'cart.general.subtotal' | t }}</th>
                              <td data-title="{{ 'cart.general.subtotal' | t }}"><span class="shopify-Price-amount amount">{{ cart.total_price | money }}</span></td>
                            </tr>
                                                        <tr class="cart-subtotal" data-tbnadhide='NO_DISCOUNT' style="display: none;">
   <th>Discount</th>
                                      <td data-title="Discount" data-tbnadhide='NO_DISCOUNT'>                   
                                        <span class="shopify-Price-amount amount" style="color: red;" data-tbnadfield='CART_DISCOUNT' data-tbnadhide='NO_DISCOUNT' data-tbnaddefault=''></span>
                            </td>
                            </tr>


More examples

Get In Touch

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

E: support@tabarnapp.com