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

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

​
Pairing with Discount Price

To let DK: Price own the displayed price, set the price target to none — leave the Price element selector blank so the picker 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.

​
Discount & display

​
Discount
metaobject
Show only this volume discount. Leave empty to show the first eligible one.
​
Style
select
default:"Cards"
Cards, or Mini buttons (a compact grid; the per-tier price line is hidden).
​
Title
text
Optional heading above the tiers.
​
Tier heading
text
default:"Buy [tier_qty]+"
Use [tier_qty] for the tier quantity.
​
Unit label
text
default:"/ea"
​
Discount label
text
default:"off each item"
​
Price unavailable label
text
default:"No discount available"

​
Behaviour

​
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
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
checkbox
default:"true"
Bi-directional sync of the theme’s quantity selector to the selected tier’s quantity
​
Quantity input selector
text
default:"auto-detect"
Advanced: CSS selector for the theme’s quantity input. Leave blank to auto-detect.
​
Quantity sync event
text
Advanced: Optional event name to trigger quantity sync.

​
Spacing & sizing

​
Margin top
range
default:"0px"
Space above the widget, 0–80px.
​
Margin bottom
range
default:"0px"
Space below the widget, 0–80px.
​
Font sizing
select
default:"Inherit (theme)"
Inherit, or Custom (reveals the sizes below).
​
Font size (desktop)
range
default:"15px"
10–32px. Custom only.
​
Font size (mobile)
range
default:"14px"
8–28px. Custom only.
​
Border radius
range
default:"8px"
Option corner radius, 0–24px.

​
Colors

​
Text color
color
default:"#1a1a1a"
​
Price color
color
default:"#1a1a1a"
​
Border color
color
default:"#e5e5e5"
Resting card border.
​
Selected tier background color
color
default:"#ffffff"
​
Selected tier text color
color
default:"#1a1a1a"
​
Selected tier price color
color
default:"#1a1a1a"
​
Selected tier border color
color
default:"#000000"
Border and ring of the selected tier.

​
Next steps

Web Components

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

Styling & Data Attributes

The tokens, parts, and attributes behind these settings.