Web Component
A web component is the <dkl-volume-table> tag written directly into your theme’s Liquid.
On a product page the embed pre-renders a carrier for every eligible volume discount, so
the empty tag clones the default and renders server-side, with no flicker:
<dkl-volume-table></dkl-volume-table>To target a specific volume discount rather than the first eligible one, set
data-discount-id — that discount’s carrier must also be present on the page. The
discount- prefix is optional, and you can place one tag per discount to show several:
<dkl-volume-table data-discount-id="1478638797012"></dkl-volume-table>Using a component you built in the admin
Section titled “Using a component you built in the admin”The columns, the undiscounted row, range formatting and the message all change which
cells exist, so they’re decided when the table is rendered — which means they come from a
component, not from an attribute. Name one with
data-component and its layout, styling and text come with it:
<dkl-volume-table data-component="volume-table-1478638797012-1"></dkl-volume-table>Copy the handle from the component’s Add to storefront panel in the admin.
Reacting to changes
Section titled “Reacting to changes”The table listens rather than emits. It re-prices on a variant change and highlights the
unlocked row when the quantity changes — including when a
volume picker for the same product emits
discount-kit-live:volume-discount:tier-change. Placing both is all the wiring needed;
they find each other by product id.
Examples
Section titled “Examples”<dkl-volume-table style="--dkl-vt-header-background:#111; --dkl-vt-highlight-background:#f4f4f4"></dkl-volume-table><dkl-volume-picker-radio-groups></dkl-volume-picker-radio-groups><dkl-volume-table></dkl-volume-table>