> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/product-pages/product-page-sections/product-recommendations.md).

# Product recommendations

{% hint style="info" %}
Check out similar features like [Complementary products](/stiletto/product-pages/product-page-blocks/complementary-products.md) for the product page and [Cross sells](/stiletto/cart/cross-sells.md) in the cart to show customers related products that they can purchase in addition to the selected product.
{% endhint %}

In the Product template, the **Product recommendations** section displays similar products to customers on product pages. Product recommendations let customers discover new products and can increase sales.

<div data-with-frame="true"><img src="/files/QUprPOueP0DG7xnZJzSp" alt="" width="563"></div>

***

{% columns %}
{% column width="58.333333333333336%" %}

#### Set up section

In the editor side panel, click **(+) Add section** and select **Product recommendations**. Use the drag handles **`⋮⋮`** to re-order sections.

Click the section to edit general **section styles**, like colors, width, padding, and the section header.

{% hint style="info" %}
Editing templates change all pages that use that template. For unique pages, [use new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [dynamic metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}
{% endcolumn %}

{% column width="41.666666666666664%" %}

#### <mark style="color:$info;">Section style guides</mark>

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section header</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-header">/pages/nxNcI6zBaofEs4kObMMf#section-header</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section colors</strong></mark></td><td></td><td><a href="/pages/ugnuWgDX3bpXquEJrAeA#color-schemes">/pages/ugnuWgDX3bpXquEJrAeA#color-schemes</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section width</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-width">/pages/nxNcI6zBaofEs4kObMMf#section-width</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Padding and divider</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-padding">/pages/nxNcI6zBaofEs4kObMMf#section-padding</a></td></tr></tbody></table>
{% endcolumn %}
{% endcolumns %}

***

### <mark style="color:$primary;">Product list layout</mark>

You can customize the number of columns on desktop and mobile, as well as the maximum number of products shown.

<table><thead><tr><th width="285.0625">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:$primary;">Maximum number of products</mark></td><td>Set a limit on how many product recommendations to display within the section: between 3 and 15.</td></tr><tr><td><mark style="color:$primary;">Number of columns on desktop</mark></td><td>Choose how many recommendations to show per row on desktop screens: either 3, 4, or 5 columns.</td></tr><tr><td><mark style="color:$primary;">Number of columns on mobile</mark></td><td>Choose how many collections to show per row on mobile screens: either 1 or 2 columns.</td></tr></tbody></table>

## <mark style="color:$primary;">**Customize recommendations**</mark>

Recommendations are automatically generated based on products in related collections, products that are commonly purchased together, or similar product descriptions. Recommendations improve over time with more customer and product information.

You can **customize product recommendations** by downloading Shopify's [Search & Discovery app](https://apps.shopify.com/search-and-discovery).

Download Shopify's [Search & Discovery app](https://apps.shopify.com/search-and-discovery) and learn how to [choose recommended products](https://help.shopify.com/en/manual/online-store/search-and-discovery/product-recommendations) for your store’s product pages.

{% hint style="warning" %}
Using automated recommendations ensures that only in-stock and published products are displayed. **If you manually select recommended products**, make sure your product list is up-to-date.
{% endhint %}

***

> **Related links**
>
> [Product template](/stiletto/product-pages/product-template.md)\
> [Complementary products](/stiletto/product-pages/product-page-blocks/complementary-products.md)\
> [Recently viewed products](/stiletto/sections/theme-sections/recently-viewed-products.md)\
> [Cross-sells](/stiletto/cart/cross-sells.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.fluorescent.co/stiletto/product-pages/product-page-sections/product-recommendations.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.