> ## 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 blocks vs. Web Components > The two ways to place a Live Component, and when to use each Every Live Component can be placed two ways. They render the **same component** from the **same data** — the difference is who places it, how it's configured, and where it's allowed to go. * **App blocks** — added through the **theme editor**. No code; every setting is a control in the editor. The right choice for most merchants, and the only way to render inside **product cards** on collection pages. * **Web Components** — the `` element written **directly into your theme's Liquid**. Configured with `data-*` attributes and `--dkl-*` CSS. For developers customizing a theme by hand. (These are labelled "Web Components" on each component page.) ## At a glance | | App block | Web Component | | ------------------------------------ | ---------------------------------------- | --------------------------------- | | **Added by** | Theme editor (drag-and-drop) | Hand-written in theme Liquid/HTML | | **Configuration** | Editor settings panel | `data-*` attributes | | **Styling** | Editor pickers (colours, spacing, fonts) | `--dkl-*` CSS styling tokens | | **Which discount** | The block's **Discount** picker | `data-discount-id` attribute | | **Product cards / collection grids** | ✅ Supported | ❌ Product-page only | | **Needs the app embed** | ✅ Yes | ✅ Yes | | **No-flicker render** | ✅ Inline server render | ✅ From a head carrier | | **Best for** | Merchants, no code | Developers, full control | Both paths require the **Discount Kit Live** app embed to be enabled — it loads the shared runtime (styles + behaviour) and pre-renders the data each component reads. See [Enable the Global App Embed](/components/overview#enable-the-‘discount-kit-live’-app-embed). ## App blocks An app block is a theme block you add in the editor — **DK: Price**, **DK: Volume Groups**, **DK: Discount Badge**, or **DK: Order Goal**. Drop it into a section or product-card slot, and configure it entirely through the editor's settings panel. ```text theme={null} Online Store → Themes → Customize → (add block) → DK: Price ``` What an app block does for you: * **Resolves the eligible discount itself** — using the shared eligibility rules, so it agrees with the custom-tag path. When more than one discount applies, it renders the first eligible one, or a specific one chosen in its **Discount** picker setting. * **Exposes every option as an editor control** — colours, spacing, labels, and behaviour toggles. Your choices are written into a scoped `