Cross Sell Upsell Engine

Cross-Sell and Upsell Engine

Overview

Cross-sells and upsells generate 10–30% incremental revenue with minimal customer acquisition cost. Every major e-commerce platform has apps that handle the recommendation logic without custom code. The key decisions are: which placement to start with (PDP, cart, or post-purchase), what recommendation logic to use (manual bundles vs. algorithm-based), and how to avoid checkout friction. Start with one placement and measure before expanding.

When to Use This Skill

• When average order value (AOV) is below industry benchmarks and you want to grow it without paid traffic
• When launching a new recommendation widget on PDP, cart, or checkout pages
• When replacing a generic "You may also like" carousel with affinity-based personalization
• When building a bundle builder or "complete the look" feature
• When wanting to A/B test recommendation placements

Core Instructions

Step 1: Choose the right tool for your platform

Step 2: Decide on placement — start with one

Recommendation: start with product page + cart page. Add post-purchase after measuring results. Only add checkout recommendations if you have data showing they lift revenue without hurting CVR.

Step 3: Set up recommendations on your platform

---

Shopify

Using Rebuy (recommended for full-featured setup):

1. Install Rebuy from the Shopify App Store 2. Go to Rebuy → Smart Cart to enable AI-powered cart recommendations — configure the number of products to show (2–3) and placement (cart drawer or cart page) 3. Go to Rebuy → Product Page Widgets to add a "Frequently Bought Together" widget below the Add to Cart button 4. Go to Rebuy → Post-Purchase Offers to add a one-click upsell on the order confirmation page 5. Rebuy uses Shopify's order history to compute co-purchase affinity automatically — no manual configuration needed 6. To create manual bundles: go to Rebuy → Data Sources → Manual Recommendations and pair specific products

Using Frequently Bought Together (simpler, cheaper):

1. Install from the Shopify App Store 2. The app automatically analyzes order history to suggest product pairs 3. Review auto-generated bundles under FBT → Bundles and remove irrelevant pairs 4. Configure the widget appearance to match your theme 5. Set a bundle discount (optional) — 5–10% off when both products are added together

For post-purchase upsells on Shopify:

• Use ReConvert or CartHook for post-purchase one-click upsell pages
• These show immediately after checkout is completed but before the thank-you page

---

WooCommerce

Using WooCommerce native cross-sells and upsells:

1. Go to WooCommerce → Products → [Edit any product] 2. In the Linked Products tab, add:

• Upsells: products to show on the product page as "You may also like" (higher-priced alternatives)
• Cross-sells: products to show in the cart sidebar

3. WooCommerce shows cross-sells in the cart automatically — no additional plugin needed

Using YITH WooCommerce Frequently Bought Together (free version available):

1. Install from the WordPress plugin directory 2. Go to YITH → Frequently Bought Together → General Settings and configure the widget title and discount amount 3. On each product's edit page, go to the FBT tab and manually select companion products, or enable auto-recommendations 4. The widget appears below the Add to Cart button automatically

For post-purchase upsells on WooCommerce:

• Use CartFlows + AutomateWoo for post-purchase funnel pages
• Or use WooFunnels / FunnelKit which includes post-purchase upsell flows

---

BigCommerce

1. Install Also Bought from the BigCommerce App Marketplace 2. The app analyzes your order history and automatically generates "Customers Also Bought" recommendations 3. Configure placement (product page, cart page) and number of products shown in the app settings 4. For manual control: go to the product editor in BigCommerce Admin and use the Related Products feature to manually specify related items

---

Custom / Headless

Use Rebuy's API or Recombee for headless storefronts:

Rebuy API (if your backend is Shopify/BigCommerce):

// Fetch recommendations from Rebuy for a given product
const response = await fetch(
  `https://rebuyengine.com/api/v1/products/recommended?key=${REBUY_API_KEY}&shopify_product_ids=${productId}&limit=4`
);
const { data } = await response.json();

Build co-purchase recommendations from order data (only if no third-party tool):

// Compute product affinity from co-purchase frequency
// Run nightly — minimum 1,000 orders for meaningful signal
async function computeProductAffinity() {
  const orders = await db.orders.findAll({ where: { status: 'completed' }, include: ['lineItems'] });

  const coMatrix: Record<string, Record<string, number>> = {};
  for (const order of orders) {
    const productIds = [...new Set(order.lineItems.map((li: any) => li.productId))];
    for (let i = 0; i < productIds.length; i++) {
      for (let j = i + 1; j < productIds.length; j++) {
        const [a, b] = [productIds[i], productIds[j]].sort();
        coMatrix[a] = coMatrix[a] ?? {};
        coMatrix[a][b] = (coMatrix[a][b] ?? 0) + 1;
      }
    }
  }
  // Store results and filter to pairs with at least 3 co-purchases
  // Serve from a cached API endpoint with 1-hour TTL
}

Step 4: Configure pricing and discount strategy

• Bundle discounts: 5–10% off when both products are added together — enough to motivate, not enough to erode margin
• Upsell price range: show upsells priced 10–50% above the current product; upsells above 2× the original price rarely convert
• Checkout recommendations: limit to 1–2 low-cost add-ons (under $30) — multiple recommendations at checkout increase abandonment
• Post-purchase offers: these can be higher-priced since the customer is already in a buying mindset

Step 5: Measure results

Track these metrics weekly in your recommendation app's analytics:

Best Practices

• Exclude out-of-stock items from recommendations — always — nothing is more frustrating than clicking a recommendation that is unavailable (Rebuy and most apps handle this automatically)
• Start with 3–4 recommendations max — showing more products creates decision paralysis and reduces CTR
• Manual overrides for new products — new SKUs have no purchase history; manually configure them as recommended alongside bestsellers for the first 30 days (all major apps have manual override)
• Refresh auto-recommendations after seasonal changes — purchasing patterns shift; review recommendations quarterly
• Track recommendation attribution separately — tag orders where a recommended item was added so you can measure true incremental AOV

Common Pitfalls

Related Skills

• @predictive-personalization
• @customer-retention-engine
• @conversion-rate-optimization
• @loyalty-program-optimization
• @email-marketing-automation

Nightly Product Affinity Computation Job

Problem/Feature Description

A mid-size outdoor equipment retailer has accumulated three years of order data across 8,000+ SKUs. Their current recommendation system uses simple category matching ("other products in Camping > Tents"), which drives poor click-through rates because it surfaces duplicates and irrelevant items. The analytics team has identified that customers who buy tent poles almost always buy tent stakes and groundsheets — but the system never surfaces these connections.

The engineering team wants to replace the category-matching approach with a data-driven affinity computation job. This job will process completed orders from the database, calculate which product pairs appear together frequently beyond what random chance would predict, and write the resulting scores back to a product_affinities table for the recommendation API to query. The job must be designed to run unattended on a schedule and produce reliable signal — meaning it needs to handle noise from low-volume pairs and avoid distorted scores introduced by wholesale/bulk purchase orders.

Output Specification

Write a self-contained TypeScript module affinity-job.ts that implements the full affinity computation pipeline. The module should export the main computation function and include inline comments explaining the algorithm.

Also produce a short design-notes.md explaining:

• How the affinity score is calculated (the formula used)
• What filtering is applied to orders before processing
• Why a minimum co-purchase count is required before a pair is recorded
• How the job is intended to be scheduled

Product Recommendation API for a Multi-Page E-Commerce Store

Problem/Feature Description

A fashion accessories brand is launching a recommendation engine to grow their average order value. They sell across four main surfaces: product detail pages (PDP), a cart drawer, a checkout summary panel, and a post-purchase confirmation page. The marketing team wants different recommendation types and limits on each surface, with a particular concern about the checkout page — past experiments have shown that showing too many suggestions there increases cart abandonment.

The team already has a product_affinities table populated by a nightly job, and a manual_recommendations table where merchandisers can pin specific product pairings (e.g., new arrivals that have no purchase history yet). They need a single getRecommendations API function plus a PLACEMENT_CONFIG object that drives what each page surface requests. The API must gracefully handle cases where affinity data is sparse (new store, new products) and must never surface out-of-stock items or recommend a product to itself. For upsell recommendations, the candidates must come from the same category and sit within a specific price band relative to the source product.

Output Specification

Write recommendations.ts containing:

• A getRecommendations(req) function
• A getUpsellCandidates(productId, limit?) function
• A PLACEMENT_CONFIG constant

Write recommendations.test.ts with at least 5 unit tests covering key behaviors of the functions above (mock the db layer as needed).

Also write a short api-notes.md describing:

• The layering strategy used when combining recommendation sources
• How the checkout page configuration differs from other placements and why

Recommendation Widget with Experiment Tracking

Problem/Feature Description

A home goods retailer has a working recommendation API and wants to roll out a React-based recommendation widget across their storefront. The growth team also wants to run a structured experiment comparing different recommendation algorithms (affinity-based vs. trending) against a control group. To make the experiment trustworthy, they need consistent assignment — a customer who sees "affinity" recommendations on Monday should still be in the affinity group on Friday, regardless of which device or browser session they use.

The data team has a separate concern: when a customer adds a recommended product to their cart, they need to know which algorithm drove that add, where on the page the widget was positioned, and which products were shown alongside it. This attribution data is essential to calculate whether the recommendation program is actually growing incremental revenue rather than just capturing purchases that would have happened anyway.

Output Specification

Produce the following files:

1. CrossSellWidget.tsx — a React component that fetches and renders recommendations 2. ab-testing.ts — a module with a function that assigns a customer to an experiment variant 3. analytics.ts — a module with a function that fires the add-to-cart tracking event 4. widget-notes.md — brief notes covering:

• How the widget handles loading states and empty results
• What data is captured in the add-to-cart event and why
• How A/B variant assignment works and why it's designed that way

Input Files

No additional files are provided. Use standard React patterns and assume SWR is available as a dependency.