Skip to main content
DKL Discount Badge component
<dkl-discount-badge> is a theme-agnostic “max discount” 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 product’s max_reward_percent / max_reward_cents metafields:
  • max_reward_percent — a decimal percent, rounded to a whole number (19.6 → 20%);
  • max_reward_cents — an integer, formatted as money via the shop’s money format.
Which one shows is chosen by data-discount-type — the percent, the cents, or highest (whichever saves more). The visible text is server-rendered, so it paints immediately; the component is an optional enhancement that re-composes the label and re-picks the highest option on a variant change.

​
On this component

App block

Add DK: Discount Badge in the theme editor and configure it with settings — no code. The only way to render in collection product cards.

Web Components

Drop <dkl-discount-badge> straight into your theme’s Liquid and configure with data-*.

Styling & Data Attributes

The data-* attributes and --dkl-badge-* styling tokens shared by both.

Events

The mount / unmount lifecycle events each instance emits.
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.
The badge is otherwise standalone — it reads the product metafields server-side and re-picks the highest option on the host theme’s variant-change events. 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.