dk:live, and Discount Kit syncs it to your storefront. Live Components are a set of pre-built UI components that you can drop into your storefront, and Live Data is the data that powers those components. Our new components are the easiest way to surface discount data in your storefront.
- Live Data — a data layer. Your synced discounts are exposed through storefront metafields, and you build the UI yourself in Liquid (badges, strike-through pricing, banners, gift selectors…). Maximum flexibility; you write the markup.
- Live Components — drop-in web components. The same discounts are
rendered for you by
<dkl-*>elements and theme app blocks — a price, a volume picker, a badge, an order-goal bar. Little or no code; themeable through--dkl-*tokens.
Both require the discount to be tagged
dk:live and synced. See the
Live introduction for how syncing works.At a glance
| Live Data | Live Components | |
|---|---|---|
| What it is | Discount data in metafields | Pre-built UI components |
| How you use it | Read metafields in your theme’s Liquid | Add an app block, or drop in a <dkl-*> tag |
| Code required | You write the markup | None (app block) to minimal (web component) |
| Flexibility | Total — any UI you can build | A fixed set of components, themed with tokens |
| Styling | Your own CSS | --dkl-* styling tokens + editor settings |
| Best for | Bespoke layouts, custom logic | Standard widgets, fast setup, no-code merchants |
Server Side Rendering
One of the key decisions when creating Discount Kit Live was to allow merchants and developers to surface discount data server side - no flicker on your component while JS loads, no complex fetching of data via the Storefront API, just simple data models that can be accessed via Shopify’s native language, liquid. Live Components are no different and have been carefully architected to combine the simplicity of a conventional web component with the benefits of server side rendering, whilst still allowing you to customise the UI’s to your needs through a dedicated styling and data API.Use them together
Live Data and Live Components are not mutually exclusive — they read the samedk:live discounts, so you can
mix them on the same store (even the same page):
- Use Live Components for the standard widgets (price, volume picker, badge, order goal).
- Keep Live Data for anything bespoke a component doesn’t cover — a custom collection banner, a gift-selector, store-specific logic.
Which should I use?
Reach for Live Components
You want a price, volume picker, badge, or order-goal bar with minimal code · the merchant
should configure it in the theme editor · you want it themed with tokens.
Reach for Live Data
You need a fully custom layout or logic a component doesn’t provide · you’re comfortable
reading metafields and writing the Liquid yourself.
The Live Components are currently in beta. The Live Data API is stable and unaffected.