Mastering Shopify Upsells: Fetching Product Recommendations for Multiple IDs with the Storefront API

As Shopify developers, we're always looking for ways to enhance the customer experience and drive conversions. A common request, especially when building custom cart experiences, is to display upsell product recommendations based on multiple items in a customer's cart.

While the standard Shopify Product Recommendations API is powerful, it's primarily designed to fetch recommendations for a single product ID. This can be a challenge when you need to provide dynamic upsells considering the entire cart's contents. In this tutorial, we'll explore a workaround using the Shopify Storefront API to achieve this functionality, drawing on insights from the Shopify Developer Community.

The Challenge: Single Product Recommendations API

The productRecommendations query in Shopify's APIs is excellent for finding related products to a given product_id. This is typically used on product pages to suggest similar or complementary items, and it's also where you can learn more about how these recommendations are generated.

However, when you have a cart with several unique products, you need recommendations that consider all of them, not just one. A developer recently highlighted this, asking for an API that could fetch recommendations with multiple product IDs to implement cart upsells.

The Solution: Multiple Calls with the Storefront API

The recommended approach, when a native multi-ID API isn't available, is to leverage the Storefront API by making multiple calls. Here's the conceptual breakdown of how to implement this:

1. Identify Product IDs in the Cart: For each product currently in the customer's cart, extract its unique product_id.
2. Make Individual productRecommendations Calls: For each product_id obtained from the cart, you will perform a separate productRecommendations query using the Storefront API.
   • The productRecommendations query requires a productId (of type ID) and optionally an intent (which defaults to RELATED).
   • The Product object returned includes details like title, description, price, images, and options, allowing you to manage products in the merchant's store.
3. Combine and Deduplicate Results: Once all the individual requests are completed, you will receive a list of recommended products for each product in the cart. Your next step is to combine these lists into a single set of recommendations and omit any duplicate products that might appear across different calls.

Conceptualizing the Storefront API Query

While the sources don't provide a complete code example for multiple calls, we can understand the structure of a single productRecommendations query. The basic query looks like this:

graphql
query ProductRecommendations {
    productRecommendations(productId: "gid://shopify/Product/1234567890", intent: RELATED) {
        # productRecommendations fields
        # e.g., id, title, handle, images, priceRange, etc.
    }
}

In practice, for multiple products, you would iterate through your cart items, constructing and executing a query similar to the above for each productId.

Why This Works (and its Current Limitations)

This method provides a functional workaround to display upsell products based on the entire cart. By making multiple requests, you can gather a comprehensive list of recommendations.

However, it's important to acknowledge that this approach, while effective, might not be as efficient as a dedicated API endpoint designed to handle multiple product IDs in a single request. The community has expressed a desire for a more streamlined, native API for this use case. For complex needs or if performance becomes a significant bottleneck, developers might also consider looking at third-party solutions.

Conclusion

Until a native multi-ID product recommendations API is added to the roadmap, using multiple calls to the Shopify Storefront API's productRecommendations query is a robust solution for implementing dynamic upsells in your cart. By carefully combining and deduplicating the results, you can provide a richer, more relevant recommendation experience for your customers.

Keep an eye on the Shopify Developer Community forums; the discussion around a multi-ID API continues, indicating a potential future enhancement!