# Recently Viewed Products

The **Recently Viewed Products** section displays products that customers have previously visited using localStorage to track browsing history. 

It provides a personalized shopping experience by showing relevant products the customer has already shown interest in, supporting both grid and carousel layouts with extensive customization options.

<figure><img src="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2FrVsQRdYe6OZ4DmJyNIxC%2Fimage.png?alt=media&#x26;token=f74a28cb-531b-4d30-a85f-c10e6677a9fe" alt=""><figcaption></figcaption></figure>

### **How to add the** Recently Viewed Products **section?**

1. From your Shopify admin, go to **Online Store** -> **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Choose **Products** from the dropdown window.
4. In the **Templates ->** **Add section ->** choose **Recently Viewed Products.**

<figure><img src="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2FfDUCsfSLnDdN4c297Iay%2Fimage.png?alt=media&#x26;token=47b7e9bd-9e2c-4f43-a608-5570d622eaad" alt=""><figcaption></figcaption></figure>

## Recently Viewed Products - Settings Guide

This guide explains all available settings for the **Recently Viewed Products** in order from top to bottom as they appear in the Theme Editor.&#x20;

#### Layout Settings

| Setting                      | Type       | Description                                        | Visibility              |
| ---------------------------- | ---------- | -------------------------------------------------- | ----------------------- |
| Layout style                 | `select`   | Choose between grid or carousel layout             | Always visible          |
| Carousel on mobile           | `checkbox` | Enable carousel behavior on mobile for grid layout | `layout_type == 'grid'` |
| Maximum products to show     | `range`    | Number of products to display (2-25)               | Always visible          |
| Number of columns on desktop | `range`    | Desktop column count (1-5)                         | Always visible          |
| Horizontal gap               | `range`    | Spacing between columns (0-100px)                  | Always visible          |
| Vertical gap                 | `range`    | Spacing between rows (0-100px)                     | `layout_type == 'grid'` |

#### Carousel Settings

| Setting             | Type       | Description                                                | Visibility                                                              |
| ------------------- | ---------- | ---------------------------------------------------------- | ----------------------------------------------------------------------- |
| Loop                | `checkbox` | Enable infinite loop for carousel                          | `layout_type == 'carousel'`                                             |
| Full width          | `checkbox` | Extend carousel beyond page margins                        | `section_width == 'page-width' AND layout_type == 'carousel'`           |
| Navigation          | `select`   | Navigation type (none/arrows/pagination/both)              | `layout_type == 'carousel'`                                             |
| Arrows position     | `select`   | Position of navigation arrows (inside/bottom)              | `layout_type == 'carousel' AND navigation contains 'arrows'`            |
| Pagination type     | `select`   | Style of pagination (bullets/dynamic/progressbar/fraction) | `layout_type == 'carousel' AND navigation contains 'pagination'`        |
| Dots top offset     | `range`    | Spacing above pagination dots (20-100px)                   | `pagination_type == 'bullets' AND navigation contains 'pagination'`     |
| Progress top offset | `range`    | Spacing above progress bar (20-100px)                      | `pagination_type == 'progressbar' AND navigation contains 'pagination'` |

#### Mobile Layout Settings

| Setting                     | Type     | Description               | Visibility     |
| --------------------------- | -------- | ------------------------- | -------------- |
| Number of columns on mobile | `select` | Mobile column count (1-2) | Always visible |

#### Section Layout Settings

| Setting           | Type           | Description                                             | Visibility                  |
| ----------------- | -------------- | ------------------------------------------------------- | --------------------------- |
| Width             | `select`       | Section width constraint (page-width/full-width/custom) | Always visible              |
| Custom page width | `range`        | Custom section width (1000-2000px)                      | `section_width == 'custom'` |
| Color scheme      | `color_scheme` | Section color scheme                                    | Always visible              |

#### Spacing Settings

| Setting        | Type    | Description                          | Visibility     |
| -------------- | ------- | ------------------------------------ | -------------- |
| Padding top    | `range` | Top padding for section (0-100px)    | Always visible |
| Padding bottom | `range` | Bottom padding for section (0-100px) | Always visible |
| Padding left   | `range` | Left padding for section (0-100px)   | Always visible |
| Padding right  | `range` | Right padding for section (0-100px)  | Always visible |