Create and Customize your Popup Storefront
Table of Contents
- Create a Popup Storefront
- Configure your Checkout Experience
- Customize the Styling
- Analytics Integration
Popup Storefronts provide a same-page checkout experience to your customers, enabling them to complete the checkout process without leaving your website.
When a customer clicks “Buy Now”, your website prepares the order contents from the Store Builder Library. Then, a checkout window appears in a popup directly over the webpage, as seen below. After your customer enters their payment information, FastSpring handles the payment processing and fulfillments.
Create a Popup Storefront
- In the FastSpring App, navigate to Storefronts > Popup Storefronts. Click Create Popup Storefront.
- In the Company Sub-Directory Storefront ID field, enter an ID for your new Popup Storefront. The ID you enter becomes part of the Storefront’s URL.
- Click Create. Your new Popup Storefront appears in your Popup Storefronts page.
After you have initially created your Popup Storefront, you can customize it to match your website. From the Popup Storefronts page, click Settings.
Configure your Checkout Experience
Click the Settings button on your Popup Storefront. This directs you to the checkout configuration page.
In the Checkout Experience section, configure the information that you would like FastSpring to display to customers at checkout, and their customization capabilities:
- Show Shopping Cart – Select the True to enable the shopping cart page to appear directly on the Popup.
- Require email to start the order – Select the checkbox to require customers to enter their email address prior to entering payment information. This allows you to send emails if they abandon the checkout.
- Country and Language Selector – Select whether or not the Country and Language Selector is visible and adjustable to your customers at checkout. This automatically localizes the language and currency displayed on the storefront depending on the customer’s IP address.
- Show ‘Enter VAT ID’ – Select True to display the Enter VAT ID link next to the VAT amount in the Popup Storefront. The link only appears to customers located in countries with VAT, GST, or similar taxes. Then, FastSpring removes taxes from their total.
- Show Norton Secured Seal – Select True to display the Norton Secured seal below the popup storefront window.
In the Promotion section, you can enable customers to enter coupon codes (that you configure) at checkout in order to receive discounts.
- Show ‘Promotional Code’ field – Select Show to display a promotional code field in the popup storefront
- ‘Promotional Code’ display type – Select the desired behavior for the Promotional Code field:
- Display coupon fields right away – The Promotional Code field appears automatically.
- Display ‘Enter Coupon Code’ link which exposes coupon field when clicked – By default, consumers can click Enter Promotional Code to expose the field and apply their coupon.
In the Customer Information section, configure the information that you would like to collect from customers at checkout.
- Newsletter Subscription Checkbox – Select whether or not you would like to display a checkbox labeled “Get free updates about our products and offerings” below the email field, and whether or not it is selected by default. If selected, FastSpring sends updates via the mailingListEntry.updated webhook event.
- ‘Company’ field – Select whether you would like to enable a field that captures your customers’ associated company name, and whether or not that field is required in order to complete the purchase.
- Force physical address collection on all orders – Select this checkbox to require customers to enter their billing address when placing an order.
- Force phone number collection – Select this checkbox to require customers to enter their phone number when placing an order.
- Auto/Manual subscription renewal – Control whether or not customers can opt out of automatic subscription renewals, resulting in subscriptions with manual renewals.
- Do not allow customers to opt out from saving payment details – FastSpring saves the payment details and automatically processes applicable rebills.
- Allow, Opt-Out – Consumers can clear a selected checkbox to opt out of automatic renewals when a subscription is in the cart. Otherwise, FastSpring saves the payment details and processes automatic subscription rebills.
- Allow, Opt-In – When a non-managed subscription is in the cart, consumers can select a checkbox to opt in to automatic renewals. Otherwise, FastSpring does not save the payment details, and customers must process any subscription rebill transactions manually via Account Management.
After a customer completes a successful purchase, the Completion Page appears, containing display options that you configure.
- Adjust popup window size based on contents – Selecting this checkbox allows the popup storefront to automatically resize to include all applicable content, including products, licenses, and post-order instructions.
- Enable products on completion page – Select this checkbox to display purchased products on the completion page, following a successful purchase.
- Enable licenses on completion page – Select this checkbox to display licences for the purchased products on the completion page.
If enabled in your Storefront, FastSpring can send fulfillments to recipients who did not purchase the product.
- Enable Gift Purchases – Allow customers to make purchases on behalf of someone else. Gift Purchases do not support subscriptions at this time.
- Allow Separate Billing Contact –
Customize the Styling of your Popup Storefront
In the Styling section of the Popup Storefront Settings page, you can adjust the appearance of the Storefront to match your website.
The Checkout Title is the heading of the Popup Storefront. You can configure this to include your company’s logo and branding styles.
- Checkout Logo and Title – Control which images and text appear at the top of the Popup Storefront.
- Show the predefined logo and first product’s display name – Your logo, and the product’s display name appear at the top of the storefront.
- Show the first product’s icon and display name – The product icon that the customer selected and its display name are displayed at the top of the storefront.
- Show the predefined logo and checkout title – Your logo and Checkout Title display at the top of the storefront.
- Show the predefined logo only – Only your logo appears at the top of the storefront.
- Do not show a logo or checkout title – No logo or product title is displayed in the storefront, providing a condensed format.
- Checkout title – Enter a title that appears below your logo, as configured in the Checkout Logo and Title field. Click the drop-down to enter the title in additional languages.
- Logo for Retina screens – If you plan to display a logo on the storefront, select Choose File to select a file that appears in the header of the Popup. FastSpring automatically adjusts the logo file for regular and low-resolution screens.
- Logo placement – If you plan to display a logo on the storefront, select where you would like to place the logo:
- Place the logo inside the popup – (left image) The logo appears in the popup dialog, below the header background area.
- Place the logo overlapping the popup and the area over it – (right image) The logo appears above the popup, overlapping it with the header background behind the logo image.
- Header Background Color – By default, the header is the same background color as the rest of the storefront. Click the selector to choose a different background color.
- Checkout title color – Select or enter the color of the checkout title text on the Popup Storefront. If you enter the RGB value, click Choose to submit your choice.
- Checkout font size – Select the size (in pixels) of the font for the checkout title.
- Checkout title font weight – Click the dropdown and select Bold to bolden the checkout title.
- Tax Text Color – Select or enter the color of the text that is displayed when product prices have applicable taxes included.
- Price line color – Select or enter the color for the price line in the Popup Storefront. If you enter the RGB value, click Choose to submit your choice.
- Price line font size – Select the size (in pixels) of the price line text.
- Price line font weight – Click the drop-down to change the font weight to Normal or Bold.
- Color of the payment button – Enter the main color of the payment button.
- Payment button text color – Enter the main text color on the payment button.
- Color of the payment button on hover – Enter the color to which the button changes when a customer hovers their cursor over it.
- Payment button text color on hover – Enter the color to which the text on the payment button changes when a customer hovers their cursor over it.
In the Corner Radius fields, you can customize the roundness of the panels and buttons on your storefront. Selecting 0px results in square corners; higher pixels cause more rounded corners.
- Window – Select the corner radius for the Popup Storefront window.
- Buttons – Select the corner radius for the buttons in the Popup Storefront window.
Margin + Order Total, Tax and Savings
Specify pixel measurements to customize margin heights in your Popup Storefront. Selecting higher values results in larger margins.
- Checkout title top margin – Select the amount of space to appear above the checkout title.
- Checkout title bottom margin – Select the amount of space to appear below the checkout title.
- Order pricing line bottom margin – Select the amount of space to appear below the price of the product.
- Order pricing whole block bottom margin – Select the size of the margin to appear below the order pricing fields, including the optional Promotional Code field.
Completion Page: Download Button
- Color of the ‘Download’ button – Click the drop-down to enter the main color of the Download Now button on the Completion Page.
- Color of the ‘Download’ button text – Click the drop-down to enter the color of the ‘Download Now’ text.
- Color of the ‘Download’ button on hover – Enter the color to which the Download Now button changes when a consumer hovers their cursor over it.<>
- Color of the ‘Download’ button text on hover – Enter the color to which the ‘Download Now’ text changes when a consumer hovers their cursor over the button.
Completion Page: Continue Button
- Color of the ‘Continue’ button – Enter the main color of the Continue button.
- Color of the ‘Continue’ button text – Enter color of the ‘Continue’ text.
- Color of the ‘Continue’ button on hover – Enter the color to which the Continue button changes when a consumer hovers their cursor over it.
- Color of the ‘Continue’ button text on hover – Enter the color to which the ‘Continue’ text changes when a consumer hovers their cursor over the button.
Completion Page: Checkmark Color
- Color of the successful order check mark on the completion page – Select or enter the color for the check mark that appears at the top of the Completion Page, indicating a successful order.
In the Analytics Integration subpage of Popup Storefront Settings, you can configure optional integrations with Google Analytics and Google Tag Manager. By default, your Popup uses the settings configured in the Integrations menu, however you can override these settings for a specific storefront.
- Google Analytics Integration Behavior – Select whether you would like to integrate Google Analytics in this storefront. If you select Use custom Google Analytics property ID, enter a custom property ID in the field below. By default, the storefront uses the settings configured in the Integrations menu.
- Google Tag Manager Integration Behavior – Select whether you would like to integrate Google Tag Manager in this storefront. If you select Use custom Google Tag Manager container ID, enter a custom property ID in the field below. By default, the storefront uses the settings configured in the Integrations menu.
In the PayPal subpage, you can control the logo and store title displayed in the PayPal login window when a customer completes their purchase with PayPal.
- Checkout Brand Logo – Click Choose File to select a file to appear at the top of the PayPal login window, as shown in the illustration below.
- Checkout Brand Title – Optionally enter the brand title that appears in the ‘Cancel and return’ link on the PayPal login window. Click the drop-down selector for the to enter the brand title in each supported language.