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 the app block

When you place the DK: Price app block, it renders its own <dkl-price> 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 the shadow boundary, so they style a block exactly like a web component. The block’s colour / radius / spacing pickers just write the matching tokens into a scoped <style> rule for you. Any token not exposed as a setting (e.g. --dkl-price-gap, --dkl-price-font-size) you can still set yourself from your own CSS — :root, the embed’s Custom CSS field, or a rule targeting the block.

CSS parts — Yes: The shadow DOM is identical, so ::part() works the same on a block or a web component.

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 — on a web component the carrier supplies them by default. Set one to override.

data-base-price-cents

int (cents) · default: carrier (the variant's price)

The regular price — the component’s base amount.

data-compare-at-cents

int (cents) · default: carrier (set only when on sale)

The native sale compare-at price. Struck through when no tier is active.

data-money-format

string · default: carrier (shop.money_format)

Money format string. Falls back to Shopify.formatMoney, then Intl.

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 embed’s Custom CSS, an inline style, or the block’s scoped rule).

--dkl-price-gap

default: 0.4rem

Gap between price and compare-at.

--dkl-price-font-size

default: inherit

Font size for all price entities (main price, compare-at, savings badge)

--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: 0.8em

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: 0.125rem 0.5rem

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.