Related products
A scrolling row of Shopify's related product recommendations for the product being viewed.
- Merchant-addable
- Yes
- Settings
- 9
- Block types
- —
- File
sections/related-products.liquid
Used by default on: Product, Product (set)
Screenshots pending
Captures for Related products at desktop and mobile widths are generated from a live store by
npm run shots. They appear here automatically once that has run.
When to use it
Below the fold on product pages, once the primary decision has been made. The section can only be added to product templates, because Shopify needs a product to find related ones for.
Setting it up
- Add the section to a product template. It is not available on other templates.
- Under Content, set the Eyebrow, Heading, and Body text shown above the row. Leave any of them blank to hide it.
- Number of products sets how many recommendations the row requests, from 2 to 10. It defaults to 7: four cards fill a desktop row and the rest are a scroll away. Shopify returns fewer when your store has fewer related products.
- Under Layout, choose Heading alignment, Heading size, and the Color scheme. Heading sizes step down automatically on phones. Set spacing under Section padding.
- Cards follow your global Product cards theme settings. To show variant controls on these cards, turn on Show in related products under Variant visibility.
Where the content comes from
Entirely Shopify product data: Shopify's recommendation engine chooses the products, and each card shows the product's own media, title, and price. The section owns only the eyebrow, heading, and body text.
Notes and cautions
- Shopify's recommendation engine learns from your store's order history. On a new store it falls back to products from the same collection, so it looks thin until you have sales.
- When Shopify returns no related products, the section hides itself from customers. In the theme editor, a dotted note appears in its place so you know why it is empty.
- The row loads as shoppers scroll toward it, so it does not slow down the top of the page. It needs JavaScript, so it does not appear when JavaScript is turned off.
- To pair products by hand instead, use Routine builder, which reads the complementary products you set in the free Search and Discovery app. Show one cross-sell, not both.
Section settings
Every setting on the section itself, in the order it appears in the theme editor. Group headings match the editor's own grouping.