Here’s how to let customers enter a Shopify discount code before checkout on the cart page, helping reduce abandoned carts and boost conversions for your Shopify store.
(If you like this, you might also like our app, Regios Discounts).
How to Let Customers Enter a Shopify Discount Code Before Checkout (Cart Page)
With Shopify’s Summer Editions ‘25 update, you can now apply discount codes directly via the cart/update.js endpoint, without relying on the old /discount/CODE links. This makes it easy to let customers enter a discount code on the cart page and instantly apply it.
After applying the code, you can use the AJAX Cart API to verify the discount was applied and show a success or error message in real time.
Step 1: Add the HTML Code
To begin, you’ll need to add a simple form to your cart page where customers can enter their discount codes. If you’re using the Dawn theme, insert this HTML into your main-cart-footer.liquid file within the <div class="cart__blocks">, before the {% for block in section.blocks %}:
<form id="cart-discount-form" style="text-align: right">
<div>
<label for="discount-code-input">Enter a discount code:</label>
</div>
<div style="display: flex">
<input id="discount-code-input" placeholder="Discount code" required />
<button type="submit">Apply</button>
</div>
<p id="discount-code-success" style="color: green; display: none;"></p>
<p id="discount-code-error" style="color: red; display: none;"></p>
</form>
Step 2: Add the JavaScript Code
Now, add this JavaScript to make the discount field functional. It checks if the discount is successfully applied using Shopify’s AJAX Cart API. Place this script in a <script> tag just before the {% schema %} in your main-cart-footer.liquid file:
<script>
document.addEventListener('DOMContentLoaded', function () {
const discountCodeForm = document.querySelector('#cart-discount-form');
const discountCodeInput = document.querySelector('#discount-code-input');
const discountCodeSuccess = document.querySelector('#discount-code-success');
const discountCodeError = document.querySelector('#discount-code-error');
// / Hide both success and error messages initially
const hideMessages = () => {
discountCodeSuccess.style.display = "none";
discountCodeError.style.display = "none";
};
// Function to display error messages
const showError = (msg) => {
discountCodeError.textContent = msg;
discountCodeError.style.removeProperty('display');
};
// Function to display success messages
const showSuccess = (msg) => {
discountCodeSuccess.textContent = msg;
discountCodeSuccess.style.removeProperty('display');
};
// Request data from the server. Throw a labeled error if it fails.
const fetchOrShowError = async (label, url) => {
const localeAwareUrl = window.Shopify.routes.root + url;
const response = await fetch(localeAwareUrl);
if (!response.ok) {
throw new Error(`${label} failed: ${response.status} ${response.statusText}`);
}
return response;
};
// New helper for applying discounts via update.js
const applyDiscount = async (code) => {
const response = await fetch(window.Shopify.routes.root + 'cart/update.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ discount: code })
});
if (!response.ok) {
throw new Error(`Discount application failed: ${response.status} ${response.statusText}`);
}
return response;
};
// Check the cart to see if a specific discount code has been applied.
const checkForDiscount = (cart, code) => {
// Check for order-level discounts
if (cart.cart_level_discount_applications
&& cart.cart_level_discount_applications.some((app) => app.title === code)) {
return true;
}
// Check for line item discounts
if (cart.items.some((item) => item.discounts?.some((discount) => discount.title === code))) {
return true;
}
return false;
};
// Intercept the form being submitted and apply the discount code.
discountCodeForm.onsubmit = async (e) => {
e.preventDefault();
hideMessages();
// Field must not be empty
const code = discountCodeInput.value.trim();
if (!code) {
showError('Enter a discount code');
return;
}
try {
await applyDiscount(code);
// Check if the discount was actually applied instead just assuming it
// succeeded.
const cartResponse = await fetchOrShowError('Cart fetch', 'cart.js');
const cart = await cartResponse.json();
if (checkForDiscount(cart, code)) {
showSuccess('Discount applied! Reloading the page...');
location.reload();
} else {
showError('Enter a valid discount code');
}
} catch(e) {
showError(e);
}
};
});
</script>
Caveats
- This solution doesn’t automatically integrate with third-party cart drawers. This is because you can’t edit the code of 3rd party app blocks/app embeds.
- You’ll need to style the discount code field yourself with CSS. to match your store’s branding. What we’ve provided here is pretty barebones.
- When possible, use automatic discounts instead of manual codes. You can also display them on product pages to improve conversion rate even more than a discount code field in the cart could. This isn’t available in base Shopify, but our app provides this.
| Method | Pros | Cons |
|---|---|---|
| Native Shopify (checkout only) | Built-in, no coding needed | Customers can’t apply before checkout |
| Custom Cart Code Field (this) | Free, works with all themes, easy to set up | Doesn’t support third-party cart drawers |
| Discount Apps (e.g., Regios) | Automatic, can show discounts earlier | Monthly fee, may need setup |
Looking for an app to do this?
- While our app, Regios Discounts, does not currently support this feature directly, there is an open feature request that we encourage you to upvote and comment on if you want us to add this functionality. Check it out here.
Frequently Asked Questions About Discount Codes Before Checkout
Can I automatically apply discount codes before checkout in Shopify?
Yes, you can now apply codes using Shopify’s new cart/update.js endpoint (introduced in Editions ’25) or apps, so customers don’t need to wait until checkout.
How do I add a discount code field in Shopify’s Dawn theme?
Edit main-cart-footer.liquid to add an input field and a small JavaScript snippet (see steps above). This lets shoppers apply codes directly on the cart page.
Will this work with third-party cart drawers?
No. Third-party cart drawers can’t be edited directly, but you can still link to your /cart page where the discount field is added.
Is there an easier way to offer discounts?
Yes. Automatic discounts (like those from Regios Discounts) can display on product pages and cart automatically, removing friction entirely.
Conclusion
This simple trick lets your customers use discount codes earlier, making shopping smoother and helping you sell more. Try it out and see the difference it makes in your store!
For even more discount options, check out our app, Regios Discounts—the most comprehensive discounting tool on Shopify.