Skip to main content
Image highlighting the DKL Order Goal component - layout: stacked
<dkl-order-goal> shows progress toward an order-goal discount’s spend tiers from the cart’s items subtotal: a progress track, evenly-spaced tier markers, and a “Spend [amount] more to save [discount]” message that flips to a success heading once every tier is met. It’s a light-DOM component (like the discount 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.
Cart total. The component drives off the theme’s standard shopify:cart:lines-update event, summing the cart’s line costs into an items subtotal. When that yields no cart, it falls back to reading /cart.js, so custom-cart configurations are respected. Tier min-spends are compared against the presentment-currency subtotal with no currency conversion — multi-currency stores get face-value comparisons.

​
On this component

App block

Add DK: Order Goal in the theme editor and configure it with settings — no code.

Web Components

Drop <dkl-order-goal> straight into your theme’s Liquid and configure with data-*.

Styling & Data Attributes

The data-* attributes, --dkl-og-* styling tokens, and Light-DOM classes shared by both.

Events

The tier-change event <dkl-order-goal> emits.
Both placements need the Discount Kit Live 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.00of40.00 of 100.00”), so assistive tech reports real progress toward the goal rather than a bare percentage.
  • Live progress message. The “Spend [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-og-progress-color and the marker colours at sufficient contrast when restyling.