Styling & Data Attributes

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 · default: Spend [amount] more to save [discount] on your order!

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.

Note

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.

Caution

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 blockConfigure these via theme-editor settings.

Web ComponentsSet these directly on the tag.