Styling & Data Attributes

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.

Note

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 blockConfigure these via theme-editor settings.

Web ComponentsSet these directly on the tag.