# Recently viewed products

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F10v8PGWMOUr0nbGH3qQB%2Fimage.png?alt=media&#x26;token=965b9268-6713-48fe-954f-6b742c7e98a6" 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.

This article will show you how to add and customize your **Recently viewed product** sections.

## 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

Use the provided text fields to add a suitable **Heading**.

* Leave it blank if you do not want to display it

You can also change the **Heading size** to:

* Heading xs
* Heading sm
* Heading md
* Heading lg
* Heading xl
* Heading 2xl
* Display md
* Display lg
* Display xl

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FCfNZ8Zn4i9ua58c0cZSl%2Fimage.png?alt=media&#x26;token=9b7d0dfe-ddb3-44b4-8a29-0d12bec9fed1" alt=""><figcaption></figcaption></figure>

### Highlight text

[How to apply Highlight text to the section heading and block headings?](https://docs.foxecom.com/sleek-theme/pages-global-sections/general-settings#highlight-text)

Use the provided text fields to add a suitable **Subheading** and **Description**.

* Leave them blank if you do not want to display them

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F4SaDikvoafMWMS9K0tXn%2Fimage.png?alt=media&#x26;token=55f03083-f3dd-44c4-8ebd-dd3266e79d1d" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FIGAKDRwmhnb0mU3vUhRs%2Fimage.png?alt=media&#x26;token=09ce279f-6fe2-4caa-b149-29b7d4415f0a" alt=""><figcaption></figcaption></figure>

### 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).

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FUa5Dwitkp8NJ4ZKZrVOi%2Fimage.png?alt=media&#x26;token=d7a40c5c-435c-4090-870f-719474bdac6f" alt=""><figcaption></figcaption></figure>

### Product cards

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

  <figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FCOQS7sy5G8eNE62I7NO5%2Fimage.png?alt=media&#x26;token=20eaaaa2-b30e-4372-8ad6-9d170702f77d" alt=""><figcaption></figcaption></figure>

### Mobile layout

* **Number of columns on mobile**: Set the number of product grid columns for mobile view.
* **Enable swipe on mobile**: Check the option to make the product list swipeable instead of showing in grid layout.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FHgQERHapZqxUygDtdWuf%2Fimage.png?alt=media&#x26;token=7fabb45e-7b73-4e44-a051-3526d1a8570b" alt=""><figcaption></figcaption></figure>
