App block
The DK: Discount Badge app block renders <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.
Add the block
Section titled “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
Section titled “Settings”Every setting maps to a data-* attribute or --dkl-badge-* token under the hood — see
Styling & Data Attributes for the equivalents.
Content
Section titled “Content”Discount type to show
Section titled “Discount type to show”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.
Margin top
Section titled “Margin top”range · default: 0px
Space above the badge, 0–80px.
Margin bottom
Section titled “Margin bottom”range · default: 0px
Space below the badge, 0–80px.
Background color
Section titled “Background color”color · default: var(--dkl-color-accent)
Badge background. Defaults to the accent brand colour.
Text color
Section titled “Text color”color · default: #ffffff
Badge text. Defaults to white.
Corner radius
Section titled “Corner radius”range · default: 8px
Badge corners, 0–24px.
Vertical padding
Section titled “Vertical padding”range · default: 3px
Vertical padding, 0–32px.
Horizontal padding
Section titled “Horizontal padding”range · default: 8px
Horizontal padding, 0–48px.
Font size
Section titled “Font size”range · default: 14px
Badge text size, 8–48px.
Font size (mobile)
Section titled “Font size (mobile)”range · default: 10px
Badge text size on mobile, 8–48px.
Font weight
Section titled “Font weight”range · default: 600
Badge text weight, 100–900. Font weights may be limited to your theme’s installed font files.