Styling & Data Attributes

The data-* attributes, CSS styling tokens, and Light-DOM classes for <dkl-order-goal>

This is the shared reference for <dkl-order-goal> — the data-* attributes that drive its behaviour, the --dkl-og-* tokens that style it, and the Light-DOM classes you can target. The app block settings map onto these; on a custom element you set them directly.

Using this reference with the app block

When you place the DK: Order Goal app block, it renders its own <dkl-order-goal> 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 light DOM, 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-og-marker-size, --dkl-og-marker-border-color) you can still set yourself from your own CSS — :root, the embed’s Custom CSS field, or a rule targeting the block.

CSS parts — N/A: This component is light DOM, so there are no CSS parts. Target the Light-DOM classes below instead — they work 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-og-{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-discount-id · metaobject handle · default: "first eligible"

Pick a specific order-goal discount’s carrier. The discount- prefix is optional; place one tag per discount to show several.

data-cart-total-cents · int · default: "carrier (render-time subtotal)"

The baseline cart total.

data-money-format · string · default: "carrier (shop.money_format)"

Money format for JS-rendered amounts.

data-message-template · string

The spend-more message. [amount] and [discount] are replaced at runtime.

data-success-heading · string · default: "Winner Winner 🎉"

Heading shown once every tier is met.

data-success-message · string · default: "You've unlocked all available savings"

Content shown once every tier is met.

data-tier-save-label · string · default: "Save [discount]"

Per-tier label; [discount] is the placeholder.

data-tier-spend-label · string · default: "when you spend [amount]+"

Per-tier spend line; [amount] is the placeholder.

data-layout · "horizontal" | "stacked" · default: "horizontal"

Layout variant. stacked arranges markers in a column with the progress bar rotated.

CSS styling tokens

Layout: Stacked

CSS styling tokens for the DKL Order Goal component - layout: stacked

Layout: Horizontal

CSS styling tokens for the DKL Order Goal component - layout: horizontal

<dkl-order-goal> is styled by a stylesheet loaded site-wide by the embed. Set any token above the element (:root, the embed’s Custom CSS, an inline style, or the block’s scoped rule).

--dkl-og-margin-top · default: "0"

Space above the widget (block Margin top).

--dkl-og-margin-bottom · default: "0"

Space below the widget (block Margin bottom).

--dkl-og-background · default: "var(--dkl-color-background-soft)"

Card background (block Background color).

--dkl-og-padding · default: "1rem"

Card padding (block Padding).

--dkl-og-radius · default: "var(--dkl-radius)"

Card corners (block Border radius).

--dkl-og-font-size · default: "inherit"

Base font size — emitted only when block Font sizing is Custom, else inherits the theme.

--dkl-og-font-size-mobile · default: "var(--dkl-og-font-size)"

Base font size at ≤749px (block Font size (mobile), Custom only).

--dkl-og-text-color · default: "var(--dkl-color-text)"

Card text colour (block Text color).

--dkl-og-tier-label-color · default: "inherit"

The “Save [discount]” tier label (block Tier label color).

--dkl-og-tier-spend-color · default: "inherit"

The “when you spend [amount]+” tier line (block Tier spend label color).

--dkl-og-track-color · default: "var(--dkl-color-border)"

Progress track (unfilled bar) colour (block Track color).

--dkl-og-progress-color · default: "var(--dkl-color-accent)"

Progress fill colour (block Progress bar color).

--dkl-og-marker-size · default: "2rem"

Tier marker size.

--dkl-og-marker-border-color · default: "var(--dkl-color-border)"

Inactive marker border colour.

--dkl-og-marker-bg · default: "var(--dkl-color-background)"

Inactive marker fill (block Icon background (not met)).

--dkl-og-marker-active-color · default: "var(--dkl-color-accent)"

Active (met) marker fill (block Icon background (met)).

--dkl-og-marker-icon-active-color · default: "#ffffff"

Active marker check-icon colour.

The marker glyph is set via the --dkl-og-icon mask — the app block swaps it for you through its icon image settings; on a web component you set the mask yourself.

Two further properties are runtime-internal, not theming knobs: --dkl-og-progress (the 0–1 fill fraction the component sets on the track) and --dkl-og-icon (the marker’s mask). Don’t author them.

Light-DOM classes

<dkl-order-goal> is all light DOM — no parts. Target these classes directly.

dkl-order-goal · host

The card (host element).

.dkl-order-goal__message · class

The headline / progress message.

.dkl-order-goal__progress · class

The progress bar (with .dkl-order-goal__progress-track; the fill is the track’s ::before).

.dkl-order-goal__tiers · class

The tier row/column.

.dkl-order-goal__tier · class

The wrapper for each tier.

.dkl-order-goal__tier-marker · class

The marker dot (met: .dkl-order-goal__tier-marker--active; the icon glyph is its ::before).

.dkl-order-goal__tier-label · class

The wrapper for the tier label.

.dkl-order-goal__tier-text · class

The “Save [discount]” text in the tier label.

.dkl-order-goal__tier-amount · class

The “when you spend [amount]+” text in the tier label.

Examples

Restyle the progress fill and markers

:root {
  --dkl-og-progress-color: #6d28d9;
  --dkl-og-marker-active-color: #6d28d9;
  --dkl-og-track-color: #ede9fe;
}

.dkl-order-goal__tier-marker--active {
  box-shadow: 0 0 0 3px #ede9fe;
}

Custom messaging

<dkl-order-goal
  data-message-template="Add [amount] more for [discount] off!"
  data-success-heading="You did it! 🎉"
  data-success-message="Every reward unlocked"
  data-tier-save-label="[discount] off"
  data-tier-spend-label="at [amount]+"
></dkl-order-goal>

Next steps

App block

Configure these via theme-editor settings.

Web Components

Set these directly on the tag.