Skip to main content
A web component is the <dkl-volume-picker-radio-groups> tag written directly into your theme’s Liquid. On a product page it needs zero attributes — it clones a pre-staged carrier and renders the picker server-side.

​
Usage

On a product page, add the <dkl-volume-picker-radio-groups> web component — it renders the first eligible PRODUCT_VOLUME discount server-side: 
<dkl-volume-picker-radio-groups></dkl-volume-picker-radio-groups>
It renders the first eligible PRODUCT_VOLUME discount server-side — including the light-DOM radio cards, which join the product form. If the product has no eligible volume discount, no carrier exists and the tag hides itself.

​
Multiple volume discounts on one product

Each eligible discount has its own carrier, keyed by its discount id. An attribute-less tag clones the first eligible discount; data-discount-id targets a specific one (the discount- prefix is optional). Place one tag per discount to show several — they can’t collide: 
<dkl-volume-picker-radio-groups data-discount-id="1478638797012"></dkl-volume-picker-radio-groups>
<dkl-volume-picker-radio-groups data-discount-id="discount-1478638797013"></dkl-volume-picker-radio-groups>

​
Reacting to changes

<dkl-volume-picker-radio-groups> emits discount-kit-live:volume-discount:tier-change when a tier is selected or deselected. To run your own code on a tier change, listen for that event — it bubbles, so you can listen on document. See the Events page for the full payload shape, and Listen for tier changes in the examples below for a working listener.

​
Examples

For the full list of data-* attributes you can set, see Styling & Data Attributes.
Override attributes + tokens
<dkl-volume-picker-radio-groups
  data-discount-id="1478638797012"
  data-style="mini-buttons"
  data-update-price-on-change="true"
  data-sync-with-quantity="true"
  style="
    --dkl-vp-selected-border-color: #2563eb;
    --dkl-vp-list-gap: 0.25rem;
    --dkl-vp-title-font-weight: 700;
    --dkl-radius: 12px;
  "
></dkl-volume-picker-radio-groups>
Pair with <dkl-price>
<!-- Let <dkl-price> own the price; the picker only emits events -->
<dkl-volume-picker-radio-groups data-price-target="none"></dkl-volume-picker-radio-groups>
<dkl-price></dkl-price>
Listen for tier changes
// Bubbles, so you can listen on document
document.addEventListener(
  'discount-kit-live:volume-discount:tier-change',
  (event) => {
    const { productId, currentTier, previousTier } = event.detail.resource

    if (!currentTier) {
      console.log('Tier cleared — back to base price')
      return
    }

    console.log(
      `Product ${productId}: tier ${currentTier.index} — ` +
        `buy ${currentTier.quantity} at ${currentTier.unitPriceCents}c each`
    )
  }
)
Example event payload
// event.detail.resource on tier-change
{
  productId: 7820000000001,
  variantId: 41200000000001,
  widgetId: 'volume-picker-12345-cards',
  widgetType: 'volume-picker-radio-groups',
  previousTier: {
    index: 0,
    quantity: 2,
    discountAmount: 5,
    discountType: 'percentage',
    unitPriceCents: 1900
  },
  currentTier: {
    index: 1,
    quantity: 3,
    discountAmount: 10,
    discountType: 'percentage',
    unitPriceCents: 1800
  }
}

​
Next steps

Styling & Data Attributes

Every data-* attribute, --dkl-* token, CSS part, and light-DOM class.

App block

The no-code, theme-editor placement.