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

Note

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 blockConfigure these via theme-editor settings.

Web ComponentsSet these directly on the tag.