Show complementary 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

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:

• Complementary product recommendations should usually be placed near the top of the product page, typically in the product information section, near the original product image.
• The product recommendations API serves up to 10 complementary products for each product. We recommend showing 2-3 products by default, and paginating for additional products.
• 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 complementary products section at all. The placeholder is swapped with the actual complementary products after you load them.
• Use phrases such as “Pairs well with” for the section header to explain to your customers why you're displaying the 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.