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

# Cart upsell banner

> Add the Appfox Cart Bundle Upsell block to your Shopify cart template so shoppers see which products are still needed to unlock the bundle discount.

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 **Cart Bundle Upsell**.
  </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>

### For cart drawers (Dawn and similar themes)

<Steps>
  <Step title="Enable the app embed">
    In the theme editor, navigate to **Theme settings** → **App embeds** (left sidebar).
  </Step>

  <Step title="Find and enable the upsell embed">
    Locate **Cart Drawer Upsell** in the list and toggle it on.
  </Step>

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

<Note>The app embed automatically detects cart drawers in Dawn and similar themes. No additional configuration needed!</Note>

## 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 will be applied), the banner doesn't appear.

### Multiple bundle opportunities

If cart products are part of multiple bundles:

* Banner shows up to 2 highest-value opportunities
* Each opportunity displays potential savings
* Bundles are sorted by highest savings first

### What the banner shows

* Bundle name
* Products already in cart (marked with checkmark)
* Products still needed with variant pickers
* Potential savings amount
* One-click "Add all to cart" button with savings amount

### Technical details

* Uses Shopify's section rendering for instant cart updates (no page reload)
* Automatically adds bundle properties for discount application
* Classic bundles use `_appfox_classic_bundle_id` attribute for proper discount function handling
* Dismissible per session (banner returns on new session)

## Banner settings

### Block settings (in theme editor)

Configure in the theme editor:

* **Position**: Drag to place above or below cart items
* The banner inherits your bundle widget styling automatically

### Style settings (in Product Bundles app)

The cart banner uses your existing bundle widget styles from **Settings** → **Colors**:

* Colors automatically match your widget design
* Fonts and button styles sync with product page widgets
* Border radius follows your widget configuration

<Tip>Keep your cart banner and product page widget visually consistent by using the same styling configuration!</Tip>

## 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 in the **Analytics** page:

* **Banner views**: How often the banner is shown
* **Add clicks**: How many times customers click "Add all to cart"
* **Conversions**: Completed bundle adds from cart upsell
* **Average savings**: Average discount amount offered
* **Conversion rate**: Percentage of views that result in adds

The cart banner tracks all interactions through PostHog for detailed analysis.

Access these metrics alongside your product page widget performance on the [Analytics page](/product-bundles/docs/product-bundles/docs/dashboard/analytics).

## Troubleshooting

**Banner not appearing**:

* Verify cart page app block is added in theme editor
* For cart drawers: Enable the app embed in Theme settings → App embeds
* Check that cart products are part of active bundles
* Ensure customer hasn't added all bundle products already
* Confirm app is installed and bundles are active

**Banner shows wrong bundle**:

* Check bundle product configuration
* Verify cart products match bundle requirements
* Banner prioritizes bundles with highest potential savings

**Banner not updating after adding products**:

* Check browser console for JavaScript errors
* Ensure theme supports section rendering
* Try refreshing the page
* The banner auto-hides after successful add

**Cart drawer not showing banner**:

* Verify app embed is enabled in theme settings
* Dawn theme is fully supported; custom themes may need theme developer assistance
* Check if cart drawer dispatches standard cart events

<Tip>The cart banner works best with Shopify 2.0 themes. For older themes, the cart page block is recommended over the drawer embed.</Tip>

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.