<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
1
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.
2
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
select
default:"Percentage"
Which amount to show — Percentage (e.g. 20%), Fixed amount (e.g. $5.00), or
Highest amount (whichever saves more).
text
default:"Save up to [amount]"
Label template. Use
[amount] for the discount value.Style
range
default:"0px"
Space above the badge, 0–80px.
range
default:"0px"
Space below the badge, 0–80px.
color
default:"var(--dkl-color-accent)"
Badge background. Defaults to the accent brand colour.
color
default:"#ffffff"
Badge text. Defaults to white.
range
default:"8px"
Badge corners, 0–24px.
range
default:"3px"
Vertical padding, 0–32px.
range
default:"8px"
Horizontal padding, 0–48px.
range
default:"14px"
Badge text size, 8–48px.
range
default:"10px"
Badge text size on mobile, 8–48px.
range
default:"600"
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.