Show complementary products on product pages
Complementary products are products that are often bought in addition to a selected product. They're often referred to as something that “pairs well with" the current product. You can display complementary products on the product page to help customers discover new products.
In this tutorial, you'll learn how to show complementary products in your theme.
To implement product recommendations, you'll use the following:
- The
recommendationsobject - The
/{locale}/recommendations/productsendpoint of the Product Recommendations API
Limitations
Anchor link to section titled "Limitations"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.
UI guidelines
Anchor link to section titled "UI guidelines"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.
Implementing complementary products
Anchor link to section titled "Implementing complementary 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.