App block

Add and configure the DK: Volume Groups block from the theme editor

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.