Live Data & Live Components
Discount Kit Live comes in two flavours, built on the same foundation: you opt a discount
in by tagging it 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.
The primary difference between how you use Live Data and Live Components is that Live Components don’t require you to manually loop through the data, handle discount conditions etc - we take care of that for you and you simply drop in the components where you want them.
At a glance
Section titled “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
Section titled “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
Section titled “Use them together”Live Data and Live Components are not mutually exclusive — they read the same dk: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.
Enabling the Discount Kit Live app embed (which powers Live Components) does not affect your Live Data metafields — your existing Liquid keeps working exactly as before.