Skip to main content
Live Components are a set of <dkl-*> web components that render discount UI directly in your storefront — a volume picker, a discount-aware price, a max-discount badge, and an order-goal progress bar. They read the same Discount Kit Live data you already sync to your storefront, are server-rendered so they paint with no flicker, and theme entirely through --dkl-* CSS styling tokens.
These components require the discounts they display to be tagged dk:live and synced to your storefront. See the Live introduction for how syncing works.

​
Enable the ‘Discount Kit Live’ app embed

Every component depends on the Discount Kit Live app embed. Enable it once, per theme:
1

Open the theme editor

In the Shopify admin, go to Online Store → Themes and click Customize.
2

Find the app embeds

Open App embeds in the left sidebar.
3

Enable Discount Kit Live

Toggle Discount Kit Live on, then click Save.
The embed loads the shared runtime (styles + behaviour) site-wide and pre-renders the data each component needs. Without it enabled, the components have nothing to render from.
The embed also exposes a Debug mode toggle and a Custom CSS field. Debug mode logs both the standard storefront events and every Discount Kit Live component event (mount/unmount, tier-change, price-change) to the browser console; Custom CSS is a convenient place to set global --dkl-* styling tokens.

​
Two ways to place a component

Each component can be added either as a theme app block (configured in the theme editor) or as a web component (dropped straight into theme markup). They render identically — the same defaults back both paths.

App blocks

Add DK: Price, DK: Volume Groups, etc. through the theme editor. Every setting (colours, spacing, labels) is exposed in the editor — no code. This is the right choice for most merchants, and the only way to render in product cards on collection pages.

Web Components

Drop the element directly into your theme’s Liquid — e.g. <dkl-price></dkl-price>. On a product page it needs zero attributes: it renders from a pre-staged carrier with no flicker. For developers customizing themes directly.
See App blocks vs. Web Components for a full comparison and how to choose.

​
Prerequisites

Beyond enabling the Discount Kit Live app embed and tagging your discounts dk:live, the Live Components need one thing from your theme: support for Shopify’s Standard Storefront Events. The components react to shopper actions — selecting a variant, changing the cart — by listening for these events, so your theme must publish them for the components to update in response:
  • shopify:product:select drives variant-aware updates:
    • the price re-prices on a variant change
    • the volume picker re-calculates the selected tier on variant change
    • the badge re-picks the best discount
  • shopify:cart:lines-update drives cart-level updates:
    • the order goal’s progress updates as the cart changes.
This new way of tracking standard storefront events ensures that the components work consistently across all themes, once the new events are fully adopted by developers, rather than relying on theme specific event systems. Shopify’s Horizon v4.0.0+ comes with built in support for these. For older themes, follow Shopify’s Standard Storefront Events guide to integrate the events into your theme. Shopify’s Standard Actions are globally distributed across all Shopify storefronts already, so you don’t need to worry about integrating them into your theme unless you need to define custom actions.
The components still render without the standard events — they’re server-rendered from their carrier or app block, so they paint with no flicker regardless. They just won’t react to variant or cart changes until your theme publishes the events.

​
Theming

All component styling is driven by --dkl-* CSS styling tokens — global brand tokens shared by every component, plus per-component tokens for fine control. See Styling for the full token reference, how to apply them, and how to target structural elements.

​
The components

Discount Price

<dkl-price> — a theme-agnostic price that shows the discounted amount and a struck-through original as tiers and variants change.

Volume Picker

<dkl-volume-picker-radio-groups> — a PDP selector for volume/tiered discounts, one radio card per tier.

Discount Badge

<dkl-discount-badge> — a “Save up to 20%” / “Save up to $5.00” badge for products and product cards.

Order Goal

<dkl-order-goal> — a cart progress bar toward an order-goal discount’s spend tiers.