# Recently viewed products

{% hint style="warning" %}
This section was added in v3.1.0 on March 11, 2024. See our [Changelog](https://help.fluorescent.co/stiletto/readme/changelog) and [theme update guide](https://help.fluorescent.co/stiletto/general/theme-updates) 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](https://help.fluorescent.co/stiletto/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/stiletto/general/adapting-your-theme/dynamic-content-with-metafields)
{% 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](https://help.fluorescent.co/stiletto/sections/using-sections#section-padding) | [Top divider](https://help.fluorescent.co/stiletto/sections/using-sections#section-top-divider) | [Animation](https://help.fluorescent.co/stiletto/sections/using-sections#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](https://help.fluorescent.co/stiletto/cart/cross-sells)