Addon Toggle
The Addon Toggle lets visitors independently add or remove optional extras — warranties, insurance, upgrades, or any add-on product. Unlike the Package Selector (pick one), any number of add-ons can be active at the same time.
New to add-ons? Start with the Selling Add-ons Guide for a complete walkthrough with styled examples you can copy and paste.
What You're Building
- An add-on section where visitors click a card to add or remove an optional item from the cart
- Each card shows a live price and switches between "Add" and "Added" states automatically
- Any combination of add-ons can be active at the same time
- One or more add-ons can be pre-selected so they are added automatically on page load
- Prices update automatically and include any active discounts
How It Works
- Mark a section of your page as an add-on area and place a card inside it for each package
- Clicking a card that is not in the cart adds it; clicking one that is in the cart removes it
- Mark a card as pre-selected to add it automatically on page load — if the item is already in the cart from a previous page load, it will not be added again
- Prices are fetched from the backend and update automatically, including any active offer or coupon discounts
Get Started
Add toggle cards to your page and configure your first add-on package.
Displaying Prices
Show prices, product names, images, and savings inside each card or anywhere else on the page.
Card Templates
Write one card template and give the toggle a list of packages — it creates a card for each one automatically.
Quantity Sync
Automatically match an add-on's quantity to the main product — for example, one warranty per bottle.
State Containers
Apply styling changes to a wrapper element instead of the card itself.