> 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/cornerstone/pages/theme-sections/recently-viewed-products.md).

# Recently viewed products

{% hint style="warning" %}
This section was added in v4.0.1 on July 16, 2025. See our [Changelog](/cornerstone/readme/changelog.md) and [theme update guide](/cornerstone/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

***

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

### Section styles

Sections include general styles. Click the section to find options for **spacing**, and **animations**.

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-type="content-ref"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section spacing</strong></mark></td><td><a href="/pages/CBsbGCpJAMAjEg83Oxwb#section-padding">/pages/CBsbGCpJAMAjEg83Oxwb#section-padding</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section animations</strong></mark></td><td><a href="/pages/CBsbGCpJAMAjEg83Oxwb#section-animations">/pages/CBsbGCpJAMAjEg83Oxwb#section-animations</a></td></tr></tbody></table>

## Product list layout

***

Change the layout of the product cards on desktop and mobile. Find section settings under Product list for number of products and columns.

`Click 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 recently viewed product to display: between <strong>3</strong> and <strong>10</strong>.</td></tr><tr><td><mark style="color:blue;">Number of columns on desktop</mark></td><td>Choose how many products to show per row on desktop screens: either <strong>3</strong>, <strong>4</strong>, or <strong>5</strong> columns.</td></tr><tr><td><mark style="color:blue;">Number of columns on mobile</mark></td><td>Choose how many products to show per row on mobile screens: either <strong>1</strong> or <strong>2</strong> columns.</td></tr></tbody></table>

## Section header

***

Add section **headings** above the product list.

`Click section to find settings`

<table><thead><tr><th width="239">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Center header content</mark></td><td>Display headings in the center above the section. Uncheck this option to align headings to the left.</td></tr><tr><td><mark style="color:blue;">Accent</mark></td><td>Add text to show a small heading above the main section heading.</td></tr><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><tr><td><mark style="color:blue;">Maximum text width</mark></td><td>Set the maximum width of heading text between 400 and 1000 pixels.</td></tr></tbody></table>

>