Tiered Rewards

Layout: Stacked

Layout: Horizontal

<dkl-tiered-rewards> shows progress toward a tiered rewards or Order discount’s offers: a progress track, evenly-spaced tier markers, and an “Add [amount] more to…” message that flips to a success heading once every tier is met.

This component was previously called Order Goal, with the tag <dkl-order-goal> and --dkl-og-* tokens. Both were renamed with it: update any hand-written tags and custom CSS, and recreate components saved before the rename.

Each tier gives one reward, and the component says which:

Reward	Marker icon	Default label	Default next-goal message
Order discount	% or banknote	Save 10%	Add $20.00 more to save 10% on your order!
Shipping discount	Delivery van	$5.00 off shipping	Add $20.00 more to save $5.00 on shipping!
Free gift	Gift box	Free gift	Add $20.00 more to get a free gift!

A discount measured in quantity counts items instead (“Add 2 more…”, “3+ items”), and its own free gifts never count toward the goal. Every icon can be replaced with an image from your store’s Files, and every label and message is editable.

It’s a light-DOM component (like the sale badge) — no shadow DOM and no CSS parts. The Liquid snippet server-renders the full UI so it paints server-side, and the component re-renders in place on cart updates — recomputing the progress fraction, marker states, and message locally, which keeps it theme-agnostic.

What counts toward the goal

The bar counts the cart the way the discount does:

• Threshold type. Items for Quantity, the cart’s value before discounts for Spend (subtotal), and after product discounts for Spend (total).
• Left out. The discount’s own free gifts, products in excluded collections and, when the discount excludes them, sale items.
• Currency. Minimums and fixed amounts are shown in the shopper’s currency the same way the discount applies them: an amount you set for that currency, otherwise your store-currency amount at the current exchange rate.

It updates on the theme’s standard shopify:cart:lines-update event. A plain Spend (total) goal reads the subtotal the event carries; anything that needs each line (quantity, Spend (subtotal), exclusions) reads /cart.js, and exclusions look up each product’s collections from the Storefront API.

Anywhere in your theme

A tiered rewards discount belongs to the whole cart, not a product, so the component works on every page — a cart drawer, the cart page, the header — not just product pages.

On this component

App blockBuild the progress bar in the admin and place it with the Component block — no code.

Web ComponentsDrop dkl-tiered-rewards straight into your theme's Liquid and configure with data-*.

Styling & Data AttributesThe data-* attributes, --dkl-tr-* styling tokens, and Light-DOM classes shared by both.

EventsThe tier-change event dkl-tiered-rewards emits.

Note

Both placements need the Components app embed enabled, and render identically — the same defaults back both. See App blocks vs. Web Components for how to choose.

Accessibility

• Progress bar semantics. The track carries role="progressbar" with aria-valuemin, aria-valuemax, aria-valuenow, and a money-formatted aria-valuetext (e.g. “$40.00 of $100.00”, or “2 of 5” for a goal measured in items), so assistive tech reports real progress toward the goal rather than a bare percentage.
• Live progress message. The “Add [amount] more…” headline (and the success message) is an aria-live="polite" region, so it’s announced as the cart total changes.
• State beyond colour. Met tiers are marked with both an --active class and a check icon, not colour alone. Keep --dkl-tr-progress-color and the marker colours at sufficient contrast when restyling.