App block

The Component app block renders <dkl-volume-picker-radio-groups> with no code. You build the picker once in the Shopify admin — layout, colours, labels, behaviour — then pick it in the block. It’s available on product templates.

Add it

1. Create the component

   In the Shopify admin, go to Discount Kit → Components and choose Create component, then Discount component. Pick the volume discount, then Cards or Mini buttons. Customise it against the live preview and save it.

2. Open the theme editor

   Online Store → Themes → Customize. Make sure the Components app embed is enabled.

3. Add the Component block

   In the section where you want the tiers, click Add block and choose Component, then position it where the picker should appear.

4. Pick your component

   Set the block’s Component setting to the one you created.

Pairing with the Discount Price

To let the price component own the displayed price, leave the picker’s Price element selector blank so it connects to the <dkl-price> element by default.

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	The variant (Cards or Mini buttons), margins, card padding, the gap between options, corner radius, the space below the title
Colours	Background, text, price and border — each at rest, on hover and when selected — plus the title
Typography	Title, tier heading, discount line, price and unit sizes, the title’s weight, heading and body font families
Text	The title, the tier heading ([tier_qty]), the discount label, the unit label, and the message shown when tiers don’t apply
Behaviour	Updating the theme’s native price on selection, syncing the quantity selector, and the CSS selectors for both

Note

A block with no component picked renders nothing. Placing a component somewhere it can’t find what it needs — a product, or its discount — renders nothing too.

Quantity sync

With Behaviour → Sync with the quantity selector on (the default), the picker and your theme’s quantity selector move together:

• Picking a tier sets the quantity to that tier’s quantity — pick “Buy 6+” and the quantity becomes 6.
• Changing the quantity selects the highest tier it reaches. Go from 6 to 4 and the “Buy 2+” tier is selected; drop below the first tier and no tier is selected.
• Changing the variant re-applies the tier for the current quantity.

How the quantity selector is found

The picker looks for the product’s quantity selector in this order, and uses the first it finds:

1. Quantity input selector, when you’ve set one in the component’s Behaviour settings.
2. Horizon-style themes — the quantity selector inside the product’s form.
3. Other themes, such as Dawn — the quantity field of the product’s add-to-cart form. It only uses a form that belongs to this product, so quick-add buttons and recommended products elsewhere on the page are ignored. A quantity field placed outside the form still counts, and if your theme has separate desktop and mobile quantity selectors, the picker keeps both in step.

When it can’t find one

If the picker can’t find a quantity selector, the discount itself is unaffected — it’s applied at checkout from the quantity in the cart — but picking a tier won’t change the quantity, and changing the quantity won’t select a tier. Shoppers see nothing wrong; in the theme editor, a notice appears under the picker:

Discount Kit (editor only): quantity selector not found, so tiers won’t sync.

To fix it:

1. Check the section has a quantity selector

   The picker looks in its own section first. If the product section has no quantity selector, add your theme’s one (in Dawn, the Quantity selector block).

2. Or point the picker at it

   Open the page on your storefront, right-click the quantity box and choose Inspect. Find the <input> the quantity is typed into, and write a CSS selector that matches it — for example .product-form__quantity input[name="quantity"]. Avoid ids that contain the section id (such as #Quantity-template--…): they change between templates.

   In Discount Kit → Components, open the component and enter the selector in Behaviour → Quantity input selector. The notice names the selector if it still matches nothing.

3. If the quantity still doesn’t follow

   Some themes change the quantity without telling the page. If yours fires its own event when the quantity changes, enter that event’s name in Behaviour → Quantity change event name.

Don’t want the two linked? Turn off Sync with the quantity selector.

Next steps

Components & the app blockThe full flow: create a component, place it, and where global styles come from.

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

Styling & Data AttributesThe tokens, parts, and attributes behind these settings.