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

# Enable the Upsell Section

> Turn the Upsell Offers feature on in your Shopify theme — app embed activation, block placement on PDP and cart, and verifying the integration.

The storefront-side of Upsell Offers (the PDP panel, cart-drawer carousel, free-gift progress bar, slot meter, and the JS that wires them up) is bundled inside Glood's **app embed**. The merchant flips one toggle in the Theme Editor and every page on the store can render upsell offers — no theme code required.

This page walks through the activation steps and how to verify it.

## Step 1 — Enable the app embed

The app embed loads `glood-upsell.js` + `glood-upsell.css` on every storefront page and emits the `window.glood.upsell.*` namespace the theme blocks (and the mini-cart adapter) read.

1. From your Shopify admin go to **Online Store → Themes**.
2. Find your live theme, click **Customize** to open the Theme Editor.
3. In the bottom-left of the navigation panel, click **Theme Settings**.
4. Select **App embeds**.
5. Find **Glood.AI Recommendations** in the list and toggle it **ON**. This is the master switch for every Glood feature (recommendations, search, bundles, upsell).
6. **Click the embed name to expand its settings panel.** Tick the **Enable upsell offers** checkbox. This is the feature-specific gate that injects the upsell asset bundle (`glood-upsell.js`, `glood-upsell.css`, the `window.glood.upsell.*` inline payload, and the `gloodSwiper` bundle) into every storefront page. With the main toggle ON but this checkbox OFF, no upsell panel renders even if the theme blocks are placed.
7. Click **Save** in the top right.

<Note>
  The app embed must be enabled for ANY Glood feature to work — recommendations, search, bundles, and upsell offers all share the same embed. If you switch themes later, you'll need to re-enable the embed AND re-tick **Enable upsell offers** on the new theme.
</Note>

### Quick verification

After saving, open any product page on your storefront and check the browser console:

```js theme={null}
typeof window.glood?.upsell   // → 'object' when the embed + checkbox are both on
```

If it returns `'undefined'`, re-check both the master toggle and the **Enable upsell offers** checkbox, then hard-refresh the page (Cmd+Shift+R) — Shopify caches the storefront HTML.

### What the embed loads

| Asset                      | Purpose                                                                                                                                                                                                                     |
| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `glood-upsell.js`          | Renders the pick panel, free-gift progress, and mini-cart carousel. Auto-listens to theme `[name="id"]` / `[name="quantity"]` form events.                                                                                  |
| `glood-upsell.css`         | Base styling for the panels — themes can override via CSS or pass `classNames` through `Glood.upsell.miniCart.hydrate(...)`.                                                                                                |
| `app-embed.liquid` payload | Emits `window.glood.upsell.cartPickOffers`, `window.glood.upsell.cartPickProductHydration`, and `window.glood.upsell.cartFreeGiftOffers` — the inline data the storefront JS reads (no Storefront API round-trip required). |
| `gloodSwiper` bundle       | Powers the mini-cart carousel. Loaded synchronously alongside the upsell asset.                                                                                                                                             |

## Step 2 — Drop the theme blocks

The embed gives you the data and the script; the **blocks** are what actually render the panel on a specific surface.

### PDP block

1. In the Theme Editor, open a **Product** template.
2. In the section that should host the upsell (usually *Product information* below the price/description), click **Add block** → **Glood Upsell for PDP**.
3. Save.

The PDP block renders the pick-offer panel, the free-gift progress bar, the slot meter, and a Confirm button that bundles the picked gifts into the theme's Add-to-cart POST.

### Cart block

1. Open the **Cart drawer** section AND the `/cart` page section.
2. **Add block** → **Glood Upsell for Cart**.
3. Save.

The Cart block surfaces:

* Free-gift progress and "Auto-added" / "✓ In cart" states.
* Pick offers triggered by the cart contents but not yet redeemed.

### Optional — mini-cart adapter (theme-owned cart drawers)

If your theme's cart drawer is theme-owned (hand-rolled, custom vendor, Dawn-customised) and doesn't expose a Section block slot, drop a marker `<div>` per cart line instead:

```liquid theme={null}
{%- for item in cart.items -%}
  <tr class="cart-item">
    {% comment %} ...existing cart-item markup... {% endcomment %}
  </tr>
  <tr>
    <td colspan="4">
      <div data-glood-mini-cart-line
           data-line-key="{{ item.key }}"
           data-line-product-id="{{ item.product_id }}"
           data-line-variant-id="{{ item.variant_id }}"
           data-line-qty="{{ item.quantity }}"
           data-line-properties-json="{{ item.properties | json | escape }}"
      ></div>
    </td>
  </tr>
{%- endfor -%}
```

Then hydrate on every cart-rendered event the theme fires:

```js theme={null}
document.addEventListener('cart:updated', () => Glood.upsell.miniCart.hydrate())
```

Full integration contract — including `hydrate()` options, callbacks, and atomic-swap details — lives in the [developer reference](/for-developers/upsell-offers-js-triggers#mini-cart-adapter).

<Note>
  If the theme's cart drawer is built from a Section block slot (e.g., Dawn's default), you only need the **Glood Upsell for Cart** block — no marker divs. The mini-cart adapter is for themes where the Cart block can't be dragged in.
</Note>

## Step 3 — Verify

1. **Visit a PDP** for a product that's a trigger for one of your active offers. The pick-offer panel should render below the price/description.
2. **Pick a gift, click Add to cart** — the gift should appear in the cart with the configured price (e.g., `+€1`).
3. **Cross a free-gift threshold** (add enough to cart). The gift should auto-add at €0.
4. **Open the cart drawer** — the trigger product should show an "Add gifts" pill that expands into a carousel; redeemed gifts should show a "Reselect" CTA.

If nothing renders:

* Confirm the app embed is **ON** in the Theme Editor and you **Saved**.
* Confirm an active offer exists in the Glood dashboard and its trigger matches the product you're viewing.
* Open the browser DevTools console and look for `[Glood.upsell]` warnings — the storefront logs actionable messages when offers are misconfigured or block placements are missing.
* Hard-refresh the page (Cmd+Shift+R / Ctrl+Shift+R) — Shopify caches the storefront HTML with the embed's script src baked in.

## What's next

* [Pick offers & free-gift offers explained →](/upsell-offers/introduction)
* [JS triggers & callbacks →](/for-developers/upsell-offers-js-triggers)
* [Block placement & auto-listener behaviour →](/for-developers/upsell-blocks-integration)