App block
The DK: Volume Groups app block renders <dkl-volume-picker-radio-groups> with no code —
you add it in the theme editor and configure every option through its settings panel. It’s
available on product templates. The block resolves the eligible volume discount for you
and exposes the behaviour toggles (native-price update, quantity sync) and styling as
settings.
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: Volume Groups block
In the section where you want the tiers, click Add block and choose DK: Volume Groups, then position it where the picker should appear.
Settings
Section titled “Settings”Every setting maps to a data-* attribute or --dkl-* token under the hood — see
Styling & Data Attributes for the equivalents.
Discount & display
Section titled “Discount & display”Discount
Section titled “Discount”metaobject
Show only this volume discount. Leave empty to show the first eligible one.
select · default: Cards
Cards, or Mini buttons (a compact grid; the per-tier price line is hidden).
text
Optional heading above the tiers.
Tier heading
Section titled “Tier heading”text · default: Buy [tier_qty]+
Use [tier_qty] for the tier quantity.
Unit label
Section titled “Unit label”text · default: /ea
Discount label
Section titled “Discount label”text · default: off each item
Price unavailable label
Section titled “Price unavailable label”text · default: No discount available
Behaviour
Section titled “Behaviour”Update price when a tier is selected
Section titled “Update price when a tier is selected”checkbox · default: true
Whether selecting a tier updates the displayed price — both the theme’s native price element
and the <dkl-price> component. When off, the tier-change event
still fires (so custom integrations keep working), but no price display reflects the tier.
Price element selector
Section titled “Price element selector”text · default: auto-detect
Advanced: CSS selector for the theme’s price element. Leave blank to auto-detect (or to pair with <dkl-price>).
Sync with the quantity selector
Section titled “Sync with the quantity selector”checkbox · default: true
Bi-directional sync of the theme’s quantity selector to the selected tier’s quantity
Quantity input selector
Section titled “Quantity input selector”text · default: auto-detect
Advanced: CSS selector for the theme’s quantity input. Leave blank to auto-detect.
Quantity sync event
Section titled “Quantity sync event”text
Advanced: Optional event name to trigger quantity sync.
Spacing & sizing
Section titled “Spacing & sizing”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.
Font sizing
Section titled “Font sizing”select · default: Inherit (theme)
Inherit, or Custom (reveals the sizes below).
Font size (desktop)
Section titled “Font size (desktop)”range · default: 15px
10–32px. Custom only.
Font size (mobile)
Section titled “Font size (mobile)”range · default: 14px
8–28px. Custom only.
Border radius
Section titled “Border radius”range · default: 8px
Option corner radius, 0–24px.
Colors
Section titled “Colors”Text color
Section titled “Text color”color · default: #1a1a1a
Price color
Section titled “Price color”color · default: #1a1a1a
Border color
Section titled “Border color”color · default: #e5e5e5
Resting card border.
Selected tier background color
Section titled “Selected tier background color”color · default: #ffffff
Selected tier text color
Section titled “Selected tier text color”color · default: #1a1a1a
Selected tier price color
Section titled “Selected tier price color”color · default: #1a1a1a
Selected tier border color
Section titled “Selected tier border color”color · default: #000000
Border and ring of the selected tier.