Cart Page Widget

The Cart Page Widget shows product recommendations directly in the cart. It helps increase average order value by suggesting related items, add-ons, or reminders before checkout.

---

✅ What this widget does

The Cart Page Widget displays recommendations inside the cart page, while customers are reviewing their items.

You can use it to:

• Suggest related products

• Offer simple add-ons

• Show inline upsells

• Remind customers of recently viewed products

---

ℹ️ Available Cart Widget Layouts

When creating a widget, choose Placement: Cart Page, then select one of the layouts below:

Cart Related

Shows related products based on what’s already in the cart.

Best for: cross-selling similar or complementary items.

Example:

• Cart contains: Running Shoes

• Widget shows: Socks, Shoe Cleaner

---

Cart Add-on

Shows small add-ons that can be added with one click.

Best for: warranties, accessories, or low-price extras.

Example:

• Cart contains: Laptop

• Widget shows: Extended Warranty, Laptop Sleeve

---

Cart Inline Offer

Displays an upsell between cart items (inline placement).

Best for: high-visibility upsells without leaving the cart flow.

---

Cart Recently Viewed Products

Reminds shoppers of products they viewed earlier.

Best for: bringing customers back to items they hesitated on.

Example:

• Customer previously viewed: Wireless Headphones

• Widget shows those headphones in the cart

---

⚙️ How to Set Up a Cart Page Widget

Step 1: Create a Widget

1. Open the app > go to the Widgets tab > click the Add widget button in the top right corner.

2. For Placement, choose Cart page

3. Select the one of layouts you want. Example: Related layout

1. Click Next to go to the configuration page and begin setting up your widget

2. Fill in your widget details

   • Title: What else do you need?

   • Subtitle (optional8/.

3. Select Target product

Specific tags: Rings ⇒ This means the widget will only appear on products tagged with “Rings”.

1. Choose Recommended Products

Recommendation rule: Same Tag ⇒ The widget shows other products that share the same tag as the current product.

1. Click Save

---

Step 2: Configure widget style

1. In the widget detail > click Customize > it directs to app Settings > Design

1. Choose where it is shown: find Position

Choose one:

• Use app block in theme editor (recommended) Use Shopify Theme Editor to drag & drop the widget.

• Before / After a HTML element (manual placement) Use this if you’re adding the widget via shortcode and need full control.

1. Configure the color and design of each widget you want

2. Save settings

3. Use the Preview panel on the right to see real-time changes.

---

Step 3: Display widget on Cart page

Learn more

Copy shortcode of the widget

1. Return to the Widgets list

2. Locate your widget and click Copy under the Shortcode column

Add widget block in theme editor

1. Go to store backend > go to Online stores > Theme > Edit theme

2. On Themes Editor page > go to Cart page template

3. Click Add Block > select Apps > select Tipo Related Products

1. Paste the widget’s shortcode into the block settings and save the theme editor

1. Click Save

---

Step 4: Enable app embed

In theme editor, toggle on the app embed of Tipo Related Products. Learn more

What customers see

When a customer views a Ring product:

• The widget appears below the product

• It displays other ring-related items (same tag)

• Customers can quickly discover matching or complementary products

---