Discount Lines
Lists each applied cart discount as a labeled row with its amount. Hidden when there are no discounts.
Last updated
How to use
Place this component near your cart subtotal or order summary.
Configure
Linefor each row's direction, gap, alignment, and distribution.Set
Formatfor the currency symbol, currency code, and decimal display.Style
Code FontandAmount Font, and set the amount↳ Prefix(defaults to-).Use
Previewto render 1–5 sample rows on canvas while you design — live discount data replaces it once the page is published.
One row per applied discount
Discount Lines lists every applied discount — including shipping discounts — as its own row, with the code or label on one side and the amount saved on the other (for example, SAVE10 -$10.50). It's built to sit alongside Discount Chips, which shows the applied codes as removable chips: Chips tells the customer which codes are active, Discount Lines shows exactly how much each one saved.
When the cart has no active discounts, the component simply doesn't appear — there's no empty state to design around.
Styling rows and previewing them on canvas
Style the code/label text independently from the amount using Code Font (with its own color and text-transform) and Amount Font (with its own color and text-transform). The ↳ Prefix field controls the text placed before the amount, and defaults to -.
Amounts format automatically using the customer's active market currency and locale on the live site — the currency options inside Format are for canvas preview only. Since there's no live cart to preview against on canvas, use Preview to render 1–5 mock discount rows so you can style the layout before any real discounts exist.