Web Component

A web component is the <dkl-sale-badge> tag written directly into your theme’s Liquid. On a product page it paints from a carrier the embed pre-renders for the page’s product, one per sale that reaches it.

Usage

A badge always names a sale, so the tag needs one of two attributes. Name a component you built in the admin, which brings its sale and its styling with it:

<dkl-sale-badge data-component="sale-badge-1478638797012-1"></dkl-sale-badge>

Or name the sale directly for the built-in look. The discount- prefix is optional, and you can place one tag per sale to show several:

<dkl-sale-badge data-discount-id="1478638797012"></dkl-sale-badge>

A tag with neither has no sale to read and renders nothing.

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-sale-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.

A sale badge with its own message

<dkl-sale-badge
  data-component="sale-badge-1478638797012-1"
  data-additional-message="Ends Sunday"
></dkl-sale-badge>

Override attributes + tokens

<dkl-sale-badge
  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-sale-badge>

React to badge updates

// <dkl-sale-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-sale-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 AttributesEvery data-* attribute and --dkl-badge-* token.

App blockThe no-code, theme-editor placement.