Add a shopping cart

You can add a shopping cart to any popup checkout. When enabled, buyers can view their selected products, update quantities, and review subscription terms. The cart also supports up to 10 product offers and works seamlessly with Store Builder Library (SBL) actions.

Use the sections below to enable the cart, open it directly with SBL, or persist cart contents for a browsing session.

Enable the shopping cart

Turn on the built-in cart so customers can view and update their selections.

In the FastSpring app, go to Checkouts > Popup Checkouts, select your checkout, then click Settings.

1. Go to the Checkout tab > Checkout Experience section.
2. Enable Show Shopping Cart.
3. (Optional) Enable Use Responsive Cart to let the cart layout adapt on smaller devices.

   Note: Responsive cart is not available for the Dark theme.

4. Click Save (top-right).

Launch the cart with SBL

Use Store Builder Library (SBL) actions or methods to open the popup cart directly, rather than starting in the full checkout dialog.

HTML-only example

The example below:

• Adds a product to the cart, and
• Immediately opens the cart when the button is clicked.

<!-- Cart buttons -->
<button
  data-fsc-item-path-value="phot-io-main-app"
  data-fsc-action="Add, ViewCart" >
  Add to Cart
</button>

<button data-fsc-action="ViewCart">
  View Cart
</button>

<!-- Store Builder Library -->
<script
  id="fsc-api"
  src="https://sbl.onfastspring.com/sbl/1.0.6/fastspring-builder.min.js"
  type="text/javascript"
  data-storefront="yourstore.test.onfastspring.com/popup-cart"
  data-continuous="true" >
</script>

Tip: Replace phot-io-main-app with your own product path, and update the data-storefront URL to match your test or live popup checkout.

JavaScript method (viewCart)

If you prefer to control the cart from JavaScript, you can call fastspring.builder.viewCart() directly:

<button onclick="fastspring.builder.viewCart();">
  View Cart
</button>

<script
  id="fsc-api"
  src="https://sbl.onfastspring.com/sbl/1.0.6/fastspring-builder.min.js"
  type="text/javascript"
  data-storefront="yourstore.test.onfastspring.com/popup-cart"
  data-continuous="true" >
</script>

<script type="text/javascript">
  // Optionally pre-add an item to the cart
  fastspring.builder.add('phot-io-main-app');
</script>

Persist cart contents for the session

Keep items in the cart after the buyer closes the popup checkout, as long as they remain in the same browser session.

To enable this behavior, make sure your SBL script includes data-continuous="true":

<script
  id="fsc-api"
  src="https://sbl.onfastspring.com/sbl/1.0.6/fastspring-builder.min.js"
  type="text/javascript"
  data-storefront="yourstore.test.onfastspring.com/popup-cart"
  data-continuous="true" >
</script>

When data-continuous is enabled:

• The cart keeps the selected items while the customer navigates your site.
• Reopening the popup checkout restores the same contents during that browser session.
• Cart contents stay in sync with SBL actions such as Add, Remove, and SetQuantity.

Cart behavior

Once the cart is enabled, a cart icon appears in the top-left corner of the popup checkout.

Customers can:

• Click the cart to view and edit quantities
• Review subscription terms
• Remove items from the cart
• Click Continue Checkout to move to the payment screen

Note: The cart quantity badge uses your Pricing Text Color, configured under Settings > Styling > Pricing Block.