> For the complete documentation index, see [llms.txt](https://docs.tipo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.tipo.io/tipo-related-products/design-and-appearance/recently-viewed-products-design.md).

# Recently viewed products – Design

The **Recently Viewed Products** widget shows items a customer has viewed before, helping them quickly return to products they’re interested in.

All design changes are shown instantly in the preview on the right.

### 🛠️ How to find the setting

Open the app > click **Settings** > **Design** > click on **Recently viewed products** tab

You’ll see:

* Design settings on the left
* A live **Preview** on the right

Changes are shown instantly in the preview.

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

***

### 1) Choose a layout (Template)

The **Template** controls how the recently viewed items are displayed.

Common templates:

* **Carousel** (scroll horizontally)
* **List** (stack vertically)
* **Table / Vertical / Slider** (depending on your theme and widget style)

Tip: **Carousel** works best on product pages because it’s compact and easy to browse.

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

***

### 2) Set the widget size

#### **Maximum width**

Controls how wide the widget can be on desktop.

* Example: **1170** fits most themes.
* Lower values make it more compact.

#### **Number of products**

Controls how many recently viewed products to show.

* Example: **10** = show up to 10 items

⚠️ Note: The number shown can be smaller on mobile or depending on the layout.

***

### 3) Choose where the widget appears (Position)

**Position** controls where the widget is placed in your theme.

Common options:

* **Use app block in theme editor** (recommended)
* Other placement options may appear depending on your theme

Tip: Use **app block in theme editor** for the easiest setup and best compatibility.

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

***

### 4) Choose what shoppers can see (Elements)

Turn on/off the content shown for each product card.

Common options:

* **Variant select** (show variant dropdown)
* **Sale label** (show SALE badge)
* **Price**
* **Add to cart button**

✅ Recommended setup:

* Product page: enable **Price + Add to cart**
* Small areas (sidebar/cart): consider turning off **Variant select** to keep it clean

***

### 5) Match your store style (Colors)

Use **Colors** to control the widget’s look:

* Heading / Subheading
* Product title
* Product price / old price
* Sale label + background
* Button text + background

Tip: Match your theme’s button colors so the widget looks like part of your store.

***

### 6) Check the Preview

On the right, the **Preview** updates instantly as you change settings.

Use it to confirm:

* layout looks correct (carousel vs list)
* text is readable
* buttons and price are visible

***

### 💾 Save changes

Click **Save** in the top-right corner to apply your design updates.

**🙋 Still need support?**

If you still need help, please feel free to contact us at <hi@tipo.io>. We’ll be happy to assist you further.