Skip to main content
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 blockWhen 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: T hey’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

Descriptive alt text
<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

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

Configure these via theme-editor settings.

Web Components

Set these directly on the tag.