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:
LimitationsAnchor 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 guidelinesAnchor 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.
- Use phrases such as “Pairs well with” for the section header to explain to your customers why you're displaying the products.
Implementing complementary productsAnchor 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