When a shopper is on a product page, they are in one of two modes: ready to buy, or still looking. If they are still looking, the product page needs to help them move sideways — to a similar product, a different variant, something related — without starting the entire browsing process over from scratch.
Related products and cross-sell sections serve this purpose, but they only work when they are relevant, visible, and informative enough for the shopper to decide without clicking into each suggestion.
Placement decides whether anyone sees them
Many stores put related products at the very bottom of the product page — below the description, below reviews, below the shipping policy, below a block of legal text. By the time the shopper scrolls that far, they have either already decided to buy or already left.
The more effective position is below the main product information and above secondary content like reviews and policies. In this position, related products catch the shopper at the moment they are most likely to browse further — after evaluating the current product but before getting lost in the fine print.
Another option is a sticky section or a “more from this collection” bar that stays visible as the shopper scrolls. This is less common because it can feel intrusive if not done carefully, but on mobile where scrolling is fast and overshooting is common, a persistent suggestion area can work.
Relevance is non-negotiable
Showing four random products from the same collection is technically a “related products” section. It is also useless if the products are not genuinely related to what the shopper is looking at.
Relevance means the suggestions should answer an implicit question: “What else would someone looking at this product also consider?” For a summer dress, that might be sandals, a handbag, or another dress in a different color. It should not be a winter coat or a kitchen towel from the clearance section, even if those are technically in the same store.
Shopify’s default recommendation engine and most recommendation apps use algorithms based on purchase history and browsing patterns. The output is only as good as the data, and for smaller stores with less traffic, the recommendations can feel random at first. In that case, manually curating related products — picking four or five items that genuinely complement each other — is better than relying on an algorithm that doesn’t have enough data to be useful yet.
Show enough information to compare
Baymard Institute’s research found that 68% of desktop sites are missing at least one recommended attribute when displaying cross-sell suggestions. That means a shopper sees a row of product thumbnails with names but no prices, or prices but no ratings, or no indication of available sizes.
When the shopper has to click into each suggestion just to check the price, cross-sell becomes cross-friction. Each click takes them away from the product they were evaluating, and many shoppers simply won’t bother.
At minimum, each related product card should show: a clear photo, the product name, the price (with sale price if applicable), and a rating if reviews exist. If variant information matters — colors, sizes — showing a small indicator (color swatches, “4 sizes available”) lets the shopper pre-filter without clicking.
Cross-sell on the product page versus in the cart
There’s an important distinction between cross-sell on the product page and cross-sell at checkout. On the product page, the shopper hasn’t committed yet. They are exploring. Cross-sell here is about discovery — “you might also like this.” The goal is to help them find something they want.
In the cart or at checkout, the shopper has committed. Cross-sell at this stage is about adding complementary items — “don’t forget a phone case for that phone.” But Baymard’s research on checkout flow cross-sells warns that aggressive suggestions during checkout can distract from completing the purchase. The shopper starts second-guessing, reopening product pages, and sometimes abandoning the cart entirely.
The takeaway: be generous with suggestions on the product page, where the shopper is in browsing mode. Be restrained in the cart, where the shopper is in buying mode. The same row of four products can feel helpful in one context and annoying in the other.
Quick-view as a navigation shortcut
A pattern that bridges product page cross-sell and navigation is quick-view: tapping a related product opens a summary overlay instead of navigating to a new page. The overlay shows the photo, price, key variants, and an add-to-cart button. If the shopper wants more detail, they can click through to the full product page. If not, they close the overlay and are right back where they started.
Quick-view reduces the navigation cost of exploring related products to near zero. The shopper doesn’t lose their place, doesn’t need to wait for a new page to load, and can evaluate several related items without the mental overhead of navigating back and forth.
On mobile, quick-view usually takes the form of a slide-up panel that covers most of the screen. The experience is similar to how native shopping apps handle product previews — a card slides up, you check it, you swipe it down if it’s not what you want. Done well, it makes the browsing experience feel much faster than traditional page-by-page navigation.
This article is part of the larger guide on Product page navigation: how shoppers move between products.