Collapse Menu
Docs Home
Developer Tools
Contact Support

Popup Storefront Cart

Overview

Ways to use the Cart feature in Popup Storefronts

Popup Storefronts may include a shopping cart that allows buyers to see and modify the entire contents of the order without exiting the Popup Storefront. Enable the cart for each Popup Storefront by selecting a simple checkbox in the FastSpring App. If you use this built-in cart, you do not need to create one with the Store Builder Library.

If you use the optional data-continuous markup directive when your page loads, the cart session persists even if the consumer closes the Popup Storefront dialog.

Enable the Popup Storefront Cart

  1. In the FastSpring App, go to Storefronts > Popup Storefronts.
  2. Click Settings on the specific Popup Storefront where you want to enable the cart.
  3. On the Checkout page, select the True checkbox under the Show Shopping Cart field.
  4. Click Save.

Customer Experience

If you have enabled Show Shopping Cart for the Storefront, the consumer cart icon will appear at the top left-hand corner of the popup window. The total quantity of all items currently in the cart (added via Store Builder Library) appears at the top right-hand corner of the button.

The quantity indicator’s color uses the Price Line Color, which you can set under Styling > Pricing Block.

Clicking the cart button opens the cart interface. A separate line item appears for each product currently in the cart, including the icon and display name. For Subscription products, billing terms also appear.

Consumers can see and change the quantity of each item (if permitted by the product's Pricing settings), or click the X to remove an item from the cart. Clicking the back arrow at the top, left corner. Alternatively, Continue Checkout causes the standard checkout dialog to be displayed. If you launch the Popup Cart directly, this bypasses the checkout dialog and the back arrow does not appear in the cart. 

Cross-Sells in the Popup Cart

The Popup Cart can display up to ten Cross-Sell Offers based on the products in the order. Cross-Sells appear at the bottom of the cart, with an Add button next to each offer. The style of the Add button automatically matches the style of the Continue Checkout button.

Each product may include an optional Display Message for it’s cross-sell offers. In the example above, the display message is “Customers Also Purchased…” If there are multiple cross-sell offers, only the display message of the first cross-sell product is displayed.

Directly Launch the Popup Cart

If you use the latest version of Store Builder Library (version 0.8.1 or greater), open the Popup Storefront directly to the cart rather than initially showing the checkout page. There are two ways to do this:

  • fastspring.builder.viewCart() - This does not currently accept a session ID parameter, but you can still open a pre-created session using the standard checkout() method.
  • data-fsc-action="ViewCart" - This markup directive can be stacked together with other actions, such as "Add".
To control the Store Builder Library version that your page loads, update the URL in the src directive of the script, such as https://d1f8f9xcsvx3ha.cloudfront.net/sbl/0.8.3/fastspring-builder.min.js

Keep Cart Items for Future Sessions

If you want the items to remain in the cart when the buyer closes the Popup Storefront, ensure that the script that loads SBL on your webpage includes data-continuous="true".  See Getting Started with Store Builder Library for more information.

With data-continuous enabled, the consumer can also close the popup dialog and make changes to the cart contents via your page's SBL functions. When the consumer opens the popup again in the same browser session, the current contents of the SBL session appear in the cart automatically.