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

The **DK: Discount Badge** app block renders `<dkl-discount-badge>` with no code — you add
it in the theme editor and configure every option through its settings panel. It resolves to
the product in context, reads the [`max_reward_*` metafields](/live/reference) itself, and
server-renders the correct badge.

<Info>
  The app block is the **only** way to render a badge in collection **product cards**. A custom
  element can't, because carriers exist only where there's a single product in context — a
  product grid has many. Add the block to the product-card slot to cover the whole grid,
  pagination included.
</Info>

## 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="Add DK: Discount Badge">
    For **product cards**, add the **DK: Discount Badge** block to the theme's product-card slot — it then renders
    on the card's product across every page, pagination included. For a **product page**, switch the top template
    selector to a **Product** template, then add the block where the badge should appear.
  </Step>
</Steps>

## Settings

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

### Content

<ParamField body="Discount type to show" type="select" default="Percentage">
  Which amount to show — **Percentage** (e.g. 20%), **Fixed amount** (e.g. \$5.00), or
  **Highest amount** (whichever saves more).
</ParamField>

<ParamField body="Label" type="text" default="Save up to [amount]">
  Label template. Use `[amount]` for the discount value.
</ParamField>

### Style

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

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

<ParamField body="Background color" type="color" default="var(--dkl-color-accent)">
  Badge background. Defaults to the accent brand colour.
</ParamField>

<ParamField body="Text color" type="color" default="#ffffff">
  Badge text. Defaults to white.
</ParamField>

<ParamField body="Corner radius" type="range" default="8px">
  Badge corners, 0–24px.
</ParamField>

<ParamField body="Vertical padding" type="range" default="3px">
  Vertical padding, 0–32px.
</ParamField>

<ParamField body="Horizontal padding" type="range" default="8px">
  Horizontal padding, 0–48px.
</ParamField>

<ParamField body="Font size" type="range" default="14px">
  Badge text size, 8–48px.
</ParamField>

<ParamField body="Font size (mobile)" type="range" default="10px">
  Badge text size on mobile, 8–48px.
</ParamField>

<ParamField body="Font weight" type="range" default="600">
  Badge text weight, 100–900. Font weights may be limited to your theme's installed font files.
</ParamField>

<Note>
  Colour, radius, spacing, and font 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.
</Note>

## Next steps

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

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