How to add discount code field on cart page ?

Many website's are providing facility to put discount code on cart page but right now shopify not providing this facility to user. You need to put discount/coupon code on checkout page. In this tutorial you can learn how to add discount field on cart page. 

Step 1: Create a snippets cart-page-discount and copy - paste following code.

<script>
(function($) {
  $(document).on('page:load page:change', function () {
    if (localStorage.getItem('storedDiscount')){
      var discountStored = localStorage.getItem('storedDiscount'); 
      $('input[name="discount"]').val(localStorage.getItem('storedDiscount'));
    }
    $('form[action="/cart"]').on('submit', function(){
      var $discountCode = $('input[name="discount"]').val();
      localStorage.setItem('storedDiscount', $discountCode);
    }); 
  }); 
})(jQuery); 
</script>
<div class="discountcodefield">
  Use Discount - "CARTDISCOUNT"

  <label for="discount">Discount code will applied on next step automatically</label>
  <input autocomplete="off" type="text" name="discount" />
</div> 

Step 2: Open cart template file and add following code in schema.

    {
      "type": "checkbox",
      "id": "cart_discount_enable",
      "label": {
        "en": "Enable cart discount"
      },
      "default": true
    }

Step 3: In cart file add this line of code

       {% if section.settings.cart_discount_enable %}
{%include 'cart-page-discount'%}
      {% endif %}
     
Step 4: Save.

Demo Link

Try Shopify for free, and explore all the tools and services you need to start, run, and grow your business.