Skip to main content
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

1

Open the theme editor

Go to Online Store → Themes in your Shopify admin, click Customize on your active theme.
2

Navigate to the cart page

In the theme editor, use the page selector at the top to navigate to the cart page template.
3

Add the app block

Click Add block, scroll to the Apps section, and select Cart Bundle Upsell.
4

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
5

Save your changes

Click Save in the top right corner.

​
For cart drawers (Dawn and similar themes)

1

Enable the app embed

In the theme editor, navigate to Theme settings → App embeds (left sidebar).
2

Find and enable the upsell embed

Locate Cart Drawer Upsell in the list and toggle it on.
3

Save your changes

Click Save in the top right corner.
The app embed automatically detects cart drawers in Dawn and similar themes. No additional configuration needed!

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

​
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
Keep your cart banner and product page widget visually consistent by using the same styling configuration!

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

​
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

The cart banner should suggest, not demand. Give customers the option to dismiss it if they’re not interested.
If multiple bundles apply, show the one with the highest potential savings or best conversion rate first.
Explain exactly what the customer needs to do: “Add [product] and [product] to save 20%”.
Try the banner above cart items, below them, or in the sidebar. Track which position converts best.
The banner should feel integrated into your cart page, not like an intrusive popup.
Visual previews of products to add increase click-through rates compared to text-only suggestions.

​
Cart banner vs. product page widget

Both work together to maximize bundle conversions: 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.

​
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
The cart banner works best with Shopify 2.0 themes. For older themes, the cart page block is recommended over the drawer embed.
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.