Volume Table

<dkl-volume-table> lists a volume discount’s tiers as a table: the quantity that unlocks each tier, what it saves, and optionally the per-unit price at that tier. It’s the reference next to the product form — “buy 2 save 10%, buy 4 save 15%” — at a glance.

Unlike the volume picker it selects nothing. It owns no radios, joins no product form and drives no price element, so the two sit together happily: the picker chooses, the table explains.

The table updates itself as the shopper moves:

• on a variant change, the price column is recomputed from the new variant’s price;
• on a quantity change — the theme’s quantity input, or a volume picker’s tier selection for the same product — the row that quantity has unlocked is highlighted.

Everything is server-rendered, so it paints with no flicker, and the whole table is light DOM: every cell is reachable from your own CSS.

On this component

App blockBuild the table in the admin and place it with the Component block.

Web ComponentsDrop dkl-volume-table straight into your theme's Liquid.

Styling & Data AttributesThe tokens, classes, and attributes behind the settings.

Note

Both placements need the Components app embed enabled, and render identically — the same defaults back both. See App blocks vs. Web Components for how to choose.

Accessibility

• Real table semantics. It’s a <table> with a <thead> and column scopes, so assistive tech reads each cell with its column heading rather than as loose text.
• State beyond colour. The unlocked row is marked with a class that changes its weight as well as its background, and reaching a new tier is announced politely. Keep --dkl-vt-highlight-background at sufficient contrast when restyling.