> ## Documentation Index
> Fetch the complete documentation index at: https://discountkit.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Styling & Data Attributes

> The data-* attributes, CSS styling tokens, and CSS parts for <dkl-price>

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](/components/price/app-block) settings map onto these; on a [web component](/components/price/web-component) you set them directly.

<Note>
  **Using this reference with the app block**

  When you place the [**DK: Price** app block](/components/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](/components/price/web-component) only. To change block behaviour, use its [settings](/components/price/app-block).

  **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.
</Note>

<Tip>
  **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.
</Tip>

## Data attributes

All optional — on a web component the carrier supplies them by default. Set one to override.

<ParamField body="data-base-price-cents" type="int (cents)" default="carrier (the variant's price)">
  The regular price — the component's base amount.
</ParamField>

<ParamField body="data-compare-at-cents" type="int (cents)" default="carrier (set only when on sale)">
  The native sale compare-at price. Struck through when no tier is active.
</ParamField>

<ParamField body="data-money-format" type="string" default="carrier (shop.money_format)">
  Money format string. Falls back to `Shopify.formatMoney`, then `Intl`.
</ParamField>

<ParamField body="data-show-savings" type="&#x22;true&#x22; | &#x22;false&#x22;" default="false">
  Show the savings badge (saving versus the original / highest price).
</ParamField>

<ParamField body="data-savings-format" type="&#x22;percentage&#x22; | &#x22;amount&#x22;" default="percentage">
  How the savings badge displays the saving.
</ParamField>

<ParamField body="data-savings-label" type="string" default="Save">
  The badge's leading label, e.g. "**Save** 15%".
</ParamField>

<ParamField body="data-savings-extra-label" type="string" default="+ an extra">
  Connector between the sale saving and the tier saving, e.g. "Save 10% **+ an extra** 15%".
</ParamField>

<ParamField body="data-dkl-discounted" type="presence" default="unset">
  **Set by the component** while a tier is active — a styling hook only. Don't author it yourself.
</ParamField>

## CSS styling tokens

<Frame caption="CSS styling tokens for the DKL Price component">
  <img src="https://mintcdn.com/discountkit/qPmR0fAEpbjKUETr/images/components/dkl-price-css-tokens.jpeg?fit=max&auto=format&n=qPmR0fAEpbjKUETr&q=85&s=3b3f5fb32b0f642ad4ca9689368f7291" alt="Descriptive alt text" width="1600" height="1032" data-path="images/components/dkl-price-css-tokens.jpeg" />
</Frame>

`<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).

<ParamField body="--dkl-price-gap" default="0.4rem">
  Gap between price and compare-at.
</ParamField>

<ParamField body="--dkl-price-font-size" default="inherit">
  Font size for all price entities (main price, compare-at, savings badge)
</ParamField>

<ParamField body="--dkl-price-font-weight" default="600">
  Main price font weight
</ParamField>

<ParamField body="--dkl-price-color" default="inherit">
  Main price color
</ParamField>

<ParamField body="--dkl-price-sale-color" default="var(--dkl-price-color)">
  Main price while a tier is active (`[data-dkl-discounted]`).
</ParamField>

<ParamField body="--dkl-price-compare-opacity" default="0.6">
  Struck-through compare-at opacity
</ParamField>

<ParamField body="--dkl-price-compare-font-weight" default="400">
  Compare-at font weight
</ParamField>

<ParamField body="--dkl-price-compare-color" default="inherit">
  Compare-at color
</ParamField>

<ParamField body="--dkl-price-compare-decoration" default="line-through">
  Compare-at text decoration
</ParamField>

<ParamField body="--dkl-price-savings-font-size" default="0.8em">
  Savings badge font size
</ParamField>

<ParamField body="--dkl-price-savings-font-weight" default="600">
  Savings badge font weight
</ParamField>

<ParamField body="--dkl-price-savings-color" default="#ffffff">
  Savings badge text color
</ParamField>

<ParamField body="--dkl-price-savings-background" default="var(--dkl-color-success)">
  Savings badge background color
</ParamField>

<ParamField body="--dkl-price-savings-radius" default="var(--dkl-radius)">
  Savings badge corner radius
</ParamField>

<ParamField body="--dkl-price-savings-padding" default="0.125rem 0.5rem">
  Savings badge padding (vertical and horizontal)
</ParamField>

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

## CSS parts

<Frame caption="CSS parts for the DKL Price component">
  <img src="https://mintcdn.com/discountkit/qPmR0fAEpbjKUETr/images/components/dkl-price-css-parts.jpg?fit=max&auto=format&n=qPmR0fAEpbjKUETr&q=85&s=baf99924f9a446443c6b3634d0ecdb51" alt="Image highlighting the CSS parts for the DKL Price component" width="1600" height="886" data-path="images/components/dkl-price-css-parts.jpg" />
</Frame>

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

<ParamField body="price" type="CSSPart">
  The main price (the discounted price while a tier is active).
</ParamField>

<ParamField body="compare-at" type="CSSPart">
  The struck-through compare-at wrapper.
</ParamField>

<ParamField body="compare-at-amount" type="CSSPart">
  The compare-at number.
</ParamField>

<ParamField body="savings" type="CSSPart">
  The savings line wrapper.
</ParamField>

<ParamField body="savings-label" type="CSSPart">
  The savings label text.
</ParamField>

<ParamField body="savings-amount" type="CSSPart">
  The savings amount.
</ParamField>

## Examples

```css Style via :root tokens theme={null}
:root {
  --dkl-price-sale-color: #c0392b;
  --dkl-price-compare-opacity: 1;
  --dkl-price-compare-color: #888;
}
```

```css Style via ::part() theme={null}
dkl-price::part(price) {
  font-size: 1.5rem;
  font-weight: 700;
}
```

```html Data attribute overrides for web component theme={null}
<dkl-price
  data-show-savings="true"
  data-savings-format="amount"
  data-savings-label="You save"
></dkl-price>
```

## Next steps

<CardGroup cols={2}>
  <Card title="App block" icon="puzzle-piece" href="/components/price/app-block">
    Configure these via theme-editor settings.
  </Card>

  <Card title="Web Components" icon="code" href="/components/price/web-component">
    Set these directly on the tag.
  </Card>
</CardGroup>