• 09 June 2020

👉 Requires Automatic Discounts for Shopify

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)

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

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