Get Started

By the end of this page you will have clickable add-on cards that add and remove items from the cart, with button text and styling that update automatically.

Step 1: Create the Add-on Area

Add data-next-package-toggle to a container element. Every card inside it becomes a toggleable add-on.

<div data-next-package-toggle>
  <!-- add-on cards go here -->
</div>

Step 2: Add Your Cards

Each card needs data-next-toggle-card and a data-next-package-id matching the package ref_id from your campaign.

<div data-next-package-toggle>

  <div data-next-toggle-card
       data-next-package-id="201"
       data-add-text="Add Warranty"
       data-remove-text="✓ Warranty Added">
    2-Year Warranty
    <span data-next-toggle-display="price"></span>
  </div>

  <div data-next-toggle-card
       data-next-package-id="202"
       data-add-text="Add Insurance"
       data-remove-text="✓ Insurance Added">
    Shipping Insurance
    <span data-next-toggle-display="price"></span>
    <del data-next-toggle-display="originalPrice"></del>
  </div>

</div>

Clicking a card that is not in the cart adds it. Clicking one that is in the cart removes it.

Step 3: Pre-Select a Card

Add data-next-selected="true" to any card you want added to the cart automatically when the page loads. If the item is already in the cart from a previous page load, it will not be added again.

<div data-next-toggle-card
     data-next-package-id="202"
     data-next-selected="true"
     data-add-text="Add Insurance"
     data-remove-text="✓ Insurance Added">
  Shipping Insurance
  <span data-next-toggle-display="price"></span>
</div>

Step 4: Button Text

Use data-add-text and data-remove-text to change the label when the cart state changes. The text switches automatically.

If your card has images or other elements inside, add data-next-button-text to the specific element whose text should change:

<div data-next-toggle-card
     data-next-package-id="201"
     data-add-text="Add Warranty"
     data-remove-text="✓ Added">
  <img data-next-toggle-image />
  <span data-next-button-text>Add Warranty</span>
</div>

If you do not use data-next-button-text, the card updates its own text content directly. This works well for cards that contain only text and no other child elements.

Step 5: Package Images

Add data-next-toggle-image to any <img> inside a card. The image source is filled in automatically from your campaign package data.

<div data-next-toggle-card data-next-package-id="201">
  <img data-next-toggle-image alt="Warranty" />
  <span>2-Year Warranty</span>
</div>

Step 6: Using a Button Instead of a Card

If you only need a single button with no card wrapper, place data-next-package-toggle directly on the button itself. The button acts as both the container and the card — all CSS classes are applied to it directly.

<button data-next-package-toggle
        data-next-package-id="201"
        data-add-text="Add Warranty — $9.99"
        data-remove-text="✓ Warranty Added">
  Add Warranty — $9.99
</button>

The button text switches automatically between the add and remove values.

Full Example

A complete add-on section with two cards, pre-selection, images, prices, and styling:

<section class="addons">
  <h2>Protect Your Purchase</h2>

  <div data-next-package-toggle>

    <div class="addon-card" data-next-toggle-card
         data-next-package-id="201"
         data-add-text="Add Warranty"
         data-remove-text="✓ Warranty Added">
      <img data-next-toggle-image alt="Warranty" />
      <div class="addon-info">
        <strong>2-Year Warranty</strong>
        <p>Full parts and labor coverage</p>
      </div>
      <div class="addon-price">
        <span data-next-toggle-display="price"></span>
        <del data-next-toggle-display="originalPrice"></del>
      </div>
      <span class="addon-button" data-next-button-text>Add Warranty</span>
    </div>

    <div class="addon-card" data-next-toggle-card
         data-next-package-id="202"
         data-next-selected="true"
         data-add-text="Add Insurance"
         data-remove-text="✓ Insurance Added">
      <img data-next-toggle-image alt="Insurance" />
      <div class="addon-info">
        <strong>Shipping Insurance</strong>
        <p>Covers loss or damage in transit</p>
      </div>
      <div class="addon-price">
        <span data-next-toggle-display="price"></span>
        <del data-next-toggle-display="originalPrice"></del>
      </div>
      <span class="addon-button" data-next-button-text>Add Insurance</span>
    </div>

  </div>
</section>

<style>
  .addons { max-width: 480px }

  .addon-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    cursor: pointer;
  }
  .addon-card img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
  }
  .addon-info { flex: 1 }
  .addon-info p { color: #6b7280; font-size: 0.85rem; margin: 0 }
  .addon-price del { color: #9ca3af; font-size: 0.85rem }

  .addon-button {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: 1px solid currentColor;
    font-size: 0.85rem;
  }

  /* Card is in the cart */
  .addon-card.next-in-cart {
    border-color: #16a34a;
    background: #f0fdf4;
  }
  .addon-card.next-in-cart .addon-button {
    background: #16a34a;
    color: white;
    border-color: #16a34a;
  }

  /* Card is not in the cart */
  .addon-card.next-not-in-cart {
    opacity: 0.85;
  }

  /* Price is loading */
  .addon-card.next-loading [data-next-toggle-display] {
    opacity: 0.4;
  }
</style>

Next Steps

Show more data inside cards: Displaying Prices
Generate cards from a template: Card Templates
Match add-on quantity to the main product: Quantity Sync
See all attributes: Attributes Reference

On this page