Web Component

A web component is the <dkl-tiered-rewards> tag written directly into your theme’s Liquid. Tiered rewards discounts are order-level, so they live in the shop feed, and the embed pre-renders them on every page — the empty tag clones the first eligible one and renders server-side, whether it sits on a product page, in a cart drawer or on the cart page:

<dkl-tiered-rewards></dkl-tiered-rewards>

To use a component you built in Discount Kit → Components — its discount, colours, text and icons — set data-component to its handle. Add to storefront on the component copies the tag for you:

<dkl-tiered-rewards data-component="tiered-rewards-1-1"></dkl-tiered-rewards>

To target a specific tiered rewards discount (rather than the first eligible one), set data-discount-id. The discount- prefix is optional, and you can place one <dkl-tiered-rewards> tag per discount to show several:

<dkl-tiered-rewards data-discount-id="1478638797012"></dkl-tiered-rewards>

In the cart drawer

Put the tag where it should sit in your theme’s cart drawer — in Dawn, that’s snippets/cart-drawer.liquid, above the checkout button:

<div class="cart-drawer__footer">
  <dkl-tiered-rewards data-component="tiered-rewards-1-1"></dkl-tiered-rewards>
  …
</div>

The same tag works on the cart page (Dawn: sections/main-cart-footer.liquid). The component re-reads the live cart when it appears and on every cart update, so a drawer the theme re-renders after an add never shows stale progress.

Reacting to changes

<dkl-tiered-rewards> emits discount-kit-live:tiered-rewards: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-tiered-rewards
  data-layout="stacked"
  data-spend-more-message="Add [amount] more for [discount] off!"
  data-success-heading="You did it! 🎉"
  style="
    --dkl-tr-progress-color: #6d28d9;
    --dkl-tr-marker-active-color: #6d28d9;
    --dkl-tr-background: #f5f3ff;
    --dkl-tr-radius: 16px;
  "
></dkl-tiered-rewards>

Stacked layout

<dkl-tiered-rewards data-layout="stacked"></dkl-tiered-rewards>

Listen for tier changes

// Fires whenever the cart total crosses a tier boundary
document.addEventListener('discount-kit-live:tiered-rewards: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 (10% off) into tier 2 (free shipping)
{
  widgetId: null,
  widgetType: 'tiered-rewards',
  discountId: 'discount-1478638797012',
  previousTier: {
    tierLevel: 1,
    minSpendCents: 5000,
    kind: 'order',
    discountAmount: 10,
    discountType: 'percentage',
    message: 'Save 10%'
  },
  currentTier: {
    tierLevel: 2,
    minSpendCents: 10000,
    kind: 'shipping',          // 'order' | 'shipping' | 'gift'
    discountAmount: 100,       // percent — or CENTS when discountType is 'fixedAmount'
    discountType: 'percentage',
    message: 'Free shipping'
  },
  cartTotalCents: 11000
}

Next steps

Styling & Data AttributesEvery data-* attribute, --dkl-tr-* token, and Light-DOM class.

App blockThe no-code, theme-editor placement.