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.

---

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

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.

---

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

• 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 [e-mail]. We’ll be happy to assist you further.