Styling & Data Attributes

The data-* attributes and CSS styling tokens for <dkl-discount-badge>

This is the shared reference for <dkl-discount-badge> — the data-* attributes that drive its behaviour and the --dkl-badge-* tokens that style it. The app block settings map onto these; on a web component you set them directly.

Using this reference with the app block

When you place the DK: Discount Badge app block, it renders its own <dkl-discount-badge> and writes these values for you — so what applies depends on the kind of override:

Data attributes — No: The block sets every data-* itself, from its App block settings and the resolved discount. Adding data-* to your own markup has no effect on a block instance; they’re the configuration surface for the web component only. To change block behaviour, use its settings.

CSS styling tokens — Yes: They’re CSS custom properties that inherit through to the host, so they style a block exactly like a web component. The block’s colour / radius / spacing / font pickers just write the matching tokens into a scoped <style> rule for you. Any token not exposed as a setting you can still set yourself from your own CSS — :root, the embed’s Custom CSS field, or a rule targeting the block.

This component is light-DOM, host-only — the host element is the badge. There’s no shadow DOM, so there are no CSS parts: style the host element directly (dkl-discount-badge { … }).

Token precedence. A token the block writes from a chosen setting is scoped to the block’s id (#dkl-badge- {block.id}), which is more specific than a :root rule — so to override that token, either change the editor setting or match the specificity (target the block element). Tokens the block leaves unset fall back to your CSS or the built-in default as normal.

Data attributes

All optional — the carrier (or your own Liquid) supplies them. Set one to override.

data-discount-type · "percentage" | "fixed" | "highest" · default: "percentage"

Which amount to show — the percent, the cents, or whichever saves more. highest is computed against the current variant price (percent × price vs the fixed cents); ties favour the percentage, and a missing side falls back to the other.

data-amount-percent · number (decimal percent) · default: "carrier (max_reward_percent)"

The percentage amount (rounded for display).

data-amount-cents · int (cents) · default: "carrier (max_reward_cents)"

The fixed amount (money-formatted).

data-base-price-cents · int (cents) · default: "carrier (the variant's price)"

The variant price; drives the highest comparison (recomputed on variant change).

data-money-format · string · default: "carrier (shop.money_format)"

Money format for the fixed amount.

data-label · string · default: "Save up to [amount]"

Label template; [amount] is replaced with the formatted amount.

The component hides the host only when it can compute that there’s nothing to show and there’s no server-rendered text already. Without the data-* attributes it leaves the server text alone.

CSS styling tokens

CSS styling tokens for the DKL Discount Badge component

The stylesheet (loaded site-wide by the embed) styles the host element directly — the host is the badge, so target dkl-discount-badge { … } (there are no CSS parts). Set any token above the element — :root, the embed’s Custom CSS, an inline style, or the block’s scoped rule.

--dkl-badge-background · default: "var(--dkl-color-accent)"

Badge background.

--dkl-badge-color · default: "#ffffff"

Badge text.

--dkl-badge-radius · default: "var(--dkl-radius)"

Badge corners.

--dkl-badge-padding-block · default: "0.175rem"

Vertical padding.

--dkl-badge-padding-inline · default: "0.5rem"

Horizontal padding.

--dkl-badge-font-size · default: "0.75rem"

Badge text size.

--dkl-badge-font-weight · default: "600"

Badge text weight.

The DK: Discount Badge block exposes Background color, Text color, Corner radius, Vertical / Horizontal padding, Font size, and Font weight settings that feed the matching tokens via a scoped <style> rule.

Examples

Restyle a single badge inline

<dkl-discount-badge
  style="
    --dkl-badge-background: #111;
    --dkl-badge-color: #fff;
    --dkl-badge-radius: 999px;
    --dkl-badge-font-size: 0.85rem;
    --dkl-badge-font-weight: 700;
  "
></dkl-discount-badge>

Style the host via :root tokens

:root {
  --dkl-badge-background: #111;
  --dkl-badge-color: #fff;
  --dkl-badge-radius: 999px;
}

Target the host element directly

dkl-discount-badge {
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

Next steps

App block

Configure these via theme-editor settings.

Web Components

Set these directly on the tag.