> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/product-page/page-template-sections/recently-product.md).

# Recently product

**Recently product** shows the products this customer has already opened, in the order they viewed them. It helps the shoppers who compare several items before deciding, because they can step back to an earlier candidate without using the browser back button or searching again. The row appears near the bottom of the product page, under the buying block and the other recommendations.

Unlike a recommendation row, the content here is different for every visitor, and it stays empty for someone on their first product page.

<figure><img src="/files/58ynOgSNNPT1tMU1gKWF" alt=""><figcaption></figcaption></figure>

### Where to find it <a href="#where-to-find-it" id="where-to-find-it"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. Open the template selector and select **Products**, then **Default product**.
3. In the left sidebar, click **Add section** and choose **Recently product**.
4. Drag it to the bottom of the page, adjust the settings, then click **Save**.
   {% endhint %}

*Result:* the row appears in the preview once you have opened more than one product, since it needs viewing history to have anything to show.

## Section settings

### General setting <a href="#general-setting" id="general-setting"></a>

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

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Section width</strong></td><td><p>How far the row stretches across the screen.</p><ul><li><strong>Stretch width</strong>: the products run close to the screen edges whatever the display size.</li><li><strong>Fixed width</strong>: they line up with the sections above, using the width set in <strong>Theme settings > Layout</strong>.</li><li><strong>Full width</strong>: the row fills the whole screen and rescales itself to fit it.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>The background and text colours behind the row, taken from the schemes in <strong>Theme settings > Colors</strong>. Reuse the page background here so the row reads as a quiet footnote rather than an offer.</td></tr><tr><td><strong>Heading</strong></td><td>The line above the row, for example <em>Recently viewed</em>. Naming it plainly tells customers these are their own items and not a promotion.</td></tr><tr><td><strong>Description</strong></td><td>An optional line under that heading. Most stores leave it empty here, since the row explains itself.</td></tr><tr><td><strong>Heading size</strong></td><td>How large that line appears. Keep it small so this row never competes with the product being viewed.</td></tr><tr><td><strong>Alignment</strong></td><td><p>Where the heading and the line under it sit above the row.</p><ul><li><strong>Left</strong>: reads first and lines up with the products underneath.</li><li><strong>Center</strong>: suits a short heading on a wide row.</li><li><strong>Right</strong>: keeps the text clear of carousel arrows placed on the left.</li></ul></td></tr></tbody></table>

### Collection <a href="#collection" id="collection"></a>

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Maximum items to show</strong></td><td>How far back the viewing history goes. Minimum: 2. Maximum: 12. A shorter list keeps the customer on the products they were seriously comparing.</td></tr><tr><td><strong>Items per row on desktop</strong></td><td>How many of those products a desktop customer sees at once. Minimum: 2. Maximum: 6. More per row means smaller images.</td></tr><tr><td><strong>Column gap</strong></td><td><p>How much air sits between the products.</p><ul><li><strong>No gap</strong>: the products touch, giving a dense grid.</li><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong>: each product stands on its own, which suits a short row.</li></ul></td></tr></tbody></table>

### Carousel settings <a href="#carousel-settings" id="carousel-settings"></a>

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Enable carousel</strong></td><td>Puts the products in a slider a customer swipes through, instead of a grid that adds height to the bottom of the page.</td></tr><tr><td><strong>Show navigation in header</strong></td><td>Puts the previous and next arrows up on the heading line, so desktop customers have something to click and the row itself stays clean.</td></tr><tr><td><strong>Show pagination</strong></td><td>Adds the row of dots under the slider, telling customers how many items they have looked at.</td></tr><tr><td><strong>Reveal next slide</strong></td><td>Leaves part of the following product visible at the edge, a visual hint that the row scrolls.</td></tr><tr><td><strong>Items per row on mobile</strong></td><td>How many products fit across a phone screen. Two is common here, since the customer already knows these items and only needs to recognise them.</td></tr></tbody></table>

### Section padding <a href="#section-padding" id="section-padding"></a>

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Top</strong></td><td>Adds space above the row. Increase it when the history crowds the section above it.</td></tr><tr><td><strong>Bottom</strong></td><td>Adds space under the row, separating it from the footer.</td></tr></tbody></table>

### Impact outside the theme editor <a href="#impact-outside" id="impact-outside"></a>

The section applies to every product using the **Default product** template, but what it contains is built from each visitor's own browsing, so two customers on the same product page see different items. On a first visit the row has nothing to show, which is normal and not a configuration problem. Each product is presented using the rules in **Theme settings > Product cards**.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Related products](/velare/customize-your-pages/product-page/page-template-sections/related-products.md): the recommendation row chosen from your catalogue rather than from browsing history
* [Product information](/velare/customize-your-pages/product-page/page-template-sections/product-information.md): the buying block at the top of the same page
* [Product cards](/velare/customize-your-pages/product-cards.md): how each product in this row is presented
* [Page template sections](/velare/customize-your-pages/product-page/page-template-sections.md): the other sections available on the product template


---

# 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://uxsmart.gitbook.io/velare/customize-your-pages/product-page/page-template-sections/recently-product.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.