> 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/widget-setup/widget-types-explained/cart-page-widget.md).

# 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="/files/AzVA5wmERyP1F7S3kqxH" 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="/files/R8LYZJjUA3nlqhdGS5Pt" 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="/files/N9y7DzsP8Wt5b9VO2FHT" 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="/files/U38FLVYqM5rTGM8b65Ix" 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="/files/KXKO6qAe5iaGGjWzh9cR" 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="/files/QYPDkflPYVMcXxtT3gLv" 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="/files/mLtxYixHurQV6pZjnSrg" 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="/files/vmr6BhYtP4sUhu6enUlq" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/HUtpNdyIgDN3MeRHXebM" 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

***