Components & the app block

A component is a saved, styled instance of one of the storefront components. 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 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, a tiered rewards 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, and a quickview styles the quickview and gift dialogs.

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 tiered rewards, 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 Components app embed is enabled.

2. Add the Component block

   In the section where you want it, click Add block and choose 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.

A quickview component isn’t placed with the block. Set one as the global default and every quickview uses it, or name it on a quickview button or in the Gift with purchase embed. See Quickview components.

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.

Styles

Brand-level values — accent colour, text colour, corner radius, font family — live in one place, Components → 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.