> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Discount code block

> The Aftersell Cart Discount code block — let shoppers enter and apply a discount code before checkout.

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

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-discount-code-block-input-apply.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=ac5730766b756fdf99c2fc9f65ac202b" alt="Discount code block with input field and Apply button in the cart drawer" width="1314" height="230" data-path="images/aftersell/cart-discount-code-block-input-apply.png" />
</Frame>

## 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**](/aftersell/cart/summary-block) block, not here.

## Settings

| Setting         | What it controls                            | Default         |
| --------------- | ------------------------------------------- | --------------- |
| **Placeholder** | The input's placeholder text. Translatable. | `Discount code` |
| **Button text** | The apply button label. Translatable.       | `Apply`         |

## 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](/aftersell/cart/custom-templates) from its Code tab, which replaces this block's built-in markup with your JSX. These are the props it receives.

| Prop                   | Type                      | What it's for                                                                        |
| ---------------------- | ------------------------- | ------------------------------------------------------------------------------------ |
| `discountCodeInput`    | `string`                  | Current value of the input.                                                          |
| `placeholder`          | `string`                  | Placeholder shown in the empty input.                                                |
| `buttonText`           | `string`                  | Label for the apply button.                                                          |
| `isValidating`         | `boolean`                 | `true` while a submitted code is being checked. Disable your submit control on this. |
| `isInvalid`            | `boolean`                 | `true` when the last submitted code was rejected.                                    |
| `setDiscountCodeInput` | `(value: string) => void` | Updates the input value.                                                             |
| `handleSubmit`         | `(event: Event) => void`  | Submits the current code.                                                            |
| `isLoading`            | `boolean`                 | `true` while the cart is still doing its first fetch.                                |

<Warning>
  Wire both `setDiscountCodeInput` and `handleSubmit`. Without the first, the field can't be typed into; without the second, a code is never applied.
</Warning>

## 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](/aftersell/cart/design-settings).