App block
The DK: Price app block renders <dkl-price> with no code — you add it in the theme
editor and configure every option through its settings panel. It’s available on product
templates.
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.
-
Edit a product template
Switch the top template selector to a Product template.
-
Add the DK: Price block
In the section where you want the price, click Add block and choose DK: Price, then position it where the price should appear.
-
Hide the theme’s native price
To avoid showing two prices, hide your theme’s built-in price element where you’ve placed DK: Price.
Settings
Section titled “Settings”Every setting maps to a data-* attribute or --dkl-* token under the hood — see
Styling & Data Attributes for the equivalents.
Savings badge
Section titled “Savings badge”Show savings badge
Section titled “Show savings badge”checkbox · default: off
Shows how much is saved vs the original price (on sale, or when a volume tier is selected). The settings below appear once this is on.
Savings format
Section titled “Savings format”select · default: Percentage
How the saving displays — Percentage (e.g. 20%) or Amount (e.g. $5.00).
Savings label
Section titled “Savings label”text · default: Save
The savings badge’s leading label, e.g. “Save 15%”.
Extra discount label
Section titled “Extra discount label”text · default: + an extra
Shown between the sale and tier savings, e.g. “Save 10% + an extra 15%”.
Savings badge background color
Section titled “Savings badge background color”color · default: var(--dkl-color-success)
Background colour for the savings badge.
Savings badge text color
Section titled “Savings badge text color”color · default: #ffffff
Text colour within the savings badge.
Savings badge corner radius
Section titled “Savings badge corner radius”range · default: 8px
Corner radius for the savings badge, 0–24px.
Spacing
Section titled “Spacing”Margin top
Section titled “Margin top”range · default: 0px
Space above the widget, 0–80px.
Margin bottom
Section titled “Margin bottom”range · default: 0px
Space below the widget, 0–80px.
Colors
Section titled “Colors”Price color
Section titled “Price color”color · default: inherit
The main price. Defaults to the theme’s inherited text colour.
Discounted price color
Section titled “Discounted price color”color · default: var(--dkl-price-color)
Shown when a volume tier is selected. Falls back to the Price color.
Compare price color
Section titled “Compare price color”color · default: inherit
The compared-to (struck-through) price.