Product Cross-Sell Toggle
A toggle on the product page that adds an upsell item alongside the main product when the customer opts in.
Last updated
How to use
Place the toggle on your product page and choose
Mode— CMS or Manual.In CMS mode, connect
⛁ Butter Datato the add-on product; in Manual mode, setProduct ID(plus optionalVariant IDandSelling Plan ID).Set the
Defaultstate (Unselected or Selected) and theQuantitymode.Connect the
⦿ Selectedand⦿ Unselecteddesigns.
Choosing the add-on product
Mode decides where the add-on comes from: CMS pulls it from a connected ⛁ Butter Data product, while Manual targets a specific Product ID — optionally pinned to a Variant ID and a Selling Plan ID — for cases where you don't want a CMS connection.
Setting the quantity
The Quantity control is either Set, a fixed Amount you choose, or Match, which mirrors whatever quantity the customer has selected for the main product.
How the add-on reaches the cart
Selecting the toggle doesn't add anything by itself — it just remembers the choice. The actual add happens together with the main product: when the customer adds to cart (or Buy Now) through the Purchase Button, all selected cross-sells are added together with the main line, so there's no flicker or desync between them. If the add-on is out of stock — whether a customer taps the toggle directly, or a Default of Selected tries to select it automatically — it won't enter its selected state, 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.