Skip to main content
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 blockWhen 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

Image highlighting the CSS styling tokens for the DKL Order Goal component - layout: stacked
<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.