Web Component

Drop <dkl-discount-badge> into your theme markup and configure it with data-* attributes

A web component is the <dkl-discount-badge> tag written directly into your theme’s Liquid. On a product page it needs zero attributes — it paints from the page product’s carrier and renders the badge.

Usage

On a product page, add the <dkl-discount-badge> web component — it renders the primary product’s badge:

<dkl-discount-badge></dkl-discount-badge>

Beta Limitation for Web Components: Single Product Context

During beta of the DKL Live Components, a Web Component is only recommended for product pages / where the products shown on the page are static on page load.

A Web Component paints from a server-rendered carrier, which the dkl_core embed pre-renders only on product pages, and only for that page’s product. So a Web Component can’t render on a collection page — no carriers are emitted there at all (each card is a different product) — nor for product instances loaded in after page load via the Section Rendering API / Ajax. For product cards and these cases, use the app block instead, which renders inline per card (resolving each card’s own product). See App blocks vs. Web Components.

Reacting to changes

<dkl-discount-badge> emits no events — it re-renders its own text in place on a variant change. To run your own code when the badge updates, watch the element with a MutationObserver — see React to badge updates in the examples below.

Examples

For the full list of data-* attributes you can set, see Styling & Data Attributes.

Whichever discount saves more

<dkl-discount-badge data-discount-type="highest"></dkl-discount-badge>

Override attributes + tokens

<dkl-discount-badge
  data-discount-type="highest"
  data-label="[amount] off today"
  style="
    --dkl-badge-background: #111;
    --dkl-badge-color: #fff;
    --dkl-badge-radius: 999px;
    --dkl-badge-font-size: 0.85rem;
  "
></dkl-discount-badge>

React to badge updates

// <dkl-discount-badge> emits no events — it re-renders its own text in place
// on variant change. Observe each badge to react to those updates.
// Handles any number of badges on the page.
document.querySelectorAll('dkl-discount-badge').forEach((badge) => {
  new MutationObserver(() => {
    console.log('Badge now reads:', badge.textContent.trim())
  }).observe(badge, { childList: true, characterData: true, subtree: true })
})

Next steps

Styling & Data Attributes

Every data-* attribute and --dkl-badge-* token.

App block

The no-code, theme-editor placement.