Discount code
Updated Sep 10, 20262 min read
Discount code is a text field and an Apply button in the drawer footer, so shoppers can enter a code without going to the cart page or checkout. It is on in every new cart.
There is nothing to configure beyond the two labels — the codes themselves are Shopify's.
How it works
- The shopper types a code and clicks Apply.
- Hype posts the code to Shopify's cart.
- The drawer refetches the cart and shows the result.
Applied codes appear as chips under the field, each with an × to remove it. Removing one keeps any others applied.
Shopify decides whether a code is valid, not Hype. A code Shopify does not accept — expired, misspelled, not applicable to the cart's products, or limited to a customer who isn't signed in — simply does not appear as a chip. The field does not print an error message explaining why. If a shopper insists a code should work, test it at checkout: the drawer and checkout are asking the same Shopify cart.
Text
Two editable strings:
- Input label — default
Discount code. This is the field's placeholder and its accessible name. - Button label — default
Apply.
Automatic discounts
Automatic discounts do not need a code and are not typed here. They apply on their own and show up in the totals — see Summary and checkout button, where the amount saved is shown as Discount applied.
When it is hidden
The module renders nothing while the cart is empty. A shopper cannot enter a code before there is a cart to discount.
Should you show it at all?
An empty code field is a well-known conversion leak: some shoppers leave the drawer to hunt for a coupon and don't come back. If that worries you, turn the module's switch off — the codes still work at checkout, where Shopify has its own field. Turning it on is the right call when you send codes to your own list and want them redeemed with the least friction.
Placement
The module starts in the Footer, above the summary, which is where shoppers look for it. It can be dragged anywhere, but keep it near the totals: a code field at the top of the drawer reads like an ad for a coupon the shopper does not have.
Translation
Input label and Button label carry translate buttons when your store publishes more than one language. See Translating your drawer.
Related
Was this article helpful?
Related articles
Still need help?
Start a chat and we'll pick it up right here.