Discount codes in Cart page
Wow Shopify com IA

Adding Discount Codes to the Cart Page in Shopify

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Please note that the code may not be compatible with any currently installed apps.

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.

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!
Voltar para o blogue

Deixe um comentário

Checkout The FREE SHopify Tools

Shopify FREE tools

  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;
<discount-cart data-cart-quantity="{{ cart.items[0].quantity }}" data-section="{{ }}">
  <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">
            viewBox="0 0 66 66"
            <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
    <small style="display: none">⚠️ Discount code does not exist!</small>
  class DiscountCart extends HTMLElement {
    constructor() {
        (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=" +
       .then((response) => {
        return response.text();
        .then((t) => {
        .finally(() => {
          setTimeout(() => {
            let t = document.querySelector(".cart-items");
            "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);