# Related products

> Products related to the one a shopper is viewing, chosen by Shopify's product recommendations and shown as a grid or a carousel under the product details.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/sections/related-products/

## At a glance

- **In the editor:** Related products
- **Where it goes:** Any page template, with Add section
- **In the presets:** Tally: 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 *Carousel*, 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 products** (21 settings, in editor order)

Recommendations improve over time. Customize them in the Search and Discovery app.

| Setting | Options | Default |
| --- | --- | --- |
| **Heading** | Rich text (one line) | Sample text |
| **Heading alignment** | Left · Center | Left |
| **Maximum products** | 2–12 (step 1) | 4 |
| **Layout** | Grid · Carousel | Grid |
| **Products per row on desktop** | 2–5 (step 1) | 4 |
| **Products per row on mobile** | 1 · 2 | 2 |
| **Show part of the next card** – For 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*

| Setting | Options | Default |
| --- | --- | --- |
| **Use custom spacing** – Otherwise the spacing from Theme settings > Layout is used. | Checkbox | Off |
| **Space between columns** | 0–64px (step 2) | 20px |
| **Space between rows** | 0–96px (step 2) | 20px |
| **Space between columns on mobile** | 0–32px (step 1) | 8px |
| **Space between rows on mobile** | 0–64px (step 1) | 21px |

*Section spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Top padding** | 0–160px (step 4) | 80px |
| **Bottom padding** | 0–160px (step 4) | 80px |
| **Top padding on mobile** | 0–120px (step 4) | 56px |
| **Bottom padding on mobile** | 0–120px (step 4) | 56px |

*Advanced*

| Setting | Options | Default |
| --- | --- | --- |
| **Hide on mobile** | Checkbox | Off |
| **Hide on desktop** – Mobile 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 ID** – Link to this section with #anchor-id. | Text | – |

## Related

- [Product page](https://themelab.page/tally/docs/product-page.md): The gallery, variant picker, buy buttons, pre-orders, delivery estimate, side panels and every other block of the Product information section.
- [Recently viewed](https://themelab.page/tally/docs/sections/recently-viewed.md): The products a shopper opened most recently on this device, so they can find their way back.
- [Featured collection](https://themelab.page/tally/docs/sections/featured-collection.md): Products from one collection – or several as tabs – in a grid or carousel, with quick filters and a products-per-row switch.