Styling & Data Attributes

This is the shared reference for <dkl-sale-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 a component

A component built in the admin renders its own <dkl-sale-badge> and writes these values for you, so what applies depends on the kind of override.

Data attributes — No. The component sets every data-* itself, from its settings and the resolved discount. Adding them to your own markup has no effect on a component instance; they’re the configuration surface for the web component only. To change how a placed component behaves, edit it in Discount Kit → Components.

CSS styling tokens — Yes. They’re custom properties that inherit through the light DOM, so they style a component instance exactly like a bare tag. The component’s editor just writes the matching tokens into a scoped <style> rule. Any token the editor doesn’t expose you can still set from your own CSS — :root, the global entry’s Custom CSS, or a rule targeting the element.

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

The attributes you set on the tag. Everything else the badge reads — the sale’s offer, the variant’s price and compare-at, the money format — the carrier supplies, so it isn’t listed here.

data-component

string · default: none

The handle of a component built in the admin. Its sale, styling and text come with it.

data-discount-id

string · default: none

The sale’s metaobject handle; the discount- prefix is optional. Use this instead of data-component for the built-in look. One of the two is required — a tag with neither renders nothing.

data-label

string · default: Save up to [amount]

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

data-additional-message

string · default: none

A second line on the badge, sharing its background. Absent or empty renders no element.

data-message-position

"below" / "above" · default: below

Where the additional message sits relative to the label.

data-width

"fit" / "full" / "max" · default: fit

The component’s width: its natural size, the full column, or the full column up to --dkl-badge-max-width — the last stays fluid, so a narrow screen shrinks it rather than overflowing.

data-alignment

"left" / "center" / "right" · default: left

How the label and message sit inside the component. Only visible when the component is wider than its text (full or max).

Note

The badge hides itself when the sale has nothing to show for the current variant — one the sale doesn’t reach, or one it refuses.

CSS styling tokens

CSS styling tokens for the DKL Sale Badge component

The stylesheet (loaded site-wide by the embed) styles the host element directly — the host is the badge, so target dkl-sale-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. Sizes are multiplied by --dkl-text-scale, so they follow the shopper’s browser font-size setting.

--dkl-badge-background

default: var(--dkl-color-accent)

Badge background — the whole component, message included.

--dkl-badge-color

default: #ffffff

Badge text.

--dkl-badge-radius

default: var(--dkl-radius)

Badge corners.

--dkl-badge-margin-top / --dkl-badge-margin-bottom

default: 0

Space above and below the component.

--dkl-badge-padding-block

default: 4px (2px at ≤ 768px)

Vertical padding.

--dkl-badge-padding-inline

default: 8px

Horizontal padding.

--dkl-badge-gap

default: 4px

Space between the label and the additional message.

--dkl-badge-max-width

default: 200px

The cap when data-width="max".

--dkl-badge-font-size / --dkl-badge-font-size-mobile

default: 12px

Label text size; the -mobile value applies at ≤ 768px.

--dkl-badge-font-weight

default: 600

Label text weight.

--dkl-badge-font-family

default: inherit (→ --dkl-font-family)

Label and message font — only renders if the theme loads that font.

--dkl-badge-message-font-size / --dkl-badge-message-font-size-mobile

default: 12px

Additional message size; the -mobile value applies at ≤ 768px.

--dkl-badge-message-color

default: inherit (→ --dkl-color-text)

Additional message colour.

A badge component’s colours, spacing, corner radius, width, sizes and weight feed the matching tokens via a scoped <style> rule.

Examples

Restyle a single badge inline

<dkl-sale-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-sale-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-sale-badge {
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

Next steps

App blockConfigure these via theme-editor settings.

Web ComponentsSet these directly on the tag.