> ## Documentation Index
> Fetch the complete documentation index at: https://bundles-docs.getappfox.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Cart upsell banner

> Enable the bundle upsell banner on your cart page

The cart upsell banner appears on your cart page when customers add products that are part of bundles, encouraging them to complete the bundle and unlock savings.

## What is the cart upsell banner?

The cart upsell banner is an optional app block that displays on your cart page. When a customer has products in their cart that are part of a bundle, the banner suggests adding the remaining products to receive the bundle discount.

**Example**: Customer adds a phone to their cart. The banner shows: "Add a phone case and screen protector to save 20% on your purchase!"

## Adding the cart banner

<Steps>
  <Step title="Open the theme editor">
    Go to **Online Store** → **Themes** in your Shopify admin, click **Customize** on your active theme.
  </Step>

  <Step title="Navigate to the cart page">
    In the theme editor, use the page selector at the top to navigate to the cart page template.
  </Step>

  <Step title="Add the app block">
    Click **Add block**, scroll to the **Apps** section, and select **Product Bundles Cart Banner**.
  </Step>

  <Step title="Position the banner">
    Drag the banner block to your desired position. Common placements:

    * Above the cart items list
    * Below the cart items, above checkout button
    * In the cart sidebar
  </Step>

  <Step title="Save your changes">
    Click **Save** in the top right corner.
  </Step>
</Steps>

## Banner behavior

### When the banner appears

The banner displays when:

* Customer has at least one product from a bundle in their cart
* The customer hasn't added all products required for the bundle
* Bundle is active and products have inventory

If the customer has all products from a bundle (and discount is applied), the banner doesn't appear.

### Multiple bundle opportunities

If cart products are part of multiple bundles:

* Banner shows the highest-value opportunity first
* Customer can see other bundle opportunities by scrolling or expanding
* Each opportunity has its own "Add to cart" button

### What the banner shows

* Bundle name and description
* Products already in cart (marked with checkmark)
* Products still needed (with "Add" button)
* Potential savings amount
* Quick-add buttons for missing products

## Banner settings

### Block settings (in theme editor)

Configure in the theme editor:

* **Position**: Above or below cart items
* **Banner style**: Inline, prominent box, or subtle notification
* **Dismiss option**: Allow customers to close the banner

### Style settings (in Product Bundles app)

Go to **Settings** in the app:

* **Colors**: Background, text, button colors
* **Banner copy**: Customize messaging
* **Call to action**: Button text

## Customizing the banner

### Messaging

Customize the banner message to match your brand voice:

* **Urgent**: "Don't miss out! Complete your bundle and save 20%"
* **Helpful**: "You might also like these items. Buy together and save!"
* **Value-focused**: "Save \$15 by adding these products to your cart"
* **Casual**: "Looking good! Add these to complete the bundle"

### Visual style

Match your cart page design:

* Use colors that stand out but don't clash
* Choose a layout that fits your cart page structure
* Ensure the banner is noticeable but not annoying

### Timing and dismissal

* **Always show**: Banner appears every time conditions are met
* **Dismissible**: Customers can close the banner (won't show again in same session)
* **Session-based**: Reset dismissed state after customer leaves and returns

Choose based on how aggressive you want upselling to be.

## Banner effectiveness

### Why cart banners work

* **Timely**: Customers are already in buying mode
* **Relevant**: Shows bundles for products they've already chosen
* **Low friction**: One click to add remaining products
* **Clear value**: Savings amount is prominent

### Conversion tips

To maximize cart banner conversion:

1. **Show savings first**: Lead with "Save \$X" or "X% off"
2. **Keep it simple**: Don't overwhelm with too many products
3. **Use urgency carefully**: "Complete your bundle now" without being pushy
4. **Visual product previews**: Show images of products to add
5. **One-click add**: Make it as easy as possible to add products

## Best practices

<AccordionGroup>
  <Accordion title="Don't be too aggressive" icon="hand">
    The cart banner should suggest, not demand. Give customers the option to dismiss it if they're not interested.
  </Accordion>

  <Accordion title="Prioritize high-value bundles" icon="arrow-up">
    If multiple bundles apply, show the one with the highest potential savings or best conversion rate first.
  </Accordion>

  <Accordion title="Keep messaging clear" icon="comment">
    Explain exactly what the customer needs to do: "Add \[product] and \[product] to save 20%".
  </Accordion>

  <Accordion title="Test different positions" icon="arrows-up-down">
    Try the banner above cart items, below them, or in the sidebar. Track which position converts best.
  </Accordion>

  <Accordion title="Match cart page style" icon="palette">
    The banner should feel integrated into your cart page, not like an intrusive popup.
  </Accordion>

  <Accordion title="Show product images" icon="image">
    Visual previews of products to add increase click-through rates compared to text-only suggestions.
  </Accordion>
</AccordionGroup>

## Cart banner vs. product page widget

Both work together to maximize bundle conversions:

| Feature | Product Page Widget | Cart Banner |
| - | - | - |
| **Timing** | Before add to cart | After product in cart |
| **Goal** | Introduce bundle | Remind and upsell |
| **Visibility** | Product pages only | Cart page only |
| **Customer intent** | Browsing | Ready to buy |
| **Conversion stage** | Early (awareness) | Late (decision) |

**Use both**: Product page widget introduces bundles; cart banner reminds customers who didn't use the widget.

## Examples

### Fashion store

**Cart contents**: 1 dress

**Banner**: "Complete your look! Add matching shoes and handbag for 20% off. **Save \$30**" \[Add to cart button]

### Electronics store

**Cart contents**: 1 laptop

**Banner**: "Protect your purchase. Add a case and screen protector for \$15 off." \[Quick add buttons]

### Beauty store

**Cart contents**: Cleanser, toner

**Banner**: "You're so close! Add moisturizer to complete your skincare routine and save 25%." \[Add button]

## Tracking performance

Monitor cart banner effectiveness:

* **Impression rate**: How often banner is shown
* **Click-through rate**: Percentage who click "Add to cart"
* **Conversion rate**: Percentage who complete the bundle
* **Average order value lift**: Increased AOV from cart upsells

Access these metrics on the [Analytics page](/dashboard/analytics).

## Troubleshooting

**Banner not appearing**:

* Verify cart page app block is added in theme editor
* Check that cart products are part of active bundles
* Ensure customer hasn't added all bundle products already
* Confirm app embed is enabled

**Banner shows wrong bundle**:

* Check bundle product configuration
* Verify cart products match bundle requirements
* Review bundle priority settings (if available)

**Banner appears too often**:

* Enable dismissal option so customers can close it
* Adjust frequency settings in app configuration
* Consider showing only on first cart view per session

<Tip>The cart banner is particularly effective for bundles where customers might not notice the product page widget. It gives you a second chance to present the bundle offer at a high-intent moment.</Tip>