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.
FastSpring has designed Popup Storefronts to achieve maximum conversions by minimizing the number of fields customers must see and click after clicking a buy button. Popup Storefronts offer an optional cart that allows customers to modify the quantity or remove an item from the order. You can also give customers these options outside of the popup cart on your page, using the Store Builder Library.
- Create and Customize Popup Storefronts
- Whitelist Your Domains for Each Popup Storefront
- Placing a Popup Storefront On Your Website
- Displaying Product Details On Your Website
- Placing Test Orders via a Popup Storefront
- Triggering the Popup Window
- Library Callbacks for Popups
Create and Customize Popup Storefronts
Whitelist Your Domains for Each Popup Storefront
When using a Popup Storefront you will need to "whitelist" domains where the Popup Storefront is to appear. All of your domains (including those you use for testing and development) need to be whitelisted.
- Log on to the FastSpring App and select Storefronts → Popup Storefronts.
- In the card 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.
- 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.
- Please allow up to 15-20 minutes for any domain updates to be fully saved and applied, before customers can place live transactions from the whitelisted domain URLs.
- Click Save. The whitelist badge on the Popup Storefront's tile turns green. It reflects the new total number of domain whitelist entries for the Storefront.
- 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
The snippet is a part of the Store Builder Library and looks similar to this:
After you have added the snippet to the <head> of your website, you can open the Popup Storefront on the page.
Displaying Product Details On Your Website
Store Builder Library lets you optionally display product details such as prices, icons, and descriptions on your web pages. If you plan to do this, 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 automatically includes the URL for your test Storefront. If your Storefront is online, you can still choose to place test orders. To do so, add the string test to the URL found in the data-storefront parameter of the snippet. The example above includes the test string. Insert the string between your company name and onfastspring.com.
In the example above - yourexamplestore.test.onfastspring.com/popup-yourexamplestore - the company name would be yourexamplestore, followed by test, indicating that only test orders will be processed, followed by the remainder of the URL for the Popup Storefront (onfastspring.com/popup-yourexamplestore).
Please use caution when implementing test mode Popup Storefronts on your webpages. Customers cannot place live orders via a test mode Storefront. Therefore, we recommend only using test mode Popup Storefronts on webpages that are not visited by your live customers.
If you want to modify the webpage to call the live Popup Storefront (and the Storefront is online), you can remove the 'test' string from the URL in the script. To continue the example above, the resulting live URL would be yourexamplestore.onfastspring.com/popup-yourexamplestore.
Triggering the Popup Window
The easiest way to open the Popup Storefront 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 adds "Product One" to the cart and opens the Popup Storefront to initiate checkout. (This assumes 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 you want the link or button to add to the cart.To find the product path for a product
- From the FastSpring App, 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.
- Click the the item you want to add to the cart. The item's detail page appears.
- The product ID/product path can be found at the top left-hand corner of the item's details, as illustrated above. This ID is the value you must 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 is working, you can implement advanced checkout scenarios by exploring capabilities of the Store Builder Library.
Library Callbacks for Popups
Using Store Builder Library, you can set callback functions that the library will call on specific 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.