> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/product-page-sections/recommended-products.md).

# Recommended products

Shows products Shopify recommends based on the product being viewed. You can show related or complementary products, and set a manual fallback list. Available on product and cart pages only.

![Recommended Products overview](/files/mAI2fx7zYl4ZXWcHwbdu)

{% hint style="info" %}
Shopify's recommendations improve as your store gathers order and browsing data. For new stores or new products, set a manual fallback list until recommendations settle in.
{% endhint %}

***

## Settings

### Layout

| Setting   | Description                                                                                                                                                                     |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Width     | **Page** — Keeps the content within the page width set in your theme settings. **Full** — Stretches the content across the full browser width, with a small space at the edges. |
| Alignment | Alignment of the section header.                                                                                                                                                |

### Gap

| Setting       | Description                                               |
| ------------- | --------------------------------------------------------- |
| Gap — Desktop | Space between the header and the product list on desktop. |
| Gap — Mobile  | Space between them on mobile.                             |

### Background

| Setting         | Description                                    |
| --------------- | ---------------------------------------------- |
| Media           | Show an image or video behind the section.     |
| Image           | Background image.                              |
| Image — Mobile  | Separate background image for mobile.          |
| Video           | Shopify-hosted background video. Plays muted.  |
| Show overlay    | Add a color layer over the background media.   |
| Overlay color   | Color and opacity of the overlay.              |
| Parallax effect | Scroll effect applied to the background media. |

### Appearance

| Setting      | Description                   |
| ------------ | ----------------------------- |
| Color scheme | Color scheme for the section. |

### Spacing

| Setting                 | Description                                     |
| ----------------------- | ----------------------------------------------- |
| Padding top / bottom    | Space above and below the section.              |
| Custom padding — Mobile | Set separate top and bottom padding for mobile. |

***

## Available Blocks

The section has a fixed two-block structure.

{% hint style="info" %}
Only one Recommended Products section can be added per page. It is available on product and cart templates.
{% endhint %}

### Heading

The section title above the recommended products.

| Setting   | Description                                                                                                                                                 |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Text      | The heading content.                                                                                                                                        |
| Size      | Heading 1–6.                                                                                                                                                |
| HTML tag  | Semantic tag rendered (Paragraph, H1–H6). Use headings in order for SEO.                                                                                    |
| Animation | Entrance effect (Fade, Scale, Slide, Rotate words) played on scroll, with an optional **Delay**. Shown when block animations are enabled in theme settings. |

### Product list

The recommended products.

| Setting                            | Description                                                                                                                               |
| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| Type                               | **Related** or **Complementary** products. Complementary products must first be set up in the **Search & Discovery** app.                 |
| Products                           | An optional manual list, shown when no recommendations are available.                                                                     |
| Max products                       | The most products the section will show.                                                                                                  |
| Type (Layout)                      | **Grid** or **Carousel**. The settings below change with this choice.                                                                     |
| Desktop columns / Mobile columns   | Number of cards per row on each device.                                                                                                   |
| Enable swipe on mobile             | Lets the cards scroll horizontally on mobile. Grid only.                                                                                  |
| Show next slide preview on desktop | Reveals part of the next card to hint that it can be swiped. Carousel only.                                                               |
| Custom columns                     | Set the column count per breakpoint yourself, via **Columns per breakpoint**.                                                             |
| Gap — Horizontal / Vertical        | Spacing between cards, with independent mobile values. Grid only.                                                                         |
| Gap — Desktop / Mobile             | Spacing between cards in carousel mode. Carousel only.                                                                                    |
| Show navigation on desktop         | Previous / next arrows, with **Position**, **Style**, **Icon**, and **Behavior**. Carousel only.                                          |
| Show pagination on desktop         | Slide indicators, with **Type**, **Top padding**, and an optional **Limit width** / **Max width** cap on the progress bar. Carousel only. |
| Auto-rotate slides                 | Advances the carousel automatically, at a set **Speed**, and can **Pause on hover**. Carousel only.                                       |