The tutorial walks developers through adding a related‑products section to a Wix Stores product page using Velo. It starts by creating a strip with a title and a repeater, assigning IDs to the strip, repeater, and its child elements (image, name, price, product‑page link). Two related‑product strategies are then implemented. The first strategy selects items whose price falls within ±20% of the current product’s price, using an async function that queries the read‑only Stores product collection with Wix‑data, excludes the current product, limits results to four, and populates the repeater via onItemReady, collapsing the strip if no items are found. The second strategy pulls products of the same brand from a custom “Related Products” collection that stores pairs of product references (Product A, Product B). It runs two parallel queries with Promise.all, concatenates the results, and falls back to the price‑based strategy when no brand matches exist. The loadRelatedProducts function orchestrates both strategies, and the video demonstrates previewing the page, testing both scenarios, and points viewers to Wix documentation for further reference.
Chapters
In this video, I'll show you two different ways to add related products to a WIX store's page. One based on a price range and another based on the product brand. I'll also show you how to use both strategies together. Let's get started on the store's product page. I've already added a strip that will serve as a container to present related products. On the strip, I've added a section title and a repeater. The repeater includes a product image, title and price. Now let's review the product's collection. The store product catalog is a read only collection under the store's folder. Each product includes fields for the product's name, main media as the product image formatted price, and other product details, including the Product page URL which links to that product's actual page. We'll start by setting IDs for the elements in the strip. These IDs will be used later in the code to reference elements. We'll set the strip ID to Related items and the repeater ID to Related items. Repeater. In the repeater, we'll set the image ID to productimage, the name ID to Product name and the price ID to product price. Also, we'll set the Product page element ID to productpage. Next, we'll get the ID of the current product displayed on this page using the Product page get product function. Then we'll call the load related products function from $w onready. Notice we don't return the promise returned from load related products directly from $w onready. If we returned a promise from $w on ready, it would delay the page load until that promise is resolved. Now let's present related products based on a similar price range. We'll create a new async function Related products by price and call it from load related products. Then we'll import WIX data. In this example, we define similar price range as plus or minus 20%. We'll use Wix data to query. We'll also add a filter to exclude the current item on this product page from the query results. To show related products on the page, we'll add the function showrelated products and at the end of Load related products. Next we'll check if there are any related products. If there are any found, we'll limit that number of items to display to 4 by using the arraysplice function. Then we'll set those items to the data property of the repeater called relatedItemsrepeater. Also, we'll set the on itemready of the repeater to the function called relateditem Ready. We'll write this code in a bit. On the product page, we'll expand the strip. If no related items are found, we'll collapse it. Now we'll call the function relateditemready to display related products by price range in the repeater. The relatedItem ready function passes 2 parameters $W for the current repeater item and product for the data item. Next, we'll set the product image to the product main media. The the product name, product name and the product price to formatted price. Then we'll set the on click event of the image to navigate to the product page URL. Let's preview the page. The related products appear based on the price range of the current item. Let's try a second strategy displaying items of the same brand as this one. In this example, we'll display other pompom brand products as the related products of the Pompom lip balm. Additionally, we'll set a condition to display products based on the first strategy by similar price range. Also, if there are no related products of the same brand, we'll use that first strategy to display products based on the similar price range. The Related products collection has two Product A and Product B. Both of these fields reference the products collection in the Stores folder. Each item in that collection defines two related products. Now let's write the code. We'll add a function called Related productsbytable. This function performs two dataset queries in parallel. Each query checks either the product A or productB field for the current item and returns the related product. In the other field, we'll use awaitpromise all to wait until both queries are completed. Promise all transforms an array of promises into a single promise that returns an array of results. In this example, the results are the WIX data query results. Next, we'll concatenate related products from both queries by extracting the ID of the related product from each query. Now we'll need to change the load related products to call related products from both strategies. Again, we'll use awaitpromise all to run both checks and get an array of results. Next, we'll check if there are any brand related products. If there are, these products will appear on the page. If there aren't any, we should show related products within a similar price range. Let's preview the page and test how it works. Check to see if the Pompom lip balm displays related pompom products while another product displays related items based on a similar price range. Now you're ready. This video is always here, so come back and watch it again whenever you need help. You can also visit our documentation page for tutorials, articles, example code, and more.
