# Recently viewed products

{% hint style="warning" %}
This section was added in v3.1.0 on March 11, 2024. See our [Changelog](/stiletto/readme/changelog.md) and [theme update guide](/stiletto/general/theme-updates.md) to learn more.
{% endhint %}

The **Recently viewed products** section automatically display products that your customer has viewed on your site. This section remains hidden until the customer has viewed several product pages.

## Set up section

***

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [insert dynamic content with metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}

In the editor side panel, click **(+) Add section** and select **Recently viewed products**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

Click the section to edit the general **section styles:** [Padding](/stiletto/sections/theme-sections/using-sections.md#section-padding) | [Top divider](/stiletto/sections/theme-sections/using-sections.md#section-top-divider) | [Animation](/stiletto/sections/theme-sections/using-sections.md#section-animations)

 

## Product list layout

***

Change the layout of the product cards on desktop and mobile.

 

`Click Recently viewed products section to find settings`

<table><thead><tr><th width="190">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">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:blue;">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:blue;">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>

## Section header

***

Add heading and subheading at the top of the section.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Open the **Template** you want to edit.
2. Click **(+) Add section** and select **Recently viewed products.**

   > Click and hold the drag and drop handles **`⋮⋮`** to change the order of sections.
3. Click the **Recently viewed products** section to open the settings.
4. Enter **Heading** text to display as the section title.
5. Enter **Subheading** text to display underneath the heading.
6. Select the **Maximum number of products** to show. Between **3** and **15**.

   > The section will not show the product that’s currently being viewed.
7. Select the **Number of columns on desktop**. Either **3, 4**, or **5**.
8. Select the **Number of columns on mobile**. Either **1** or **2**.
9. Click **Save**.

</details>

&#x20;

`Click Recently viewed products section to find settings`

<table><thead><tr><th width="178">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>Add text to show a main heading above the section.</td></tr><tr><td><mark style="color:blue;">Subheading</mark></td><td>Add text to show a subheading below the main heading.</td></tr></tbody></table>

&#x20;

***

> **Related links**
>
> [Product recommendations](https://github.com/fluorescent/kb-stiletto/blob/main/sections/theme-sections/product-recommendations.md)\
> [Complementary products](https://github.com/fluorescent/kb-stiletto/blob/main/sections/product-page-blocks/complementary-products.md)\
> [Cart cross-sells](/stiletto/cart/cross-sells.md)


---

# 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://help.fluorescent.co/stiletto/sections/theme-sections/recently-viewed-products.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.