Collapse Menu
Docs Home
Extensibility Options
Contact Support

About the Popup Storefront Cart

Overview

Popup Storefronts can optionally include a shopping cart that allows buyers to see and modify the entire contents of the order, directly in the Popup Storefront. This article explains the Popup Storefront cart feature.

Popup Storefronts can optionally include a shopping cart that allows buyers to see and modify the entire contents of the order without leaving the Popup Storefront dialog. Plus, if you use the optional data-continuous markup directive when your page loads, the cart session persists even if the customer closes the Popup Storefront dialog.

You can enable the cart for each Popup Storefront by selecting a simple checkbox in the FastSpring App. Using this built-in cart may make it unnecessary for you to develop a shopping cart on your own pages using advanced Store Builder Library (SBL) functionality.

 

Enabling the Popup Storefront Cart

  1. To enable the cart in your Popup Storefront, log in to the FastSpring App and browse to Storefronts -> Popup Storefronts.
  2. Click Settings for 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 .

 

Customer Experience

When a customer clicks a button on your page that launches the Popup Storefront using a standard method, the Popup Storefront opens as usual. If you have enabled Show Shopping Cart for the Storefront, the customer a 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.

 Tip

The color of the quantity indicator here uses the Price line color set under Styling -> Pricing Block.

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

Customers 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 button or Continue Checkout causes the standard checkout dialog to be displayed.

 Note

If you launch the Popup Cart directly, bypassing the checkout dialog as described below, then the  button does not appear on 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-sell offers 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.

 Note

Each product can have an optional Display message configured for its cross-sell offers. In the example above, the Display message is "Customers Also Purchased...". However, if more than one of the products in the cart has a cross-sell offer, only one Display message appears at the top of the cross-sell section. The Popup Cart only renders the Display label for the first product added.

 

Launching the Popup Cart Directly

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

  • fastspring.builder.viewCart() (Note:  This does not currently accept a session ID parameter, but you can still open a pre-created session using the standard checkout() method.)
  • the markup directive data-fsc-action="ViewCart" (this can be stacked together with other actions, such as "Add").

 Note

To control the version of SBL that your page loads, update the URL in the src directive of the script, e.g., https://d1f8f9xcsvx3ha.cloudfront.net/sbl/0.8.3/fastspring-builder.min.js.

 

Cart Persistence

If you want the cart items and quantities to persist even when the buyer closes the Popup Storefront, please ensure that the script that loads SBL on your webpage includes data-continuous="true". For more information about this, please see Getting Started with Store Builder Library. With data-continuous enabled, the customer could even close the popup dialog and make changes to the cart contents via your page's SBL functions. When the customer opens the popup again in the same browser session, the current contents of the SBL session appear in the cart automatically.

Try FastSpring

Get a free account and see why FastSpring is the ecommerce partner of choice for software providers around the world. Try our full-service ecommerce solution today to unlock revenue growth for your online company.