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.
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:
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.
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
Open this example in the Editor to work with the template.
Publish the site and refresh your browser so the Stores collections appear in the Database.
Learn how to work with examples in Velo.
Related Examples
Did this help?
|
Thanks for your feedback!
Product Configurator
Let customers create one-of-a-kind products.
Advanced
Product Reviews
Build trust with customer ratings and reviews of your products.
Advanced
Related Posts
Display related posts in your blog post page
Beginner