Components are a set of <dkl-*> web components that render discount UI
directly in your storefront — a volume picker, a
discount-aware price, a sale badge,
a tiered rewards progress bar, and a
product quickview dialog. They read the
discount data Discount Kit syncs to your storefront and are
themed entirely through --dkl-* CSS styling tokens. The page components are
server-rendered so they paint with no flicker; the quickview builds its dialog on the
client when it opens, prefetching the product so the first open is instant.
Every component depends on the Components 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 Components
Toggle Components 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 (placed 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
Build a component in the admin under Discount Kit → Components, then add the Component block in the theme editor and pick it. One block places every component type. This is the right choice for most merchants, and the only way to render in product cards on collection pages. (The quickview has no app block — its trigger is your own markup.)
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 Components & the app block for the admin flow, and App blocks vs. Web Components for a full comparison and how to choose.
Beyond enabling the Components app embed and tagging any codes or third-party discounts dk: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.