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