> ## 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: Price block from the theme editor

The **DK: Price** app block renders `<dkl-price>` with no code — you add it in the theme
editor and configure every option through its settings panel. It's available on **product
templates**.

## 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: Price block">
    In the section where you want the price, click **Add block** and choose **DK: Price**, then position it where the
    price should appear.
  </Step>

  <Step title="Hide the theme's native price">
    To avoid showing two prices, hide your theme's built-in price element where you've placed **DK: Price**.
  </Step>
</Steps>

<Tip>
  #### Pairing with the volume picker

  Leave the [volume picker's](/components/volume-picker/overview) price element selector blank so it 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/price/styling-and-data) for the equivalents.

### Savings badge

<ParamField body="Show savings badge" type="checkbox" default="off">
  Shows how much is saved vs the original price (on sale, or when a volume tier is selected). The settings below appear
  once this is on.
</ParamField>

<ParamField body="Savings format" type="select" default="Percentage">
  How the saving displays — **Percentage** (e.g. 20%) or **Amount** (e.g. \$5.00).
</ParamField>

<ParamField body="Savings label" type="text" default="Save">
  The savings badge's leading label, e.g. "**Save** 15%".
</ParamField>

<ParamField body="Extra discount label" type="text" default="+ an extra">
  Shown between the sale and tier savings, e.g. "Save 10% **+ an extra** 15%".
</ParamField>

<ParamField body="Savings badge background color" type="color" default="var(--dkl-color-success)">
  Background colour for the savings badge.
</ParamField>

<ParamField body="Savings badge text color" type="color" default="#ffffff">
  Text colour within the savings badge.
</ParamField>

<ParamField body="Savings badge corner radius" type="range" default="8px">
  Corner radius for the savings badge, 0–24px.
</ParamField>

### Spacing

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

### Colors

<ParamField body="Price color" type="color" default="inherit">
  The main price. Defaults to the theme's inherited text colour.
</ParamField>

<ParamField body="Discounted price color" type="color" default="var(--dkl-price-color)">
  Shown when a volume tier is selected. Falls back to the **Price color**.
</ParamField>

<ParamField body="Compare price color" type="color" default="inherit">
  The compared-to (struck-through) price.
</ParamField>

<Note>
  Colour and radius pickers are written into a scoped `<style>` rule the block emits, so they
  live-update in the theme editor and stay overridable by your own CSS. Unset colour pickers
  are skipped, so text never goes invisible.
</Note>

## Next steps

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

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