Sale Badge

DKL Sale Badge component

<dkl-sale-badge> is a theme-agnostic sale badge — e.g. Save up to 20% or Save up to $5.00. It’s a light-DOM component: the label is the element’s own text content (no shadow DOM), and the host element itself is styled as the badge. That keeps it dropping cleanly into a product card and painting from server-rendered markup.

The amount comes from the sale itself. A badge is built for one sale discount in Discount Kit → Components, and on the storefront it reads that sale’s row out of the shop’s offer index — so it shows what that sale takes off this product, and nothing else’s discount can raise it.

Where the sale doesn’t reach the product, the badge renders nothing. It also hides itself when the shopper moves to a variant the sale refuses: one that’s already marked down when the sale skips marked-down lines, or one whose metafield-sourced value can’t be read.

A badge always names a sale

The badge renders for one sale and nothing else. A bare <dkl-sale-badge> needs either data-component (a component you built in the admin, which carries its sale) or data-discount-id (the sale itself, with the built-in look). A tag with neither has no sale to read and renders nothing.

On this component

App blockBuild the badge in the admin and place it with DK: Component. The only way to render in collection product cards.

Web ComponentsDrop dkl-sale-badge straight into your theme's Liquid and configure with data-*.

Styling & Data AttributesThe data-* attributes and --dkl-badge-* styling tokens shared by both.

EventsThe mount / unmount lifecycle events each instance emits.

Note

Both placements need the Discount Kit Live app embed enabled, and render identically — the same defaults back both. See App blocks vs. Web Components for how to choose.

Note

The badge reads its data server-side, then re-evaluates on the host theme’s variant-change events — re-picking the highest option, and dropping the sale where the new variant is one it refuses. It emits no discount/state event of its own, only the mount / unmount lifecycle events.

Accessibility

• Real text. The badge is plain, server-rendered text (e.g. “Save up to 20%”) — not an image or a CSS background — so screen readers read it verbatim and it scales with browser zoom and text-size settings.
• No empty announcements. When nothing applies, the component hides the host entirely rather than leaving an empty element for assistive tech to encounter.
• Contrast. Because the badge colours are merchant-configurable, keep --dkl-badge-color and --dkl-badge-background at a sufficient contrast ratio when restyling.