Show related products on product pages

To implement product recommendations, you'll use the following:

• The recommendations object
• The /{locale}/recommendations/products endpoint of the Product Recommendations API

The recommendation algorithm predicts the most relevant products based on the product that a customer is interacting with. The criteria that the algorithm uses depends on the merchant's online store. In general, it might take into account the following factors:

• Purchase history: Products that have historically been purchased together.
• Product description: Products with similar descriptions.
• Related collections: Products from collections that the current product is part of, excluding collections with handles all and frontpage.

The criteria that's used depends on a merchant's online store, and the recommendation intent. The following outlines which criteria is used, and when:

The Shopify Search & Discovery app enables users to customize product recommendation and search results, which can impact results from storefront search and the Ajax Product Recommendations API. To learn about how these results can be impacted, visit the Shopify Help Center.

The following list describes some limitations of the recommendation logic:

• You can't customize the recommendation algorithm to exclude specific products. However, you can choose which of the returned products to show with JavaScript.
• The recommendation algorithm doesn't use orders that have been imported from another store or ecommerce platform to generate product recommendations.
• Products that are out of stock or set to a price of 0, gift cards, and products in the visitor's cart aren't included in recommendations.

The following best practices can help to make sure that you're displaying recommended products in a way that improves the customer experience:

• The recommendation algorithm associates up to ten products with each product, in order of relevance. For example, the first recommended product is more relevant than the tenth recommended product. For this reason, it's a good idea to limit your recommendations to four products for each product page to promote only the most relevant recommendations.
• Make sure that you load the proper image size for the product card.
• Because the recommendations are loaded asynchronously with JavaScript, you might want to add an empty state or not show the recommended products section at all. The placeholder is swapped with the actual recommended products after you load them.
• Use phrases such as “You might also like” for the section header to explain to your customers why you're displaying the recommended products.

In this implementation, the section content builds the general display by looping through each product returned through the products attribute of the recommendations object. However, this object isn’t populated when the section is initially rendered, so you need to use JavaScript to retrieve the populated section content through the section response of the Product Recommendations API.