Components & the app block

A component is a saved, styled instance of a Live Component. You create it in the Shopify admin under Discount Kit → Components, customise it against a live preview, and then place it on your storefront — either with the DK: Component theme block or by naming it from a web component.

There is one theme block for every component type. What it renders is decided by the component you pick, not by the block, so a new component type never means a new block.

Create a component

1. Open Discount Kit → Components

   Choose Create component, then whether it belongs to a discount or not.

2. Discount component, or static

   A discount component is styled for one of your discounts — a volume picker, a volume table, an order goal bar, or a sale badge. You pick the discount, then the component and its layout. A static component is not tied to a discount: the price shows whatever discount applies to the product.

3. Customise it

   Colours, spacing, typography, text and behaviour, all against a live preview of the real component. Desktop and mobile sizes are separate, and the preview switches between them. The preview’s Data controls stand in for what the storefront would supply — a cart total for an order goal, the selected tier for a volume component, the kind of sale (percentage, amount off or fixed price) for a badge — so you can see every state the component has without leaving the editor.

4. Save

   Give it a name — that’s what you’ll see in the theme editor’s picker.

Place it with the app block

1. Open the theme editor

   Online Store → Themes → Customize. Make sure the Discount Kit Live app embed is enabled.

2. Add DK: Component

   In the section where you want it, click Add block and choose DK: Component.

3. Pick your component

   Set the block’s Component setting to the one you created, and position the block.

Note

A block with no component selected renders nothing. That’s deliberate: the block can’t know which component you meant, and guessing would put the wrong thing on your storefront.

The block isn’t restricted to product templates, because the badge has to reach collection product cards. A component that needs a product or a discount it can’t find in that position simply renders nothing.

Place it from your theme code

A web component can name a component too, with data-component and the component’s handle:

<dkl-volume-picker-radio-groups data-component="volume-picker-radio-groups-123-1"></dkl-volume-picker-radio-groups>

Copy the handle from the component’s Add to storefront panel in the admin. Without data-component the tag still renders — with the built-in styling, which you can override from your own CSS using the styling tokens.

Global styles

Brand-level values — accent colour, text colour, corner radius, font family — live in one place, Components → Global styles, and every component falls back to them. Set those once and individual components only need what differs. See Styling.

Next steps

App blocks vs. Web ComponentsThe two ways to place a component, and when to use each.

StylingThe global and per-component styling tokens.