> 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/cart-upsell-widgets-design.md).

# Cart upsell widgets – Design

**Cart upsell** widgets help you increase order value by showing recommended products directly in the cart.\
Customers can add extra items without leaving the cart.

***

### 🛠️ Where to find Cart upsell design settings

1. Go to app > click **Settings** 
2. Click **Design**
3. Click **More views** 
4. Choose one of the cart upsell options:
   * **Cart Related**
   * **Cart Add on**
   * **Cart Inline Offer**
   * **Cart Recently viewed products**

Each option is designed for a different cart experience, but they share similar design controls.

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

***

### 1) Choose a layout (Template)

The **Template** controls how upsell products appear inside the cart.

Available templates may include:

* **Vertical** – stacked cards (best for carts)
* **List** – compact rows
* **Carousel** – horizontal scrolling (less common in carts)

**Recommended for carts:**\
**Vertical** or **List,** it is easy to scan and mobile-friendly.

***

### 2) Control size and quantity

#### **Maximum width**

Sets how wide the upsell widget can be.

* Example: **1170** for full-width carts
* Smaller values work well for drawer or sidebar carts

#### **Number of products**

Controls how many upsell products are shown.

* Example: **3** → keeps the cart clean and focused
* Too many products may overwhelm customers

Tip: 2–4 products usually perform best in carts.

***

### 3) Set widget placement (Position)

Depending on the cart upsell type, you may see placement options like:

* **Use app block in theme editor** (recommended)
* **After a HTML element**
* **Inline inside cart items**

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

#### Inline cart offers

Some cart widgets provide a **shortcode / HTML snippet**.

Example:

* Copy the provided snippet
* Paste it into your cart file (e.g. `cart-items.liquid`)
* This allows upsells to appear between cart items

⚠️ Only required for advanced or inline cart setups.

<figure><img src="/files/8YPShd0pV9yuWcmYV3dw" alt=""><figcaption></figcaption></figure>

***

### 4) Choose visible elements

Decide what customers see for each upsell product:

* **Variant select**
* **Sale label**
* **Price**
* **Add to cart button**

#### Best practice for cart upsells:

* Price
* Add to cart button
* Sale label (optional)
* Variant select (optional, keeps cart simpler)

***

### 5) Style with colors

Use the **Colors** section to match your store design:

* Heading & subheading
* **Product title**
* **Price & old price**
* **Sale label & background**
* **Button text & background**

Tip: Use the same button color as your main “Checkout” or “Add to cart” button for consistency.

***

### 6) Preview your cart upsell

The **Preview panel** shows how the upsell widget will look in the cart.

Use it to check:

* spacing inside the cart
* readability on smaller screens
* button visibility

⚠️ Some cart types may show **limited or no preview,** this is normal. Always test in your real cart.

***

### 🧪Examples of Cart upsell widgets

* **Cart Add on:**\
  Small add-ons like warranty, accessories, or extras

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

* **Cart Inline Offer:**\
  Upsell shown between cart items
* **Cart Recently viewed:**\
  Remind shoppers of items they viewed earlier
* **Cart Related:**\
  “You may also like” products related to cart items

***

### 💾 Save your changes

Click **Save** to apply your design settings.

**🙋 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.


---

# 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, and the optional `goal` query parameter:

```
GET https://docs.tipo.io/tipo-related-products/design-and-appearance/cart-upsell-widgets-design.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.