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

# Overview

> Drop-in storefront web components for Discount Kit Live

Live Components are a set of `<dkl-*>` web components that render discount UI
directly in your storefront — a [volume picker](/components/volume-picker/overview), a
[discount-aware price](/components/price/overview), a [max-discount badge](/components/discount-badge/overview),
and an [order-goal progress bar](/components/order-goal/overview). They read the same
[Discount Kit Live data](/live/introduction) you already sync to your storefront, are
**server-rendered** so they paint with **no flicker**, and theme entirely through
`--dkl-*` CSS styling tokens.

<Note>
  These components require the discounts they display to be tagged `dk:live` and synced
  to your storefront. See the [Live introduction](/live/introduction) for how syncing works.
</Note>

## Enable the 'Discount Kit Live' app embed

Every component depends on the **Discount Kit Live** app embed. Enable it once, per
theme:

<Steps>
  <Step title="Open the theme editor">
    In the Shopify admin, go to **Online Store → Themes** and click **Customize**.
  </Step>

  <Step title="Find the app embeds">
    Open **App embeds** in the left sidebar.
  </Step>

  <Step title="Enable Discount Kit Live">
    Toggle **Discount Kit Live** on, then click **Save**.
  </Step>
</Steps>

The embed loads the shared runtime (styles + behaviour) site-wide and pre-renders the
data each component needs. Without it enabled, the components have nothing to render
from.

<Info>
  The embed also exposes a **Debug mode** toggle and a **Custom CSS** field. Debug mode
  logs both the standard storefront events and every Discount Kit Live component event
  (mount/unmount, tier-change, price-change) to the browser console; Custom CSS is a
  convenient place to set global `--dkl-*` [styling tokens](/components/global-styling).
</Info>

## Two ways to place a component

Each component can be added either as a **theme app block** (configured in the theme
editor) or as a **web component** (dropped straight into theme markup). They render
identically — the same defaults back both paths.

<CardGroup cols={1}>
  <Card title="App blocks" icon="puzzle-piece">
    Add **DK: Price**, **DK: Volume Groups**, etc. through the theme editor. Every
    setting (colours, spacing, labels) is exposed in the editor — no code. This is the
    right choice for most merchants, and the only way to render in **product cards** on
    collection pages.
  </Card>

  <Card title="Web Components" icon="code">
    Drop the element directly into your theme's Liquid — e.g. `<dkl-price></dkl-price>`.
    On a product page it needs **zero attributes**: it renders from a pre-staged carrier
    with no flicker. For developers customizing themes directly.
  </Card>
</CardGroup>

See [App blocks vs. Web Components](/components/app-blocks-vs-web-components) for a full
comparison and how to choose.

## Prerequisites

Beyond enabling the **Discount Kit Live** app embed and tagging your discounts `dk:live`, the
Live Components need one thing from your **theme**: support for Shopify's
[**Standard Storefront Events**](https://shopify.dev/docs/storefronts/themes/best-practices/standard-events).

The components react to shopper actions — selecting a variant, changing the cart — by listening
for these events, so your theme must **publish** them for the components to update in response:

* **`shopify:product:select`** drives variant-aware updates:
  * the [price](/components/price/overview) re-prices on a variant change
  * the [volume picker](/components/volume-picker/overview) re-calculates the selected tier on variant change
  * the [badge](/components/discount-badge/overview) re-picks the best discount
* **`shopify:cart:lines-update`** drives cart-level updates:
  * the [order goal](/components/order-goal/overview)'s progress updates as the cart changes.

This new way of tracking standard storefront events ensures that the components work consistently across all themes, once the new events are fully adopted by developers, rather than relying on theme specific event systems.

Shopify's Horizon v4.0.0+ comes with built in support for these. For older themes, follow Shopify's [Standard Storefront Events](https://shopify.dev/docs/storefronts/themes/best-practices/standard-events)
guide to integrate the events into your theme.

[Shopify's Standard Actions](https://shopify.dev/docs/storefronts/themes/best-practices/standard-actions) are globally distributed across all Shopify storefronts already, so you don't need to worry about integrating them into your theme unless you need to define custom actions.

<Note>
  The components still **render** without the standard events — they're server-rendered from their
  carrier or app block, so they paint with no flicker regardless. They just won't **react** to
  variant or cart changes until your theme publishes the events.
</Note>

## Theming

All component styling is driven by `--dkl-*` CSS styling tokens — global brand tokens shared
by every component, plus per-component tokens for fine control. See
[Styling](/components/global-styling) for the full token reference, how to apply them, and how
to target structural elements.

## The components

<CardGroup cols={2}>
  <Card title="Discount Price" icon="tag" href="/components/price/overview">
    `<dkl-price>` — a theme-agnostic price that shows the discounted amount and a
    struck-through original as tiers and variants change.
  </Card>

  <Card title="Volume Picker" icon="layer-group" href="/components/volume-picker/overview">
    `<dkl-volume-picker-radio-groups>` — a PDP selector for volume/tiered discounts, one
    radio card per tier.
  </Card>

  <Card title="Discount Badge" icon="badge-percent" href="/components/discount-badge/overview">
    `<dkl-discount-badge>` — a "Save up to 20%" / "Save up to \$5.00" badge for products
    and product cards.
  </Card>

  <Card title="Order Goal" icon="bullseye-arrow" href="/components/order-goal/overview">
    `<dkl-order-goal>` — a cart progress bar toward an order-goal discount's spend tiers.
  </Card>
</CardGroup>