> ## Documentation Index
> Fetch the complete documentation index at: https://discountkit.app/llms.txt
> Use this file to discover all available pages before exploring further.

# App block

> Add and configure the DK: Volume Groups block from the theme editor

The **DK: Volume Groups** app block renders `<dkl-volume-picker-radio-groups>` with no code —
you add it in the theme editor and configure every option through its settings panel. It's
available on **product templates**. The block resolves the eligible volume discount for you
and exposes the behaviour toggles (native-price update, quantity sync) and styling as
settings.

## Add the block

<Steps>
  <Step title="Open the theme editor">
    In the Shopify admin, go to **Online Store → Themes** and click **Customize**. Make sure the **Discount Kit Live**
    app embed is enabled.
  </Step>

  <Step title="Edit a product template">Switch the top template selector to a **Product** template.</Step>

  <Step title="Add the DK: Volume Groups block">
    In the section where you want the tiers, click **Add block** and choose **DK: Volume Groups**, then position it
    where the picker should appear.
  </Step>
</Steps>

<Tip>
  #### Pairing with Discount Price

  To let [**DK: Price**](/components/price/overview) own the displayed price, set the price target to none — leave the
  **Price element selector** blank so the picker connects to the `<dkl-price>` element by default, and let **DK: Price**
  be the single element that updates the displayed price.
</Tip>

## Settings

Every setting maps to a `data-*` attribute or `--dkl-*` token under the hood — see
[Styling & Data Attributes](/components/volume-picker/styling-and-data) for the equivalents.

### Discount & display

<ParamField body="Discount" type="metaobject">
  Show only this volume discount. Leave empty to show the first eligible one.
</ParamField>

<ParamField body="Style" type="select" default="Cards">
  **Cards**, or **Mini buttons** (a compact grid; the per-tier price line is hidden).
</ParamField>

<ParamField body="Title" type="text">
  Optional heading above the tiers.
</ParamField>

<ParamField body="Tier heading" type="text" default="Buy [tier_qty]+">
  Use `[tier_qty]` for the tier quantity.
</ParamField>

<ParamField body="Unit label" type="text" default="/ea" />

<ParamField body="Discount label" type="text" default="off each item" />

<ParamField body="Price unavailable label" type="text" default="No discount available" />

### Behaviour

<ParamField body="Update price when a tier is selected" type="checkbox" default="true">
  Whether selecting a tier updates the displayed price — both the theme's native price element
  and the [`<dkl-price>`](/components/price/overview) component. When off, the tier-change event
  still fires (so custom integrations keep working), but no price display reflects the tier.
</ParamField>

<ParamField body="Price element selector" type="text" default="auto-detect">
  Advanced: CSS selector for the theme's price element. Leave blank to auto-detect (or to pair with `<dkl-price>`).
</ParamField>

<ParamField body="Sync with the quantity selector" type="checkbox" default="true">
  Bi-directional sync of the theme's quantity selector to the selected tier's quantity
</ParamField>

<ParamField body="Quantity input selector" type="text" default="auto-detect">
  Advanced: CSS selector for the theme's quantity input. Leave blank to auto-detect.
</ParamField>

<ParamField body="Quantity sync event" type="text">
  Advanced: Optional event name to trigger quantity sync.
</ParamField>

### Spacing & sizing

<ParamField body="Margin top" type="range" default="0px">
  Space above the widget, 0–80px.
</ParamField>

<ParamField body="Margin bottom" type="range" default="0px">
  Space below the widget, 0–80px.
</ParamField>

<ParamField body="Font sizing" type="select" default="Inherit (theme)">
  **Inherit**, or **Custom** (reveals the sizes below).
</ParamField>

<ParamField body="Font size (desktop)" type="range" default="15px">
  10–32px. Custom only.
</ParamField>

<ParamField body="Font size (mobile)" type="range" default="14px">
  8–28px. Custom only.
</ParamField>

<ParamField body="Border radius" type="range" default="8px">
  Option corner radius, 0–24px.
</ParamField>

### Colors

<ParamField body="Text color" type="color" default="#1a1a1a" />

<ParamField body="Price color" type="color" default="#1a1a1a" />

<ParamField body="Border color" type="color" default="#e5e5e5">
  Resting card border.
</ParamField>

<ParamField body="Selected tier background color" type="color" default="#ffffff" />

<ParamField body="Selected tier text color" type="color" default="#1a1a1a" />

<ParamField body="Selected tier price color" type="color" default="#1a1a1a" />

<ParamField body="Selected tier border color" type="color" default="#000000">
  Border and ring of the selected tier.
</ParamField>

## Next steps

<CardGroup cols={2}>
  <Card title="Web Components" icon="code" href="/components/volume-picker/web-component">
    The same component placed by hand, configured with `data-*`.
  </Card>

  <Card title="Styling & Data Attributes" icon="palette" href="/components/volume-picker/styling-and-data">
    The tokens, parts, and attributes behind these settings.
  </Card>
</CardGroup>