# Recently viewed products

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

The **Recently viewed products** section lets your customers find the products they’d previously visited easily, enhancing user experience and boosting conversions.

## How to add a Recently viewed products section

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

1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Recently viewed products.**
3. Make necessary changes.
4. **Save.**
   {% endhint %}

## How to edit a Recently viewed products section

### Section header

Customize the text and alignment to ensure the section effectively communicates your message and encourages engagement.

<details>

<summary>See settings</summary>

* **Subheading**: Add a short, secondary heading to complement the main heading. This can provide additional context or detail.
* **Heading**: Enter the primary title for your banner.
* **Heading size:** Adjust the size to fit your design preference and ensure readability. Choose from available heading sizes.
* **Description:** Add a detailed explanation or summary for the banner. Use rich text formatting like **bold**, *italic*, links, and lists for better visual emphasis.
* **Text alignment:**
  * Align the text in the section to the **Left**, **Center**, or **Right**.
  * Adjust alignment based on your banner’s design and layout.
* **Text alignment on Mobile:** Override desktop alignment settings specifically for mobile devices if needed.

</details>

### Grid settings

* **Maximum products to show**: between 2-12 products.
* **Number of columns on desktop**: between 2-6 products.
* **Column gap**: Set the gap between product columns.
* **Row gap**: Set the gap between product rows.

### Carousel settings

* **Enable carousel on desktop**: Display the product list on a carousel (when the number of recently viewed products > the number of columns on the desktop).

### Product cards

* **Image ratio**: Set the image ratio of the product cards.

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

### Mobile layout

* **Number of columns on mobile**: Set the number of product grid columns for mobile view (1 column/ 2 columns).

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

* **Enable swipe on mobile**: Check the option to make the product list swipeable instead of showing in a grid layout.

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

***

<figure><img src="/files/6RW1JWuKNf9ovVFLkLXc" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_hyper&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>


---

# 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://docs.foxecom.com/hyper-theme/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.