Related Products

A heading and a row of product cards. On product pages it shows Shopify’s automatic recommendations for the product being viewed; anywhere else it shows the products you pick by hand.

The two aren’t alternatives you choose between — they work together. Your hand-picked list is what renders first, and Shopify’s recommendations replace it a moment later once they load. If Shopify has no recommendations for that product, your picks simply stay. The row is never empty.

Used on the product template.

Settings

Setting	What it does
Use related products	On by default. Swaps in Shopify’s automatic recommendations on product pages. Turn it off to always show your hand-picked list.
Product list	Up to 8 products, picked by hand. Shown until the recommendations load, and kept if there are none for this product.
Product count	2–8, default 4. How many cards to show. From 1212px they lay out on one row, however many you pick.
Show card button	Off by default, matching the design — the whole card links to the product. Turn on for a Quick Add or See Details button.
Card button	Quick Add (default) or See Details. Only shown when Show card button is on.
Button label	Text on the card button. Default “Quick Add”. Only shown when Show card button is on.
Show price	On by default.
Price prefix	Text before the price. Default “Starting at”. Only shown when Show price is on.
Price suffix	Text after the price. Default “per month”. Only shown when Show price is on.
Desktop background image	Optional. Shows at 768px and above, behind the cards.
Mobile background image	Optional. Shows below 768px. Falls back to the desktop image when empty.
Top / bottom padding (mobile)	0–10 rem, default 2.5 rem each.
Disclaimer	Small print centred below the product cards. Leave empty to hide it.
Top / bottom padding (tablet)	0–10 rem, default 4.5 rem each.
Top / bottom padding (desktop)	0–10 rem, default 5 rem each.

Blocks

The section has one fixed block that’s always present and can’t be removed:

• Title — the heading above the row.

There are no other blocks. The cards come from the product list or from Shopify’s recommendations.

How the two sources interact

Where the section sits	Use related products	What visitors see
Product page	On (default)	Your product list first, replaced by Shopify’s recommendations once they load. Your list stays if there are none.
Product page	Off	Your product list only.
Any other page	Either	Your product list only — there are no recommendations to fetch outside a product page.

On a non-product page, an empty Product list means an empty section

The recommendations only exist on product pages. Put this section on a homepage or a content page and leave the Product list blank, and nothing renders. Fill in the Product list for any placement outside the product template.

The list isn’t a second-class option

It’s tempting to leave the Product list empty on the product page because Shopify will fill it. Don’t. It’s what’s on screen for the first moment of the page load, and it’s the safety net for products Shopify hasn’t got recommendations for yet — typically new products, which are exactly the ones you want cross-sold.

Row behaviour

Below 1212px the cards scroll sideways, with the next card peeking at the edge so it’s clear there’s more to see, and a scrollbar under the row showing how far along you are. From 1212px they stop scrolling and lay out on a single row inside the container, lined up with the heading above.

You can’t turn the scrolling off — it’s what keeps the row usable on a phone.

Background image

The background is decorative — it sits behind the cards and is hidden from screen readers. Both image slots are optional, and setting only the desktop image is fine: mobile falls back to it automatically.

Keep the contrast in mind

The cards are translucent white, so a busy or dark background makes the card text harder to read. A soft, light image works best.

Tips

• Always fill in the Product list, even on product pages where recommendations will take over. It’s the fallback and the first paint.
• Four picks is the sweet spot. Desktop lays out four across, so four fills the row cleanly. The limit is 8.
• Turn off “Use related products” to pin a specific set. If a product needs a deliberate cross-sell — a companion formula rather than whatever Shopify infers — that switch is how you take manual control.
• Recommendations improve over time. Shopify builds them from real order and browsing data, so a newly launched store will lean on your fallback list far more than an established one. Revisit the picks later.