Loading playground
Overview
CouponBox displays a coupon code on PDPs and inside PopUpPromotion. Shoppers can copy the code with one click; the component fires a success toast on copy and switches to an "applied" presentation once the code is active on the cart.
The clear icon picks up the surrounding theme via the --icon-color CSS custom property, so you can recolor it without overriding component styles.
Auto-import tag: <LCouponBox>.
On the Product Detail page
BlockProductDetailCouponBox wraps CouponBox for placement in the Product Detail section's content slot. Editors configure the text, code, optional discount badge (discountText), and icon, and a variant toggle (default / promotion-code) switches the presentation. The block hard-wires action="copy", so on the PDP the box always copies the code to the clipboard rather than applying it to the cart.
Key Business & UX Benefits
- One-click copy removes the friction of manually typing a code, lifting redemption rate on PDP and promotion campaigns.
- Applied-state presentation confirms the discount is live, removing the "did it work?" doubt that pushes shoppers to chat or email support.
- Success toast confirms the copy landed in the clipboard, so shoppers know they can paste it into the checkout field.
- Themeable icon color via CSS custom property lets brand teams match the box to seasonal campaign palettes without component overrides.
Feature List
- One-click copy-to-clipboard so shoppers never retype a promo code at checkout
- applied prop swaps to a confirmed presentation once the code is active on the cart
- Built-in success toast confirms the copy landed in the clipboard
- Themeable icon color via the --icon-color CSS custom property for seasonal campaign palettes
- Drops into PDPs and PopUpPromotion from the same component, keeping promo treatment consistent
API Reference
| Prop | Default | Type |
|---|---|---|
textrequired | string | |
coderequired | string | |
icon | shopping/discount-1 | string |
discountText | string | |
action | copy | "apply" | "copy" |
applied | boolean | |
variant | default | CouponBoxVariant ("default" | "promotion-code") |
| Event | Type |
|---|---|
apply | (event: "apply", code: string): void |
Changelog
New BlockProductDetailCouponBox wraps CouponBox for placement in the Product Detail section's content slot. Editors configure the text, code, optional discount badge, and icon; the block hard-wires action="copy" so shoppers copy the code to the clipboard.