Styling & Data Attributes

This is the shared reference for <dkl-price> — the data-* attributes that drive its behaviour, the --dkl-* tokens that style it, and the CSS parts you can target. 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-price> 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 shadow boundary, 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 Custom CSS in Components → Styles, or a rule targeting the element.

CSS parts — Yes. The shadow DOM is identical, so ::part() works the same either way.

Token precedence

A token the block writes from a chosen setting is scoped to the block’s id (#dkl-price-{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 price itself, the compare-at and the money format come from the carrier, so only the attributes you set are listed.

data-show-savings

"true" | "false" · default: false

Show the savings badge (saving versus the original / highest price).

data-savings-format

"percentage" | "amount" · default: percentage

How the savings badge displays the saving.

data-savings-label

string · default: Save

The badge’s leading label, e.g. “Save 15%”.

data-savings-extra-label

string · default: + an extra

Connector between the sale saving and the tier saving, e.g. “Save 10% + an extra 15%”.

data-dkl-discounted

presence · default: unset

Set by the component while a tier is active — a styling hook only. Don’t author it yourself.

CSS styling tokens

CSS styling tokens for the DKL Price component

<dkl-price> has no shadow <style> — its stylesheet (loaded site-wide by the embed) is the single source, styling the host and parts. Set any token above the element (:root, the Custom CSS in Components → Styles, an inline style, or the block’s scoped rule).

--dkl-price-gap

default: 6px

Gap between price and compare-at.

--dkl-price-font-size

default: inherit

Font size for the main price and compare-at (the savings badge has its own token).

Explicit sizes don’t follow the browser’s default-font-size setting (the theme’s own size, which inherit tracks, already does). --dkl-price-font-size-mobile overrides it at ≤768px — what a component entry’s mobile size emits.

--dkl-price-font-family

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

The font family for every part. Only renders if your theme loads that font.

--dkl-price-font-weight

default: 600

Main price font weight

--dkl-price-color

default: inherit

Main price color

--dkl-price-sale-color

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

Main price while a tier is active ([data-dkl-discounted]).

--dkl-price-compare-opacity

default: 0.6

Struck-through compare-at opacity

--dkl-price-compare-font-weight

default: 400

Compare-at font weight

--dkl-price-compare-color

default: inherit

Compare-at color

--dkl-price-compare-decoration

default: line-through

Compare-at text decoration

--dkl-price-savings-font-size

default: 13px (12px at ≤768px via --dkl-price-savings-font-size-mobile)

Savings badge font size

--dkl-price-savings-font-weight

default: 600

Savings badge font weight

--dkl-price-savings-color

default: #ffffff

Savings badge text color

--dkl-price-savings-background

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

Savings badge background color

--dkl-price-savings-radius

default: var(--dkl-radius)

Savings badge corner radius

--dkl-price-savings-padding

default: 2px 8px

Savings badge padding (vertical and horizontal)

Also reads the global brand tokens --dkl-font-family and --dkl-color-text.

CSS parts

CSS parts for the DKL Price component

<dkl-price> is fully shadow DOM. Target its internals with ::part().

price

CSSPart

The main price (the discounted price while a tier is active).

compare-at

CSSPart

The struck-through compare-at wrapper.

compare-at-amount

CSSPart

The compare-at number.

savings

CSSPart

The savings line wrapper.

savings-label

CSSPart

The savings label text.

savings-amount

CSSPart

The savings amount.

Examples

Style via :root tokens

:root {
  --dkl-price-sale-color: #c0392b;
  --dkl-price-compare-opacity: 1;
  --dkl-price-compare-color: #888;
}

Style via ::part()

dkl-price::part(price) {
  font-size: 1.5rem;
  font-weight: 700;
}

Data attribute overrides for web component

<dkl-price
  data-show-savings="true"
  data-savings-format="amount"
  data-savings-label="You save"
></dkl-price>

Next steps

App blockConfigure these via theme-editor settings.

Web ComponentsSet these directly on the tag.