Web Component

Drop <dkl-volume-picker-radio-groups> into your theme markup and configure it with data-* attributes

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.