<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 adata-* attribute or --dkl-og-* token under the hood — see
Styling & Data Attributes for the equivalents.
Discount & layout
metaobject
Show only this order goal discount. Leave empty to show the first one.
select
default:"Horizontal"
Horizontal, or Stacked (markers in a column, progress bar rotated).
Content
text
Shown until every tier is met. Use
[amount] for the amount to the next tier and
[discount] for its discount.text
default:"Winner Winner 🎉"
Heading shown once every tier is met.
text
default:"You've unlocked all available savings"
Body shown once every tier is met.
text
default:"Save [discount]"
Use
[discount] for the tier’s discount.text
default:"when you spend [amount]+"
Use
[amount] for the tier’s minimum spend.Spacing & sizing
range
default:"0px"
Space above the widget, 0–80px.
range
default:"0px"
Space below the widget, 0–80px.
range
default:"16px"
Inner padding of the card, 0–48px.
select
default:"Inherit (theme)"
Inherit, or Custom. The two font-size settings below apply only when set to Custom.
range
default:"16px"
Desktop font size, 10–32px. Custom only.
range
default:"14px"
Mobile font size, 8–28px. Custom only.
range
default:"8px"
Card corners, 0–24px.
Colors
color
default:"#217a4a"
The progress fill.
color
default:"#e5e5e5"
The unfilled progress track behind the fill.
color
default:"#f7f7f7"
Card background.
color
default:"#1a1a1a"
The headline / progress message.
color
default:"#1a1a1a"
The per-tier “Save [discount]” line.
color
default:"#737373"
The per-tier “when you spend [amount]+” line.
color
default:"#ffffff"
Marker background for tiers not yet met.
color
default:"#217a4a"
Marker background for met tiers.
Icons
image
Swaps the marker glyph for a custom image on percentage-discount tiers.
image
Swaps the marker glyph for a custom image on fixed-amount tiers.
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.