Compatibility: Compatible with Shopify 2.0 FREE themes ONLY
It would be nice to add the coupon code in the cart page so the customer do not need to wait until going to checkout page to see how much they are paying.
As an e-commerce business owner, one of the most effective ways to attract and retain customers is by offering discounts and promotions. Shopify, one of the leading e-commerce platforms, provides a user-friendly interface that allows you to seamlessly integrate discount codes into your online store. In this article, we'll guide you through the process of adding discount codes directly to the cart page in Shopify, making it easier for your customers to apply and enjoy the benefits of your promotions.
See the demo with the cart drawer here.
What you are buying:
- Add a input for discount code entry in cart page
- Apply the discount in cart items and when in checkout
- Only applied one discount code per entry and cannot use multiple code per cart items.
What makes our code better:
- We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
- We do not leave or add codes use to advertise for our website
- Our code is mobile friendly
Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.
To start:
1. Go to Admin Shopify store > Themes > Actions > Edit Code.
2. In Snippet folder, create a new snippet, and name it "discount-cart". Place the code below in the newly created snippet.
<style> button[aria-disabled="true"] .discount-button__label,button[aria-disabled="false"] .loading-overlay__spinner { display: none; } button[aria-disabled="false"] .discount-button__label, button[aria-disabled="true"] .loading-overlay__spinner { display: block; margin: auto; } </style> <discount-cart data-cart-quantity="{{ cart.items[0].quantity }}" data-section="{{ section.id }}"> <div class="page-width"> <div class="field" style="max-width: 400px"> <input type="text" placeholder="Discount code" class="field__input"> <label class="field__label">Discount code</label> <button aria-disabled="false" style="width: 50px"> <span class="discount-button__label">Apply</span> <span class="loading-overlay__spinner"> <svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg" > <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle> </svg> </span> </button> </div> <small style="display: none">⚠️ Discount code does not exist!</small> </div> </discount-cart> <script> class DiscountCart extends HTMLElement { constructor() { super(), (this.discountInput = this.querySelector("input")), (this.submitBtn = this.querySelector("button")), this.submitBtn.addEventListener("click", this.submitDiscount.bind(this)), (this.cartItems = document.querySelector("cart-items") || document.querySelector("cart-drawer-items")), this.discountInput.addEventListener("keypress", (t) => { "Enter" === t.key && this.submitDiscount(t); }); } submitDiscount(t) { t.preventDefault(), this.submitBtn.setAttribute("aria-disabled", !0); let s = window.Shopify.routes.root + "discount/" + this.discountInput.value + "?sections=" + this.dataset.section; fetch(s) .then((response) => { return response.text(); }) .then((t) => { this.cartItems.onCartUpdate(); }) .finally(() => { setTimeout(() => { let t = document.querySelector(".cart-items").dataset.discount; "false" == t ? (this.querySelector("small").style.display = "block") : (this.querySelector("small").style.display = "none"), this.submitBtn.setAttribute("aria-disabled", !1); }, 1e3); }); } } customElements.define("discount-cart", DiscountCart); </script> | data-discount="{% if cart.discount_applications.size != 0 %}true{% else %}false{% endif %}" {% render 'discount-cart' %} data-discount="{% if cart.discount_applications.size != 0 %}true{% else %}false{% endif %}" {% render 'discount-cart' %}
Copied!