# 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="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2FuaFMVgbOtPgcFc67X4ZR%2F2025-12-22_11-30-46.png?alt=media&#x26;token=592b2d42-eef3-4c6c-b5bc-0b5f73fb9e4e" 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="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2FhCTM2jksgCT4M4ak2T2t%2F2025-12-22_11-31-05.png?alt=media&#x26;token=784e48dc-89ee-4607-8c6f-acdad14b7136" 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="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2F7mCgGITpRmkWtIrkSRnY%2F2025-12-22_11-31-42%20(1).png?alt=media&#x26;token=6ee8c6e6-b480-4165-80b0-7915c360d20a" 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.