Skip to main content
The DK: Order Goal app block renders <dkl-order-goal> with no code — you add it in the theme editor and configure every option through its settings panel. It renders one order-goal discount: the one chosen in its Discount picker, or the first eligible discount in the shop feed when the picker is left empty.

​
Add the block

1

Open the theme editor

In the Shopify admin, go to Online Store → Themes and click Customize. Make sure the Discount Kit Live app embed is enabled.
2

Add the DK: Order Goal block

In the section where you want the progress bar — for example the cart, or a product page — click Add block and choose DK: Order Goal, then position it where the bar should appear.

​
Settings

Every setting maps to a data-* attribute or --dkl-og-* token under the hood — see Styling & Data Attributes for the equivalents.

​
Discount & layout

​
Discount
metaobject
Show only this order goal discount. Leave empty to show the first one.
​
Layout
select
default:"Horizontal"
Horizontal, or Stacked (markers in a column, progress bar rotated).

​
Content

​
Spend-more message
text
Shown until every tier is met. Use [amount] for the amount to the next tier and [discount] for its discount.
​
Success heading
text
default:"Winner Winner 🎉"
Heading shown once every tier is met.
​
Success message
text
default:"You've unlocked all available savings"
Body shown once every tier is met.
​
Tier label
text
default:"Save [discount]"
Use [discount] for the tier’s discount.
​
Tier spend label
text
default:"when you spend [amount]+"
Use [amount] for the tier’s minimum spend.

​
Spacing & sizing

​
Margin top
range
default:"0px"
Space above the widget, 0–80px.
​
Margin bottom
range
default:"0px"
Space below the widget, 0–80px.
​
Padding
range
default:"16px"
Inner padding of the card, 0–48px.
​
Font sizing
select
default:"Inherit (theme)"
Inherit, or Custom. The two font-size settings below apply only when set to Custom.
​
Font size (desktop)
range
default:"16px"
Desktop font size, 10–32px. Custom only.
​
Font size (mobile)
range
default:"14px"
Mobile font size, 8–28px. Custom only.
​
Border radius
range
default:"8px"
Card corners, 0–24px.

​
Colors

​
Progress bar color
color
default:"#217a4a"
The progress fill.
​
Track color
color
default:"#e5e5e5"
The unfilled progress track behind the fill.
​
Background color
color
default:"#f7f7f7"
Card background.
​
Text color
color
default:"#1a1a1a"
The headline / progress message.
​
Tier label color
color
default:"#1a1a1a"
The per-tier “Save [discount]” line.
​
Tier spend label color
color
default:"#737373"
The per-tier “when you spend [amount]+” line.
​
Icon background: not met
color
default:"#ffffff"
Marker background for tiers not yet met.
​
Icon background: met
color
default:"#217a4a"
Marker background for met tiers.

​
Icons

​
Percentage discount icon
image
Swaps the marker glyph for a custom image on percentage-discount tiers.
​
Fixed amount icon
image
Swaps the marker glyph for a custom image on fixed-amount tiers.
​
Tier met icon
image
Swaps the marker glyph for a custom image once a tier is met.
These icon images are an app-block-only feature — a web component would set the marker glyph via CSS instead (the --dkl-og-icon mask).

​
Next steps

Web Components

The same component placed by hand, configured with data-*.

Styling & Data Attributes

The tokens, classes, and attributes behind these settings.