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

The **DK: Order Goal** app block renders `<dkl-order-goal>` with no code — you add it in the
theme editor and configure every option through its settings panel. It renders one order-goal
discount: the one chosen in its **Discount** picker, or the first eligible discount in the
shop feed when the picker is left empty.

## 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 the DK: Order Goal block">
    In the section where you want the progress bar — for example the cart, or a product page —
    click **Add block** and choose **DK: Order Goal**, then position it where the bar should
    appear.
  </Step>
</Steps>

## Settings

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

### Discount & layout

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

<ParamField body="Layout" type="select" default="Horizontal">
  **Horizontal**, or **Stacked** (markers in a column, progress bar rotated).
</ParamField>

### Content

<ParamField body="Spend-more message" type="text" default="Spend [amount] more to save [discount] on your order!">
  Shown until every tier is met. Use `[amount]` for the amount to the next tier and
  `[discount]` for its discount.
</ParamField>

<ParamField body="Success heading" type="text" default="Winner Winner 🎉">
  Heading shown once every tier is met.
</ParamField>

<ParamField body="Success message" type="text" default="You've unlocked all available savings">
  Body shown once every tier is met.
</ParamField>

<ParamField body="Tier label" type="text" default="Save [discount]">
  Use `[discount]` for the tier's discount.
</ParamField>

<ParamField body="Tier spend label" type="text" default="when you spend [amount]+">
  Use `[amount]` for the tier's minimum spend.
</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="Padding" type="range" default="16px">
  Inner padding of the card, 0–48px.
</ParamField>

<ParamField body="Font sizing" type="select" default="Inherit (theme)">
  **Inherit**, or **Custom**. The two font-size settings below apply only when set to Custom.
</ParamField>

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

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

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

### Colors

<ParamField body="Progress bar color" type="color" default="#217a4a">
  The progress fill.
</ParamField>

<ParamField body="Track color" type="color" default="#e5e5e5">
  The unfilled progress track behind the fill.
</ParamField>

<ParamField body="Background color" type="color" default="#f7f7f7">
  Card background.
</ParamField>

<ParamField body="Text color" type="color" default="#1a1a1a">
  The headline / progress message.
</ParamField>

<ParamField body="Tier label color" type="color" default="#1a1a1a">
  The per-tier "Save \[discount]" line.
</ParamField>

<ParamField body="Tier spend label color" type="color" default="#737373">
  The per-tier "when you spend \[amount]+" line.
</ParamField>

<ParamField body="Icon background: not met" type="color" default="#ffffff">
  Marker background for tiers not yet met.
</ParamField>

<ParamField body="Icon background: met" type="color" default="#217a4a">
  Marker background for met tiers.
</ParamField>

### Icons

<ParamField body="Percentage discount icon" type="image">
  Swaps the marker glyph for a custom image on percentage-discount tiers.
</ParamField>

<ParamField body="Fixed amount icon" type="image">
  Swaps the marker glyph for a custom image on fixed-amount tiers.
</ParamField>

<ParamField body="Tier met icon" type="image">
  Swaps the marker glyph for a custom image once a tier is met.
</ParamField>

<Note>
  These icon images are an app-block-only feature — a [web component](/components/order-goal/web-component)
  would set the marker glyph via CSS instead (the `--dkl-og-icon` mask).
</Note>

## Next steps

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

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