Skip to main content
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.
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.

​
Quick verification

After saving, open any product page on your storefront and check the browser console: 
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

AssetPurpose
glood-upsell.jsRenders the pick panel, free-gift progress, and mini-cart carousel. Auto-listens to theme [name="id"] / [name="quantity"] form events.
glood-upsell.cssBase styling for the panels — themes can override via CSS or pass classNames through Glood.upsell.miniCart.hydrate(...).
app-embed.liquid payloadEmits 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 bundlePowers 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: 
{%- 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: 
document.addEventListener('cart:updated', () => Glood.upsell.miniCart.hydrate())
Full integration contract — including hydrate() options, callbacks, and atomic-swap details — lives in the developer reference.
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.

​
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