<dkl-discount-badge> with no code — you add
it in the theme editor and configure every option through its settings panel. It resolves to
the product in context, reads the max_reward_* metafields itself, and
server-renders the correct badge.
The app block is the only way to render a badge in collection product cards. A custom
element can’t, because carriers exist only where there’s a single product in context — a
product grid has many. Add the block to the product-card slot to cover the whole grid,
pagination included.
Add the block
Open the theme editor
In the Shopify admin, go to Online Store → Themes and click Customize. Make sure the Discount Kit Live
app embed is enabled.
Add DK: Discount Badge
For product cards, add the DK: Discount Badge block to the theme’s product-card slot — it then renders
on the card’s product across every page, pagination included. For a product page, switch the top template
selector to a Product template, then add the block where the badge should appear.
Settings
Every setting maps to adata-* attribute or --dkl-badge-* token under the hood — see
Styling & Data Attributes for the equivalents.
Content
Which amount to show — Percentage (e.g. 20%), Fixed amount (e.g. $5.00), or
Highest amount (whichever saves more).
Label template. Use
[amount] for the discount value.Style
Space above the badge, 0–80px.
Space below the badge, 0–80px.
Badge background. Defaults to the accent brand colour.
Badge text. Defaults to white.
Badge corners, 0–24px.
Vertical padding, 0–32px.
Horizontal padding, 0–48px.
Badge text size, 8–48px.
Badge text size on mobile, 8–48px.
Badge text weight, 100–900. Font weights may be limited to your theme’s installed font files.
Colour, radius, spacing, and font pickers are written into a scoped
<style> rule the block
emits, so they live-update in the theme editor and stay overridable by your own CSS.Next steps
Web Component
The same component placed by hand, configured with
data-*.Styling & Data Attributes
The tokens and attributes behind these settings.