Introduction
When a user reaches a product page and thinks "not bad, but I'd like to see other options before deciding," what happens next depends on whether alternatives are right there. If not, they go back to a search engine and start comparing with other stores' products. Whether comparison finishes inside your site or outside it is a fork that directly affects sales.
This article covers the related products feature built for an EC site selling motorcycle gear: the conditions used to select products, the order they're shown in, and how display speed is maintained.
What Related Product Display Is
Lining Up Similar Items to Support Comparison
Related products shows other items from the same category as the one being viewed. A user looking at a jacket sees other designs, other colors, and similar price ranges alongside it. The goal isn't adding items to the order — it's helping users decide with confidence. Putting the options in front of them answers "I want to see what else there is" without leaving the site.
A Completely Different Role from Outfit Suggestions
Although both are recommendations, this feature selects the opposite way from outfit suggestions ("Complete the Fit"). That one switches the category to build combinations; this one keeps the category to create a level playing field for comparison.
As the table shows, the two recommendation types split their roles by whether the category is switched or kept. Placing both on a product page covers "buy together" and "compare and choose" at the same time.
How Products Are Selected
Conditions to Match and Conditions to Exclude
Candidates are products in the same category, same gender, and same season (or all-season). Offering women's gear or summer items as comparison targets for a men's fall/winter jacket doesn't help the decision. The currently viewed product itself is also excluded — obvious, but forget it and you get the awkward sight of a product listed as related to itself, so it's written down as an explicit condition.
Priority When There Are Many Candidates
When dozens of products qualify, which ones appear first changes the quality of the suggestion. Three factors take priority here:
- Similar price range: for a 50,000-yen jacket, other jackets around 50,000 yen come first
- In stock: products available now rank above out-of-stock ones
- Newer arrivals: with all else equal, recently added products come first
The aim is an order that feels natural as a set of candidates, imagined from the user's side of the screen. This priority, too, is fixed as a rule rather than left to anyone's judgment on the day.
Presentation and Speed
Limiting the Count, Letting Images Do the Talking
More related products is not better — pile them up and choosing gets harder. So the display is limited to a handful, with product images front and center and only the price and product name attached. The entry point of comparison is being able to see differences at a glance, so detailed text is left to the product pages themselves. The layout also adapts: horizontal scrolling on smartphones, a multi-column grid on desktop.
Fetching Together with the Main Product to Cut Round Trips
Related product data is fetched in the same request as the main product information when the page loads. Compared with fetching separately, this reduces the number of round trips and shortens the wait. Fetched results are then reused as a cache (a temporary saved copy) for a set time, so a stream of users hitting the same product page doesn't add load on Shopify (the commerce platform holding the product data) behind the scenes.
Architecture
In one sentence: products from the same category are gathered, re-sorted into a comparison-friendly order, and only a handful are shown.
Summary
Related product display turned out to be a stack of small rules: keep the category, drop the current product, sort for easy comparison, and show just a few. It isn't flashy, but it redirects the "go back and search elsewhere" exit into browsing within your site — a high-return feature for the effort involved. Combined with outfit suggestions, the product page shifts from a one-product description into something closer to a shopping companion.