How to add a Custom Discount input in Cart page on Shopify

How to Add Discount Code Field on Shopify Cart Page  

Introduction

Want to boost your Shopify store’s conversion rates and create a smoother checkout experience? One overlooked tactic is allowing customers to apply discount codes directly on the cart page before they even reach the checkout.

By default, Shopify only displays the discount code field on the checkout page. This can be inconvenient and may result in abandoned carts if users don’t see where to apply their code early on.

In this guide, you’ll learn two easy ways to add a discount code input field to your Shopify cart page using custom code or Shopify apps. Let’s dive in.

Methods to Add Discount input in Cart Page

There are 2 ways you can add discount code input in the cart page, cart drawer or mini cart. 

1. Add discount code using Custom Coding
2. Add Discount input Using Shopify Apps

Method 1: Add discount code using custom code

This is the easiest and cleanest way of adding discount code with full control. When used, add the discount code and hit apply. The user will redirect to the checkout page with the applied discount. Here is the final result, check the GIF below to see how it will look before we go through the steps.

Follow these steps to add discount input un=sing custom code.

Step 1: Go to Online Store > Themes > Edit Code

Step 2: Navigate to the cart template e.g. main-cart.liquid or cart-template.liquid or main-cart-footer.liquid depending on the theme.

Step 3: Paste this code above the checkout button 

    
        <form id="discount-form" onsubmit="applyDiscount(event)">
            <label for="discount_code">Discount Code</label>
            <input type="text" id="discount_code" name="discount" placeholder="Enter code" required>
            <button type="submit">Apply</button>
        </form>
                
        <script>
            function applyDiscount(event) {
            event.preventDefault();
            const code = document.getElementById('discount_code').value;
            if (code.trim() !== '') {
                window.location.href = `/checkout?discount=${encodeURIComponent(code)}`;
            }
            }
        </script>
    

Step 4: Add some proper css for styling for example use this

    
        <style>
            #discount-form {
                max-width: 400px;
                margin: 40px auto;
                padding: 20px;
                background-color: #f8f9fa;
                border-radius: 12px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.1);
                display: flex;
                flex-direction: column;
                gap: 12px;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            }

            #discount-form label {
                font-weight: 600;
                font-size: 16px;
                color: #333;
            }

            #discount-form input[type="text"] {
                padding: 10px 14px;
                border: 1px solid #ccc;
                border-radius: 8px;
                font-size: 15px;
                transition: border-color 0.3s;
            }

            #discount-form input[type="text"]:focus {
                border-color: #007bff;
                outline: none;
            }

            #discount-form button {
                padding: 10px 14px;
                font-size: 15px;
                font-weight: 600;
                color: white;
                background-color: #007bff;
                border: none;
                border-radius: 8px;
                cursor: pointer;
                transition: background-color 0.3s;
            }

            #discount-form button:hover {
                background-color: #0056b3;
            }
            </style>