Discount Chips
Shows one removable chip for each discount code applied to the cart.
Last updated
How to use
Create a chip component (tag, row — whatever shape fits your cart).
Inside the chip, add Discount Chip Value for the code text and Discount Chip Remove as the remove button instance.
Place this component in the cart and connect your chip design to
⦿ Chip.Configure
Layout— it defaults to a horizontal Stack with wrap.
Pair it with Discount Input so customers have a way to apply codes in the first place.
Building the chip design
Two connect-slot components live inside your chip design and read their data from the chip they're nested in:
| Purpose |
|---|---|
Discount Chip Value | Renders the code string — styled via Font, Color, and Transform. |
Discount Chip Remove | Connected remove button — clicking it removes that code. |
Both must live inside the design component connected to ⦿ Chip — they read from the surrounding chip rather than from their own controls. One chip template is replicated for every applied code; per-code styling isn't supported.
Layout and the canvas preview
Layout controls direction, gap, wrap, padding, background, and radius for the container that holds the chips — Stack or Grid, defaulting to horizontal Stack with wrap. Since there are no live discount codes to preview on canvas, Preview renders 1–5 sample chips directly on canvas, each with a distinct mock code (SAVE10, FREESHIP, and others), so you can style the layout before connecting a chip design. On the live site the component hides entirely when no codes apply — and a code that no longer applies to the cart doesn't show as a chip.
How applied codes become chips
Discount Chips reads the currently applied codes, clones the connected chip design once per code, and wraps each clone so its nested Discount Chip Value and Discount Chip Remove know which code they represent. Removing a chip is disabled while a discount change is already in progress, and an invalid code is never rendered as a chip in the first place.