Hi all,
We’re currently trying to find a way to apply discounts to the cart total. Is there a way that we can add in an area for customers to apply a discount code while in the cart?
Our issue is that customers, when using Google Pay or other services, don’t have a place to input a discount code, so they miss out on the discount.
Any thoughts on this?
Our store is: http://footyintl.com
There are two ways to implement the discount field on the cart page:
Use an App: https://apps.shopify.com/discount-on-cart-pro , https://apps.shopify.com/discount-in-cart AND https://apps.shopify.com/discount-coupon-field-in-cart-page
Or creating a new section on the cart page. If you can code or can hire a developer, then the latter is recommended because you’ll have more control over whats is been displayed.
Regards,
Sarv
I’ve seen this topic come up many times. I’m afraid the consensus is no, it’s not possible. There are many apps that offer this functionality though. I believe you can add an input field with the name of ‘discount’ in the cart form and it will pass to the checkout page, the issue lies in not being able to calculate the prices of the products and reflect them on the cart page after the coupon has been added. I believe you need to access the back end of Shopify to access the coupon codes to check and make sure it’s a correct code. If you had a set number of codes you could probably do it yourself by creating an array of the codes and checking the input against that array, but that’s not a very effective solution if you’re going to keep having new codes often. This thread seems to talk about it a bit:
https://community.shopify.com/c/Ecommerce-Marketing/Apply-Discounts-at-cart/td-p/498644/page/2
Probably would be best to get one of the apps mentioned in the thread, some are very affordable.
[FREE SOL] This might help @MitchellFly Shopify dicounter web componenthttps://www.meraki-apps.com/shopify-discounter-form
All of these apps had issues with stacked discounts and free shipping discounts, some of them even had misleading subtotal amount calculation. It took me a lot of testing until I found an app that worked so I wrote down my experiences here: https://appreviewhq.com/shopify-discount-app-review-2024. TLDR: The only app I found that fully worked with stacked discounts and free shipping was https://apps.shopify.com/discount-before-checkout, the other 5 (!) apps had various issues (see my review blog post).
I’ve found the best solution for the discount input field on the cart page or in the cart drawer. It’s a bit complex to explain in a comment, but my solution performs much better compared to using a marketplace app from the app store, as far as I can see. Check out the attached video https://screenrec.com/share/YkamSOF5sx . I didn’t use any app—everything is implemented directly in the theme, giving me full control. I have used GraphQL and Storefront API. Used cartDiscountCodesUpdate mutation. Feel free to contact me on LinkedIn: https://www.linkedin.com/in/bhshiam/
Here is the mutation Code.
mutation {
cartDiscountCodesUpdate(
cartId: "gid://shopify/Cart/Z2NwLWV1cm9wZS13ZXN0MzowMUo4OUtWM0RYQU44VjcyUFJSRkpNSDBaNg?key=d37071d35414d5f784bc04eaf4e2089f"
discountCodes: ["abo5"]
) {
cart {
id
discountCodes {
code
applicable
}
checkoutUrl
}
userErrors {
code
field
message
}
}
}
I tried something similar by pulling the cart ID from the Shopify cookie but unfortunately, liquid carts and SFAPI carts aren’t interoperable right now.
How do you get this cartID with its key?
You can get the cardID from the cookies; please re-check; it should be there. Or you can get the cardID from cart.js and save it to local storage/session storage or cookies. Make sure that you are not fetching cart.js every time because cartID remains the same for that session.
Simply create a field where users can input discount codes as usual. 
Embed the following code on the cart page:
If you do not include form=“cart”, you need to embed it within the cart form.
After that, apply your desired styles using CSS.
@MitchellFly
It worked, but it has some limitations. I have to apply the discount in the cart drawer or cart page so that I can see the changes (line items, subtotal, total price, applied discount code name etc…) in the cart drawer/cart page. Instead of that, it just redirects to me at the checkout!
yes, you’re right, the key is there as well. I missed it because it was encoded and had to use decodeURIComponent()
Seems to be working now. Thanks
