Components or Live data
Discount Kit gives your storefront two ways to show discounts. Both start from the same
place: your automatic discounts sync to your storefront by default, and you opt in anything
else by tagging it dk:live.
- Live data is 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.
- Components are drop-in web components that render
the same discounts for you, as
<dkl-*>elements or the Component theme block: a price, a volume picker, a badge, a tiered rewards bar. Little or no code, themed with--dkl-*tokens.
The difference in practice: with components you don’t loop through the data or handle discount conditions yourself. You place the component where you want it, and it works out what to show.
At a glance
Section titled “At a glance”| Live data | Components | |
|---|---|---|
| What it is | Discount data in metafields | Ready-made UI components |
| How you use it | Read metafields in your theme’s Liquid | Add the Component 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 and the admin’s Styles |
| Best for | Bespoke layouts, custom logic | Standard widgets, fast setup, no-code merchants |
Rendered on the server
Section titled “Rendered on the server”Live data is read in Liquid, so it renders on the server: no flicker while JavaScript loads, and no fetching through the Storefront API.
The page components keep that property: the price, volume picker, volume table, sale badge and tiered rewards bar are server-rendered from the same data, so they paint with the page, and their JavaScript only adds behaviour once it loads. The exception is the Quickview: its dialog is built in the browser when it opens, so it isn’t in the page’s initial HTML.
Use them together
Section titled “Use them together”Live data and components aren’t mutually exclusive. They read the same synced discounts, so you can mix them on one store, even on one page:
- Use components for the standard widgets: price, volume picker, badge, tiered rewards.
- Keep Live data for anything bespoke a component doesn’t cover, such as a custom collection banner or store-specific logic.
Enabling the Components app embed doesn’t affect your Live data metafields. Your existing Liquid keeps working exactly as before.