Web Component

Drop <dkl-order-goal> into your theme markup and configure it with data-* attributes

A web component is the <dkl-order-goal> tag written directly into your theme’s Liquid. Order goals are order-level, so they live in the shop feed. On a product page the embed pre-renders carriers for them, so the empty tag clones the default and renders server-side:

<dkl-order-goal></dkl-order-goal>

To target a specific order-goal discount (rather than the first eligible one), set data-discount-id — that goal’s carrier must also be present on the page. The discount- prefix is optional, and you can place one <dkl-order-goal> tag per discount to show several:

<dkl-order-goal data-discount-id="1478638797012"></dkl-order-goal>

Reacting to changes

<dkl-order-goal> emits discount-kit-live:order-goal:tier-change when the cart total crosses a tier boundary (the initial render establishes the baseline silently). To run your own code on a tier change, listen for that event — see its Events page and Listen for tier changes in the examples below.

Examples

For the full list of data-* attributes you can set, see Styling & Data Attributes.

Override attributes + tokens

<dkl-order-goal
  data-layout="stacked"
  data-message-template="Add [amount] more for [discount] off!"
  data-success-heading="You did it! 🎉"
  style="
    --dkl-og-progress-color: #6d28d9;
    --dkl-og-marker-active-color: #6d28d9;
    --dkl-og-background: #f5f3ff;
    --dkl-og-radius: 16px;
  "
></dkl-order-goal>

Stacked layout

<dkl-order-goal data-layout="stacked"></dkl-order-goal>

Listen for tier changes

// Fires whenever the cart total crosses a tier boundary
document.addEventListener(
  'discount-kit-live:order-goal:tier-change',
  (event) => {
    const { currentTier, previousTier, cartTotalCents, discountId } =
      event.detail.resource

    // currentTier is null below the first tier
    if (currentTier && (!previousTier || currentTier.tierLevel > previousTier.tierLevel)) {
      console.log(`Unlocked tier ${currentTier.tierLevel} on ${discountId}!`)
    }
  }
)

Example event payload

// event.detail.resource on tier-change — here the cart crossed from tier 1 into tier 2
{
  widgetId: null,
  widgetType: 'order-goal',
  discountId: 'discount-1478638797012',
  previousTier: {
    tierLevel: 1,
    minSpendCents: 5000,
    discountAmount: 10,
    discountType: 'percentage',
    message: 'Save 10%'
  },
  currentTier: {
    tierLevel: 2,
    minSpendCents: 10000,
    discountAmount: 15,        // percent — or CENTS when discountType is 'fixedAmount'
    discountType: 'percentage',
    message: 'Save 15%'
  },
  cartTotalCents: 11000
}

Next steps

Styling & Data Attributes

Every data-* attribute, --dkl-og-* token, and Light-DOM class.

App block

The no-code, theme-editor placement.