> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-7-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/ella-7-documentation/product-page/recently-viewed-products.md).

# 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="/files/ZAWCCOi66iPHvRH6zElq" 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="/files/lOsWcaBFUW14YApONnuU" 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 |


---

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

```
GET https://halosoft.gitbook.io/ella-7-documentation/product-page/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.