Cart Cross-Sell Toggle

An in-cart toggle that adds or removes an upsell item directly from the cart row, with control over where it counts in the cart UI.

Last updated

August 14, 2026

How to use

Place the toggle inside your cart, typically above your subtotal lines.
Set Mode to point at the upsell — connect ⛁ Butter Data to a product/variant, or set Product ID, Variant ID, and (for subscriptions) Selling Plan ID manually.
Set Default and Quantity, then connect your ⦿ Selected and ⦿ Unselected designs.

Optionally set Tracking to record this toggle's interactions in Framer Analytics.

Choosing what the toggle adds

The upsell target comes from Mode: point ⛁ Butter Data at a CMS-connected product, or bypass the CMS entirely by setting Product ID and Variant ID directly. Add a Selling Plan ID when the upsell should be added as a subscription rather than a one-time purchase.

Where the upsell counts in the cart UI

Four independent flags decide where an added upsell shows up — separate from whether the line actually exists in the cart:

Flag	What it controls
`Show in Subtotal`	Whether the upsell's price counts toward the displayed subtotal.
`Show in Counter`	Whether the upsell's quantity counts toward the cart item counter.
`Show in List`	Whether the upsell appears as its own row in the cart line list.
`Contribute to Promo Progress`	Whether the upsell counts toward cart incentive/promo-bar progress.

Turning off Show in List for a gift-wrap upsell, for example, lets it contribute to the total and checkout without appearing as its own cart row — the counter and subtotal can intentionally differ from the raw line data as a result.

Keeping quantities accurate across cart rows

Toggling updates the cart instantly. Butter also guards against two problems you'd otherwise see with a toggle repeated in every cart row:

No doubled quantities. Even if the same upsell toggle appears in several rows, tapping it adds the item once — never twice.
Customer choice sticks. If a customer switches the upsell off, it stays off, even with Default set to Selected.

If the upsell variant is out of stock — whether a customer taps the toggle directly, or a Default of Selected tries to add it automatically — the item isn't added, and a "This add-on isn't available for sale." message fires. Connect the Toast component's cart ⦿ Add: Error design to show it to customers.