Related products
Products related to the one a shopper is viewing, chosen by Shopify's product recommendations and shown as a grid or a slider under the product details.
- In the editor
- Related products
- Where it goes
- Any page template, with Add section
- In the presets
- Index: Product; Poster: Product; Petal: Product; Every preset: Product (pre-order)
- Settings
- 21
- App blocks
- Yes
How recommendations work
Shopify chooses related products from purchase history and product details, and they improve as your store gets orders. In a new store, they may show few products at first. With the free Search & Discovery app you can pick related products yourself for any product.
Options
- Heading and Heading alignment.
- Maximum products: 2–12.
- Layout: Grid or Slider, with 2–5 products per row on desktop and 1 or 2 on mobile.
The section is part of the product template in every preset. It only shows up on a product page.
All settings
Every setting in the order of the theme editor, with its options and its default value.
Section: Related products21 settings
| Setting | Options | Default |
|---|---|---|
| Recommendations improve over time. Customize them in the Search and Discovery app. | ||
| Heading | Rich text (one line) | Sample text |
| Heading alignment | Left · Center | Left |
| Maximum products | 2–12 | 4 |
| Layout | Grid · Slider | Grid |
| Products per row on desktop | 2–5 | 4 |
| Products per row on mobile | 1 · 2 | 2 |
| Show part of the next cardFor sliders: the next card shows in part and the edges fade, so it is clear the row goes on. | Checkbox | On |
| Color scheme | Color scheme | Scheme 1 |
| Grid spacing | ||
| Use custom spacingOtherwise the spacing from Theme settings > Layout is used. | Checkbox | Off |
| Space between columns | 0–64px | 20px |
| Space between rows | 0–96px | 20px |
| Space between columns on mobile | 0–32px | 8px |
| Space between rows on mobile | 0–64px | 21px |
| Section spacing | ||
| Top padding | 0–160px | 80px |
| Bottom padding | 0–160px | 80px |
| Top padding on mobile | 0–120px | 56px |
| Bottom padding on mobile | 0–120px | 56px |
| Advanced | ||
| Hide on mobile | Checkbox | Off |
| Hide on desktopMobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| Animate on scroll | Checkbox | On |
| Anchor IDLink to this section with #anchor-id. | Text | – |
Related
Product pageThe gallery, variant picker, buy buttons, pre-orders, delivery estimate, side panels and every other block of the Product information section.Recently viewedThe products a shopper opened most recently on this device, so they can find their way back.Featured collectionProducts from one collection – or several as tabs – in a grid or slider, with quick filters and a products-per-row switch.