The Discount code block is an input where shoppers can enter and apply a promo code in the cart, so they see the discount reflected before committing to checkout.
Behavior
- On apply, the code is trimmed, upper-cased, and submitted to Shopify. Because Shopify accepts the request whether or not the code is valid, the block then re-checks the cart to confirm the code actually applied.
- Valid → the field clears and the discount applies.
- Invalid → the block shows “Invalid discount code.”
- How a code stacks with other discounts (automatic discounts, other codes) is handled entirely by Shopify — the block just applies the code.
- Applied codes are shown in the Summary block, not here.
Settings
Placement and limits
- Region: body or bottom.
- Maximum: 1 per cart state — the filled cart and the empty cart each get their own allowance.
- State: both filled and empty.
- Not added by default. Not locked — you can remove or hide it.
Custom template
Supports a custom template from its Code tab, which replaces this block’s built-in markup with your JSX. These are the props it receives.
Wire both setDiscountCodeInput and handleSubmit. Without the first, the field can’t be typed into; without the second, a code is never applied.
Design
Style this block with its Design section in the settings panel. These are per-block overrides that layer on top of your global design and fall back to it when blank.
What are design settings? Learn more here: Design settings.
