Skip to main content
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 blockWhen 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

Image highlighting the 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.