How do I add cross-sell recommendations to cart and PDP pages?

To add cross-sell recommendations to cart and product detail pages (PDPs), the usual approach is:

1. Choose the recommendation source

   • Use a recommendation engine (Shopify Search & Discovery, Algolia, Constructor, Dynamic Yield, Clerk, Nosto, etc.), or
   • Use your own logic based on product tags, collections, purchase history, or “frequently bought together”.

2. Expose recommendation data on the page

   • PDP: recommend related products based on the current product.
   • Cart: recommend complementary products based on items already in the cart.

3. Render the recommendations

   • Display a small carousel/grid under the main product info on PDP.
   • Display a “You may also like” or “Complete your order” section in the cart drawer/cart page.

4. Make it easy to add to cart

   • Each recommendation should have:
     • product image
     • title
     • price
     • “Add to cart” or “Quick add” button

---

Implementation pattern

PDP

• Detect the current product ID/handle.
• Fetch recommended items for that product.
• Render them in a block beneath the product description or near the add-to-cart button.

Cart

• Read the cart contents.
• Fetch recommendations using the items in the cart.
• Exclude items already in the cart.
• Render products in the cart page or drawer.

---

Example flow

PDP

const currentProductId = window.productId;

fetch(`/recommendations?product_id=${currentProductId}`)
  .then(res => res.json())
  .then(data => renderCrossSells(data));

Cart

fetch('/cart.js')
  .then(res => res.json())
  .then(cart => {
    const variantIds = cart.items.map(item => item.product_id);
    return fetch(`/recommendations?product_ids=${variantIds.join(',')}`);
  })
  .then(res => res.json())
  .then(data => renderCrossSells(data));

---

UX best practices

• Keep it to 3–6 products max.
• Show complementary items, not duplicates.
• Use “Quick Add” for low-friction conversion.
• Don’t overload the cart page; keep the module compact.
• For PDPs, place recommendations below the fold or under the buy box.

---

If you’re on Shopify

Common ways:

• Shopify Search & Discovery: configure complementary products manually.
• Theme section: add a custom recommendation section in product.liquid or main-product.liquid.
• Cart drawer/cart template: add a cross-sell section in the cart component.

---

If you want, I can give you:

• a Shopify Liquid example
• a React/Next.js example
• or a cart drawer + PDP implementation pattern for your specific platform.