# 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="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2F8pzEdZ1ekfTGfqlKBsxF%2F2025-12-22_14-34-51.png?alt=media&#x26;token=5419bedf-888c-40e7-a1be-2fcb18c01016" 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="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2FABpdNAlDTY2LyW2XMOwZ%2F2025-12-22_14-40-14.png?alt=media&#x26;token=7baf3183-830c-4874-bad8-7a60d4fe8e8e" 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="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2F5yu3Tpwudn7ZYqg1f4N2%2F2025-12-22_14-36-38.png?alt=media&#x26;token=432b5925-da66-49de-945f-f08059c67da8" 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="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2Frsj8vw9lFUFjFo3cF3uL%2F2025-12-22_14-56-18.png?alt=media&#x26;token=c56d3b8f-e8d5-48ee-b3dd-889f790b4fdc" 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.