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.
Every component depends on the Discount Kit Live app embed. Enable it once, per theme:
Open the theme editor
In the Shopify admin, go to Online Store → Themes and click Customize.
Find the app embeds
Open App embeds in the left sidebar.
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.
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.
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:
shopify:cart:lines-update drives cart-level updates:
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.
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.