# Product recommendations section

The **Product Recommendations** section helps increase product discovery and conversions by showcasing either **Related Products** or **Recently Viewed Products** (or both) in a tabbed or standalone layout. This section is highly customizable in terms of layout, typography, and padding, and is responsive across desktop and mobile devices.

It supports two content blocks:

* **Related products -** This block automatically displays products that are related to the currently viewed product, based on Shopify’s product recommendation algorithm.
* **Recently viewed products -** This block tracks and displays products the current visitor has previously viewed during their session.

These blocks can be displayed in tabs (if enabled) or as separate sections.

<figure><img src="/files/yMC3bzrWzQMLLpPQdasz" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="193.62237548828125">Settings</th><th width="159.265625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Enable tabs</td><td align="center"><code>checkbox</code></td><td>When enabled, displays Related and Recently Viewed products in a tabbed interface.</td></tr><tr><td>Alignment</td><td align="center"><code>select</code></td><td>Controls heading alignment. Options: <code>Left</code> or <code>Centered</code>.</td></tr><tr><td><strong>Desktop</strong></td><td align="center"></td><td></td></tr><tr><td>Product grid layout</td><td align="center"><code>select</code></td><td>Choose between <code>Grid</code> or <code>Slider</code> layout on desktop.</td></tr><tr><td><strong>Grid</strong></td><td align="center"></td><td></td></tr><tr><td>Products per row</td><td align="center"><code>range</code></td><td>Number of items per row (2-5). Applies when layout is set to Grid.</td></tr><tr><td>Number of rows</td><td align="center"><code>range</code></td><td>Number of product rows (1-5). Applies when layout is set to Grid.</td></tr><tr><td><strong>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Mobile layout</td><td align="center"><code>select</code></td><td>Controls product layout on mobile: <code>1 item per row</code>, <code>2 items per row</code>, or <code>Slider</code>.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Assigns theme-defined color styling.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Top</td><td align="center"><code>range</code></td><td>Sets space above the section.</td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Sets space below the section.</td></tr></tbody></table>

## **Usage Tips**

* **Tabs:** Use tabs to keep the UI clean and allow users to toggle between product categories.
* **Responsive layout:** Choose '`Slider`' on mobile for a compact, swipeable experience.
* **Color scheme:** Match your brand or page theme using color schemes.
* **Block flexibility:** You can include one or both blocks based on your merchandising strategy.


---

# Agent Instructions: 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:

```
GET https://broadcast.presidiocreative.com/product-recommendations-section.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.