App block

The DK: Component app block renders <dkl-sale-badge> with no code. You build the badge once in the Shopify admin — colours, size, label — then pick it in the block. It resolves to the product in context, reads its sale’s offer itself, and server-renders the badge.

Add it

1. Create the component

   In the Shopify admin, go to Discount Kit → Components and choose Create component, then Discount component. Pick the sale discount, then Sale badge. Customise it against the live preview and save it.

2. Open the theme editor

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

3. Add DK: Component

   For a product page, add DK: Component to the product section. For product cards, add it to the theme’s product-card block instead — that covers the whole grid, pagination included.

4. Pick your component

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

Note

The app block is the only way to render a badge in collection product cards. A web component can’t, because carriers exist only where there’s a single product in context — a product grid has many.

What you can configure

Everything below is set on the component in the admin, not on the block. Each control maps to a data-* attribute or a --dkl-* token underneath — see Styling & Data Attributes for the equivalents.

Group	What’s in it
Layout	Margins, vertical and horizontal padding, corner radius, the gap between label and message; Width (fit the text, fill the column, or fill it up to a max width); Alignment of the text, and whether the message sits above or below the label
Colours	Badge background and text; the message’s own colour
Typography	Badge size and message size (each with its own mobile value), weight and font family
Text	The label, with [amount] for the discount, and an optional additional message that shares the badge’s background

The badge shows the sale’s reward in its own units — a percentage row as a percentage, a cash row as money — so there is no format to choose. The preview’s Sale type control lets you see all three.

Note

A block with no component picked renders nothing. Placing a component somewhere it can’t find what it needs — a product, or its discount — renders nothing too.

Next steps

Components & the app blockThe full flow: create a component, place it, and where global styles come from.

Web ComponentsThe same component placed by hand, configured with data-*.

Styling & Data AttributesThe tokens, parts, and attributes behind these settings.