Skip to main content
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.
Discount code block with input field and Apply button in the cart drawer

​
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.