App block

The DK: Component app block renders <dkl-volume-table> with no code. You build the table once in the Shopify admin — columns, colours, labels — then pick it in the block. It’s available on product templates.

Add it

1. Create the component

   In the Shopify admin, go to Discount Kit → Components and choose Create component, then Discount component. Pick the volume discount, then Volume table. Customise it against the live preview and save it.

2. Open the theme editor

   Online Store → Themes → Customize. Make sure the Discount Kit Live app embed is enabled.

3. Add DK: Component

   In the section where you want the table, click Add block and choose DK: Component, then position it beside the product form.

4. Pick your component

   Set the block’s Component setting to the one you created.

Pairing with the Volume Picker

The table only shows the tiers; it selects nothing. Add a volume picker for the same discount if shoppers should be able to choose a tier — the table highlights whichever row their quantity has reached.

What you can configure

Everything below is set on the component in the admin, not on the block. Each control maps to a data-* attribute or a --dkl-* token underneath — see Styling & Data Attributes for the equivalents.

Group	What’s in it
Layout	Margins, cell padding (vertical and horizontal), corner radius, and under Borders: the border width plus switches for the outer border, the row lines and the column lines
Colours	Header background and text, row background and text, the unlocked row’s background and text, the border
Typography	Header, row and message sizes, header and unlocked-row weights, heading and body font families
Text	The three column labels, the “off each” suffix, and an optional message above or below the table
Behaviour	The savings and price columns, an undiscounted first row, quantities as ranges, highlighting the unlocked tier, and where the message sits

Note

A block with no component picked renders nothing. Placing a component somewhere it can’t find what it needs — a product, or its discount — renders nothing too.

Next steps

Components & the app blockThe full flow: create a component, place it, and where global styles come from.

Web ComponentsThe same component placed by hand, configured with data-*.

Styling & Data AttributesThe tokens, parts, and attributes behind these settings.