Related Items

Recommend products based on price, brand and more.

Code Level

Intermediate

Published

 

Example Description

In this example, we added a Related Products area to a Wix Stores Product page. This area displays products that relate to the current product based on relationships that we define.

Example Code

How We Built It

The Collection We Added: related-products

The related-products collection we added has the following fields:​

  • Product A: A reference to a product in the Products collection

  • Product B: A reference to a product in the Products collection

 

This collection is where we manually created a relationship between products. Each item in the collection represents two items in the Products collection that we decided should relate to each other. Note that a product may appear in both the Product A and Product B fields.

Displaying Related Products

On the Product page, we created the Related Products area in a repeater that is inside a strip. The repeater is set to display a maximum of four items, and each repeated item has elements that display the related product’s image, name, and price.

 

When the Product page loads, it tries to find related products in the following ways:

  1. It queries both the Product A and Product B fields in the related-products collection to find any products that are related to the current product.

  2. It queries the Products collection for any products whose price is 20% greater or 20% less than the current product.

 

If either query returns results, it displays those results in the repeater. If no related products are found, the repeater is hidden.

​​

Next Steps

  1. Open this example in the Editor to work with the template.

  2. Publish the site and refresh your browser so the Stores collections appear in the Database.

  3. Learn how to work with examples in Corvid.​

APIs We Used

Related Articles

Related Examples

Add to Cart Gallery

Let customers to add products to their cart

INTERMEDIATE

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER