# 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 <a href="#what-this-widget-does" id="what-this-widget-does"></a>

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

<figure><img src="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2FtdQikrXJUGUK9p4lgz22%2F2025-12-24_10-28-32.png?alt=media&#x26;token=742ec29e-06bc-4d13-86d9-accd0e67c7dd" alt=""><figcaption></figcaption></figure>

***

## ℹ️ 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.

<figure><img src="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2FGYZlMvnHpOMvbB0nGJRl%2F2025-12-24_10-29-02.png?alt=media&#x26;token=446e0d33-8994-4da8-9df9-a2300e8e4e2b" alt=""><figcaption></figcaption></figure>

***

#### 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

<figure><img src="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2F5sfxXBAmAvBGXqh3n940%2F2025-10-22_16-46-43.png?alt=media&#x26;token=9eb7f5ac-2547-49a3-a431-36218e07e98e" alt=""><figcaption></figcaption></figure>

4. Click **Next** to go to the configuration page and begin setting up your widget
5. Fill in your widget details
   * **Title:** *What else do you need?*
   * Subtitle (optional8/.&#x20;
6. Select **Target** product&#x20;

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

7. **Choose Recommended Products**

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

<figure><img src="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2FvoZG3ZRlCOByxA0GYFMA%2F2025-12-24_10-05-32.png?alt=media&#x26;token=15f8d5d9-3e0c-46ba-8000-c798854f9ef5" alt=""><figcaption></figcaption></figure>

8. Click **Save**

***

### Step 2: Configure widget style <a href="#step-2-configure-widget-style" id="step-2-configure-widget-style"></a>

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

<figure><img src="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2FRfKsI4H5jaUwPNpr5zsP%2F2025-12-24_10-10-59.png?alt=media&#x26;token=6da605f7-ed93-4af4-9287-7b39f3dd6df4" alt=""><figcaption></figcaption></figure>

2. 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.

<figure><img src="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2F9pJCuBV4dINDjf6mYeb0%2F2025-12-24_10-11-19.png?alt=media&#x26;token=52f0be52-80f1-48c2-9555-e7f5e62a6651" alt=""><figcaption></figcaption></figure>

3. Configure the color and design of each widget you want
4. Save settings
5. Use the Preview panel on the right to see real-time changes.

***

### **Step 3: Display widget on Cart page** <a href="#step-3-display-widget-on-homepage" id="step-3-display-widget-on-homepage"></a>

[**Learn more**](https://docs.tipo.io/tipo-related-products/widget-configuration/manage-widgets/display-a-widget)

#### **Copy shortcode of the widget**

1. Return to the **Widgets** list
2. Locate your widget and click **Copy** under the **Shortcode** column

<figure><img src="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2FrIM8RDX2DUwxQLbZYtlK%2F2025-12-24_10-18-02.png?alt=media&#x26;token=0ac2d3c2-7e9e-446b-b3d5-aa2077636c61" alt=""><figcaption></figcaption></figure>

#### **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**

<figure><img src="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2FdOHmdEVLpBDAP1Qtheuu%2F2025-10-22_16-53-10.png?alt=media&#x26;token=4e54c0b4-8556-4498-ac5e-c46cf6ce728f" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3173367560-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRM5h2vtdtoVXQ1FbxweB%2Fuploads%2F1lCqWxbMzBhwhzNmhbjJ%2F2025-12-24_10-22-33.png?alt=media&#x26;token=833b6e61-538e-4bc6-9452-3aaff436633a" alt=""><figcaption></figcaption></figure>

5. Click **Save**

***

### Step 4: Enable app embed <a href="#step-4-enable-app-embed" id="step-4-enable-app-embed"></a>

In theme editor, toggle on the app embed of Tipo Related Products. [Learn more](https://docs.tipo.io/tipo-related-products/setting-up/activate-app-embed-on-theme)

<figure><img src="https://docs.tipo.io/~gitbook/image?url=https%3A%2F%2F3173367560-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRM5h2vtdtoVXQ1FbxweB%252Fuploads%252FPoxPt83s1VYDjTlDNLmF%252Fimage.png%3Falt%3Dmedia%26token%3Dface249f-c790-4e53-9fe1-375a388fd88f&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=80d47009&#x26;sv=2" alt=""><figcaption></figcaption></figure>

#### 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

***