why cart upsells work

Cart upsell apps can cost $25–$50/month and often add significant JavaScript weight. Shopify's native Product Recommendations API gives you the same data for free — you just need to wire it up.

the api endpoint

GET /recommendations/products.json?product_id={{ product.id }}&limit=3&intent=related

This returns up to 3 related products based on purchase history, collections, and tags. The intent=related parameter targets complementary products (not the same product in different variants).

the cart snippet

<div class="cart-upsell" data-product-id="{{ cart.items.first.product_id }}">
  <p class="upsell-label">// you might also like</p>
  <div class="upsell-grid" id="upsellGrid"></div>
</div>

fetching recommendations

const el = document.querySelector('.cart-upsell');
if (el) {
  const pid = el.dataset.productId;
  const url = '/recommendations/products.json?product_id=' + pid + '&limit=3&intent=related';
  fetch(url)
    .then(r => r.json())
    .then(data => {
      const grid = document.getElementById('upsellGrid');
      grid.innerHTML = data.products.map(p =>
        '<a href="' + p.url + '" class="upsell-item">' +
        '<img src="' + p.featured_image + '" alt="' + p.title + '">' +
        '<span>' + p.title + '</span>' +
        '<span>' + Shopify.formatMoney(p.price) + '</span>' +
        '</a>'
      ).join('');
    });
}

placement and timing

Place the upsell block after the cart line items, before the subtotal. Trigger the fetch on cart drawer open or on cart page load. Cache the result in sessionStorage to avoid repeat API calls during the session.