Styling & Data Attributes

The data-* attributes, CSS styling tokens, CSS parts, and light-DOM classes for <dkl-volume-picker-radio-groups>

This is the shared reference for <dkl-volume-picker-radio-groups> — the data-* attributes that drive its behaviour, the --dkl-* tokens that style it, and the CSS parts and light-DOM classes you can target. The app block settings map onto these; on a web component you set them directly.

Using this reference with the app block

When you place the DK: Volume Groups app block, it renders its own <dkl-volume-picker-radio-groups> and writes these values for you — so what applies depends on the kind of override:

Data attributes - No: The block sets every data-* itself, from its App block settings and the resolved discount. Adding data-* to your own markup has no effect on a block instance; they’re the configuration surface for the web component only. To change block behaviour, use its settings.

CSS styling tokens — Yes: They’re CSS custom properties that inherit through the shadow boundary, so they style a block exactly like a web component. The block’s colour / radius / spacing pickers just write the matching setting-backed tokens into a scoped <style> rule for you. Any token not exposed as a setting (e.g. --dkl-vp-legend-spacing, --dkl-vp-list-gap) you can still set yourself from your own CSS — :root, the embed’s Custom CSS field, or a rule targeting the block.

CSS parts and classes — Yes: The shadow DOM and light-DOM markup are identical, so ::part() and the .dkl-volume-picker__* classes work the same on a block or a web component.

Token precedence. A token the block writes from a chosen setting is scoped to the block’s id (#dkl-vp- {block.id}), which is more specific than a :root rule — so to override that token, either change the editor setting or match the specificity (target the block element). Tokens the block leaves unset fall back to your CSS or the built-in default as normal.

Data attributes

Set as data-* on the host. On a web component the carrier supplies the data attributes; the behaviour toggles default off.

data-discount-id · metaobject handle · default: "carrier (first eligible)"

Which discount’s carrier to clone. The discount- prefix is optional; an attribute-less tag uses the default (first eligible).

data-style · "cards" | "mini-buttons" · default: "cards"

Presentation: stacked cards, or a compact button grid (the per-tier price line is hidden).

data-money-format · string · default: "carrier (shop.money_format)"

Money format for JS-reformatted prices.

data-widget-id · string · default: "null"

Instance id; disambiguates multiple widgets.

data-update-price-on-change · "true" | "false" · default: "false"

Whether selecting a tier updates the displayed price — the theme’s native price element and the <dkl-price> component (via the tier-change event’s updatesPrice flag). When false, the event still fires for custom integrations, but no price display reflects the tier.

data-price-target · CSS selector | "none" · default: "auto-detect"

Override or disable the price element target. Use "none" when pairing with <dkl-price>.

data-sync-with-quantity · "true" | "false" · default: "false"

Sync the theme’s quantity selector to the selected tier’s quantity.

data-quantity-target · CSS selector | "none" · default: "auto-detect"

Override or disable the quantity input target.

data-quantity-event · event name · default: "(none)"

An extra theme event to also drive quantity sync, on top of quantity-selector:update. The component reads the quantity from the event’s detail.quantity, or re-reads the form input if absent.

data-exclude-sale-prices · "true" | "false" · default: "carrier (the discount's excludeSale)"

Disable tiers when the variant is already on sale.

data-price-unavailable-label · string · default: "No discount available"

Label shown when a tier is unavailable.

Sold-out variants disable the tiers (on initial render and on variant change), independently of data-exclude-sale-prices — a selectable tier on a variant the form won’t add would be a dead end.

Per-tier attributes (data-dkl-*)

Server-rendered onto each input.dkl-volume-picker__radio; the component reads them. You don’t set these by hand — they’re listed for reference.

data-dkl-tier-index · int

The tier’s position in the group.

data-dkl-discount-type · "percentage" | "fixedAmount"

How the tier’s discount is expressed.

data-dkl-discount-amount · number

The fixed discount amount (when fixedAmount).

data-dkl-discount-percent · number

The discount percent (when percentage).

data-dkl-unit-price-cents · int (cents)

The pre-computed discounted unit price.

CSS styling tokens

Layout: Cards

CSS styling tokens for the DKL Volume Picker component - layout: cards

Layout: Mini-buttons

CSS styling tokens for the DKL Volume Picker component - layout: mini-buttons

Two layers: a shadow <style> for the title/list structure, and the light-DOM card chrome in the stylesheet. The card chrome mostly consumes the global brand tokens so cards match the theme.

Structure

--dkl-vp-legend-spacing · default: "0.75rem"

Space below the title row.

--dkl-vp-title-font-weight · default: "600"

Group title font weight.

--dkl-vp-title-font-size · default: "0.95rem"

Group title font size.

--dkl-vp-title-color · default: "inherit"

Group title color.

--dkl-vp-list-gap · default: "0.5rem"

Gap between options.

--dkl-vp-count · default: "tier count (max 3)"

Mini-buttons grid columns.

--dkl-vp-mini-padding · default: "0.375rem 1rem"

Mini-buttons option padding.

--dkl-vp-selected-border-color · default: "#000000"

Border and ring of the selected tier.

--dkl-color-border · default: "rgba(0,0,0,.12)"

Resting card border.

--dkl-radius · default: "8px"

Card corners.

--dkl-color-background · default: "#fff"

Card background.

--dkl-color-background-soft · default: "rgba(0,0,0,.04)"

Hover background.

--dkl-color-accent · default: "#217a4a"

Focus-visible outline.

CSS parts and classes

The title/list scaffold is in shadow DOM (parts); the radio cards are slotted light DOM (classes).

Parts

Layout: Cards

CSS parts for the DKL Volume Picker component - layout: cards

Layout: Mini-buttons

CSS parts for the DKL Volume Picker component - layout: mini-buttons

root · CSSPart

The <fieldset> wrapper.

legend-wrapper · CSSPart

The title row.

title · CSSPart

The <legend> group title.

list · CSSPart

The radiogroup holding the options.

Light-DOM classes

.dkl-volume-picker__option · class

One tier card (selected: :has(.dkl-volume-picker__radio:checked)).

.dkl-volume-picker__radio · class

The radio input.

.dkl-volume-picker__content · class

Card inner row.

.dkl-volume-picker__header · class

Title + discount stack.

.dkl-volume-picker__title · class

Tier heading (e.g. “Buy 3+”).

.dkl-volume-picker__discount · class

The “X% off each” line.

.dkl-volume-picker__price · class

Per-tier price.

.dkl-volume-picker__price-unit · class

The unit suffix (e.g. “/ea”).

.dkl-volume-picker__price-unavailable · class

“No discount” placeholder.

Examples

Recolour the selected card border

:root {
  --dkl-vp-selected-border-color: #2563eb;
}

Tighter list, bolder titles

:root {
  --dkl-vp-list-gap: 0.25rem;
  --dkl-vp-title-font-weight: 700;
}

Compact button layout

<dkl-volume-picker-radio-groups
  data-style="mini-buttons"
  style="--dkl-vp-mini-padding: 0.25rem 0.75rem;"
></dkl-volume-picker-radio-groups>

Next steps

App block

Configure these via theme-editor settings.

Web Components

Set these directly on the tag.