Styling & Data Attributes

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 blockWhen 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.

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
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
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>

Styling & Data Attributes

Data attributes

CSS styling tokens

Structure

CSS parts and classes

Parts

Light-DOM classes

Examples

Next steps

App block

Web Components

​Data attributes

​CSS styling tokens

​Structure

​CSS parts and classes

​Parts

​Light-DOM classes

​Examples

​Next steps

App block

Web Components

Data attributes

CSS styling tokens

Structure

CSS parts and classes

Parts

Light-DOM classes

Examples

Next steps