App block
The Component app block renders <dkl-price> with no code. You build the price
component once in the Shopify admin — colours, sizes, the savings badge — then pick it in
the block. It’s available on product templates.
Add it
Section titled “Add it”-
Create the component
In the Shopify admin, go to Discount Kit → Components and choose Create component, then Static component → Price. The price isn’t tied to one discount: it shows whatever applies to the product. Customise it against the live preview and save it.
-
Open the theme editor
Online Store → Themes → Customize. Make sure the Components app embed is enabled.
-
Add the Component block
In the section where you want the price, click Add block and choose Component, then position it where the price should appear. To avoid showing two prices, hide your theme’s built-in price element there.
-
Pick your component
Set the block’s Component setting to the one you created.
What you can configure
Section titled “What you can configure”Everything below is set on the component in the admin, not on the block. Each control
maps to a data-* attribute or a --dkl-* token underneath — see
Styling & Data Attributes for the
equivalents.
| Group | What’s in it |
|---|---|
| Layout | Margins, the gap between the amounts, the savings badge’s padding and corner radius |
| Colours | The regular and discounted price, the struck-through compare-at, the savings badge’s background and text |
| Typography | Price size and weight, compare-at weight, badge size and weight, font family — each size with its own mobile value |
| Text | The savings label (“Save”) and the extra-discount label (“+ an extra”) |
| Behaviour | Whether the savings badge shows, and whether it reads as a percentage or an amount |