Add a discount code box to the cart drawer

Turn on the Discount code card in the cart editor. Shoppers get a code box with an Apply button in the cart footer. Codes they apply carry on to checkout.

Set it up

1. In Shopify admin, open Apps → Section Store → Cart Drawer.
2. Click Edit on your cart.
3. Under Footer, find the Discount code card. If it isn't there, click Add block and pick Discount code.
4. Turn on the card's switch. A block you just added is already on.
5. Click the card to open it.
6. Set Title, Placeholder and Button text.
7. Set Error message. The default is "The coupon code is invalid."
8. Pick Collapsed by default or Expanded by default. Make it collapsible is ticked by default. Untick it to keep the box open.
9. Click Save.
10. Test a code on your storefront. You see "Discount applied." and a tag with the code.

How it works

• A new code joins the codes already applied. Shopify decides which ones combine.
• Each code shows as a tag with an x to remove it.
• Order discounts from the reward bar show as tags like "- 10%". Shoppers can't remove those.
• When the cart empties, we clear the codes.

What shoppers can see

• "Discount applied."
• "Discount removed."
• "Enter a discount code."
• Your Error message, for a code that doesn't work.
• "Discount applied, but some free gifts are now charged."

If it doesn't work

• A good code shows the error message: Shopify refused it. Check that the code is active and that the cart meets its rules.
• A code removes a reward: the code doesn't combine with the cart's discount. See the article below.

Related

• Do cart rewards work with discount codes?
• Show the discount total in the cart drawer

Also searched as: coupon box, coupon code field, promo code box, voucher code, discount field in cart, apply code in cart, enter discount code in drawer, discount box missing, coupon code is invalid, remove discount tag, discout code, cupon code