Addon Toggle

The Addon Toggle lets visitors independently add or remove individual packages — add-ons, warranties, insurance, upgrades, or any optional item. Unlike the Package Selector (pick one), any number of toggles can be active at the same time.

How It Works

Add data-next-package-toggle to a container and place [data-next-toggle-card] children with data-next-package-id
Clicking a card that is not in the cart adds it; clicking one that is in the cart removes it
Mark a card data-next-selected="true" to auto-add it on page load (deduped across page refreshes)
Prices are fetched with the full current cart as context so offer discounts that depend on cart total are reflected correctly

Get Started

Add toggle cards to your page and configure your first toggleable package.

Displaying Prices

Show backend prices inside cards and bind external elements to a toggle's state.

Card Templates

Write one card template and give the toggle a list of packages — it repeats the template for each one automatically.

Quantity Sync

Mirror an add-on's quantity to match the main product quantity automatically.

State Containers

Apply state classes to a wrapper element rather than the card itself.