Collapse Menu
Docs Home
Extensibility Options
Contact Support

Adding a Popup Storefront to Your Website


This article describes how to implement a Popup Storefront on your website.


Popup Storefronts are powered by FastSpring's Store Builder Library and offer both very simple and advanced ways to integrate with your website. 


Popup Storefronts are designed to achieve maximum conversions by minimizing the number of fields customers must see and click after clicking a buy button. Customers cannot modify the quantity or remove an item from the order via a Popup Storefront, but you can give them these options on your page--outside the Popup Storefront--using Store Builder Library.


Create and Customize Popup Storefronts

Your account comes with a pre-created Popup Storefront which you can customize to match your desired look and feel. You can also create additional Popup Storefronts if needed. 


Whitelist Your Domains for Each Popup Storefront

When using a Popup Storefront you will need to "whitelist" domains where the Popup Storefront will be shown. All of your domains (including those you will use for testing and development) need to be whitelisted.


Web pages residing on any domain you whitelist will be allowed to process live transactions using your Popup Storefront, for products in your Store. Since the code to invoke your Popup Storefront can potentially be viewed externally, it is necessary to prevent the Storefront from being loaded on any page you do not own, control, or trust. The process of whitelisting domains on the server side allows you to exert that control.
  1. Log on to the Dashboard and select Storefronts → Popup Storefronts.

    User-added image
    User-added image
  2. In the tile of the Popup Storefront for which you want to whitelist your domain(s), click the red No whitelisted websites badge. Alternatively, if you have previously whitelisted at least one domain for this Storefront, the badge may appear in green and show the number of domains currently whitelisted.

    User-added image
  3. In the Whitelisted Websites dialog, click the text area and enter a single line for each domain to be whitelisted; separate the domains using carriage returns. For each entry, include only the protocol (http:// or https://)  and the domain or subdomain; do not include the full URL of a page on the site.

    For example:

    User-added image
  4. Please allow up to 15-20 minutes for any domain updates to be fully saved and applied, before live transactions can be made from the whitelisted domain URLs.
  5. Click SAVE. The whitelist badge on the Popup Storefront's tile will turn green and reflect the new total number of domain whitelist entries for the Storefront.

    User-added image
  6. If you have additional Popup Storefronts, repeat this process to whitelist the desired domains for each of them; you may choose to whitelist the same domains for all Popup Storefronts, or use different domains for different Storefronts. You can come back and make changes at any time by clicking the green whitelist badge.

Placing a Popup Storefront On Your Website

 Tutorial Video

Check out our tutorial video on adding a Popup Storefront to your website:  How to Add a Popup Storefront to Your Website.

Once your URLs have been whitelisted, you will be ready to place the Popup Storefront on your website. To do so, navigate to the desired Storefront and click PLACE ON YOUR WEBSITE. Copy the Javascript snippet and add it to the <head> section of pages where you would like to use the Popup Storefront. 

The snippet is a part of the Store Builder Library and will look similar to this:

      src="" type="text/javascript"

After the snippet has been added to the <head> of your website, you can show the popup on the page.


If your page restricts sandboxes through a Content Security Policy (CSP) header, be sure to add allow-top-navigation to the policy.


Third-party tools that attempt to compress, concatenate, or defer JavaScript loading may interfere with initializing the Store Builder Library.  For example, the Rocketscript tool from Cloudflare may modify your script that loads the Store Builder Library like this:  <script id='fsc-api' data-rocketsrc=""> . This may not work because data-rocketsrc is not supported by Store Builder Library at this time. To ensure the Store Builder Library can load successfully, we recommend that you avoid using these types of tools on pages that load the library.

Displaying Product Details On Your Website

If you plan to use Store Builder Library to display product details such as prices, icons, and descriptions on your web pages, be sure to add the desired products to your Popup Storefront using the PRODUCTS command. For more information, please see Getting Started with Store Builder Library.

Placing Test Orders via a Popup Storefront

If your Popup Storefront is offline, the provided snippet will automatically include the URL for your test Storefront. If your Storefront is online but you want to place test orders, you can also add the string test to the URL found in the data-storefront parameter of the snippet, as shown in the example above.  The string test should be inserted between your company name and

In the example above - - the company name would be vendor, followed by test, indicating that only test orders will be processed, followed by the remainder of the URL for the Popup Storefront (


Please use caution when implementing test mode Popup Storefronts on your webpages; you do not want live customers to be able to place test orders, so it is important to make sure any webpage with a test mode Popup Storefront is not available externally / outside of your network.

If you want to modify the webpage to call the live Popup Storefront (and the Storefront is online), you can simply remove the 'test' string from the URL in the script. To continue the example above, the resulting live URL would be


Triggering the Popup Window

The easiest way to show the popup on the page is by using an HTML directive:

 <a href='#' data-fsc-action="Add,Checkout" data-fsc-item-path-value="product-one">Purchase "Product One"</a>

The example directive above will add "Product One" to the cart and open the Popup Storefront to initiate checkout (assuming that "product-one" is the product path / product ID of a product that exists in your Store).

The value that you enter for the data-fsc-item-path-value should be the product path (also called the product ID) for the product in your Store that will be added to the cart.

 To find the product path for a product
  1. From the Dashboard, select the Products menu and then select Products, Bundles or Subscriptions, depending on the item you want to add to the cart via your Popup Storefront.
  2. Click the tile of the item you want to add to the cart. The item's details will appear.
    User-added image
  3. The product ID / product path can be found at the top left-hand corner of the item's details, as illustrated above. This is the value you will enter for the data-fsc-item-path-value in your HTML directive to open a Popup Storefront.

Once you have added the Popup Storefront and made sure it's working, you can implement advanced checkout scenarios by exploring capabilities of the Store Builder Library.


When using a Popup Storefront, we recommend that you deploy a security certificate and use the https: protocol for your website. Otherwise, most web browsers will not display a closed padlock icon, and some may display warning messages about non-secure pages. For more information, please see Popup Storefronts and Browser Security Features.

Library Callbacks for Popups

Using Store Builder Library, you can set callback functions that will be called on certain events that happen inside the popup, for additional tracking and behavior options. Please see Getting Started with Store Builder Library for more information on callbacks and available options.


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.