Applying discount codes in the cart (prior to checkout)

Technical Q&A

Topic summary

Applying manual discount codes before checkout in Shopify’s cart/drawer and via AJAX.

  • Core limitation: the cart AJAX API (/cart.js) doesn’t expose or apply discount codes. Discounts appear only at checkout. There’s still no native AJAX endpoint to apply a code.

Workable approaches:

  • Add an input field named ‘discount’ to the cart form that posts to checkout; can also set a hidden preset code. Multiple codes can work via /checkout?discount=CODE1,CODE2.
  • Session tricks: fetch(‘/discount/CODE’) or fetch(‘/checkout?discount=CODE’) to apply to the session; discount_code cookie also works (single code). Older methods like /cart?discount and hidden iframe now fail (CSP or deprecated).
  • Storefront API: checkoutDiscountCodeApplyV2 exists but doesn’t integrate with /cart.js. Newer approach: Storefront Cart API cartDiscountCodesUpdate mutation confirmed working in-theme (no app), with full control.
  • Apps: several recommended/used. Noted options include Discount in Cart, Discount on Cart Pro, and (per a 2024 review) Discount Before Checkout as the only one reliably handling stacked + free shipping discounts; others had issues.

Caveats:

  • Validating applicability in cart is hard (some rules depend on checkout data). Themes may cache cart views, showing stale discounts. Manual discounts can now render in cart via Liquid discount objects.

Status: No native cart.js solution; viable paths are Storefront API Cart mutations or specialized apps. Code snippets and a demo video are central to implementation.

Summarized with AI on December 18. AI used: gpt-5.
25

This isn’t with automatic discounts, but it seems like some newer versions of these Shopify-provided themes will show you any cart-level discounts that you may have applied during checkout in the cart view. For example, in this view YUM10 isn’t an automatic discount, but one I added during checkout and then clicked back to the store to continue shopping. In my experience, if I then go back to checkout, remove YUM10, then click from the checkout back to “Cart”, the old discount is still there, even if reloading the page manually. I thought this was a bug with our plugin but it turns out this behavior exists even with no plugins installed.

Anyway, would love to hear if you’ve noticed any difference between the /checkout?discount=CODE and the /discount/CODE fetch techniques. Both seem to work equally well in my case.

cart-discount.png
cart-discount.png523×563 42.7 KB