Skip to main content
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

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

Edit a product template

Switch the top template selector to a Product template.
3

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.
4

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.

​
Pairing with the volume picker

Leave the volume picker’s price element selector blank so it connects to the <dkl-price> element by default, and let DK: Price be the single element that updates the displayed price.

​
Settings

Every setting maps to a data-* attribute or --dkl-* token under the hood — see Styling & Data Attributes for the equivalents.

​
Savings badge

​
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
select
default:"Percentage"
How the saving displays — Percentage (e.g. 20%) or Amount (e.g. $5.00).
​
Savings label
text
default:"Save"
The savings badge’s leading label, e.g. “Save 15%”.
​
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
color
default:"var(--dkl-color-success)"
Background colour for the savings badge.
​
Savings badge text color
color
default:"#ffffff"
Text colour within the savings badge.
​
Savings badge corner radius
range
default:"8px"
Corner radius for the savings badge, 0–24px.

​
Spacing

​
Margin top
range
default:"0px"
Space above the widget, 0–80px.
​
Margin bottom
range
default:"0px"
Space below the widget, 0–80px.

​
Colors

​
Price color
color
default:"inherit"
The main price. Defaults to the theme’s inherited text colour.
​
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
color
default:"inherit"
The compared-to (struck-through) price.
Colour and radius 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. Unset colour pickers are skipped, so text never goes invisible.

​
Next steps

Web Components

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

Styling & Data Attributes

The tokens, parts, and attributes behind these settings.