Collapse Menu
Docs Home
Developer Tools
Contact Support

Customize Your Popup Storefront

Overview

Customize the appearance and functionality of a Popup Storefront.

To customize the look and feel of a Popup Storefront:

  1. In the FastSpring App, select Storefronts > Popup Storefronts.
  2. Click Settings for the Popup Storefront that you want to customize.

Checkout
Styling
Analytics Integration
PayPal
Preview Your Changes
After making changes to the Popup Storefront's settings, you can use the Preview command to see a current example of how your Storefront will look when implemented on a live website. This preview always uses a non-existent, $14.95 monthly subscription.

Checkout

Control the Checkout Experience, Promotions, Customer Information, Completion Page, and enablement of Gift Purchases.

  1. In the FastSpring App, go to Storefronts > Popup Storefronts, then click Settings on the Popup you want to edit.
  2. The Checkout subpage is selected by default.

Checkout Experience

  • Show Shopping Cart - Selecting this checkbox enables the shopping cart page to directly appear on the Popup. For more information, see Popup Storefront Cart.
  • Require email to start the order - If you select this checkbox, consumers are required to enter an email address in a separate window before they enter their payment information. This will allow you to remarket in case the consumer does not complete the purchase. 

  • Country and Language selector - Select how to display the Country and Language selector:
    • Show Country/Language selector - By default, consumers can see and change the Country and Language selector.
    • Show, but lock Country/Language selector - Allows consumers to see the Country and Language selector, but not change it. This is selected automatically based on their IP address, or by using override settings via the More menu on the Popup Storefront.
    • Hide Country/Language selector - The Country and Language selector is not displayed. They are selected automatically based on the consumer’s IP address, or by using override settings via the More menu on the Popup Storefront 
  • Show 'Enter VAT ID' - If you select True, the Enter VAT ID link appears next to the VAT amount in the Popup Storefront. The link only appears to consumers located in countries with VAT, GST, or similar taxes. When consumers click the link, a popup window appears with a field for their Tax ID. If you do not select this checkbox, exempt purchasers cannot enter a Tax ID to avoid taxes.

       
  • Show Norton Secured Seal -  If you select the True checkbox, the Norton Secured seal appears below the lower left corner of the Popup Storefront window.

Promotion

  • Show 'Promotional Code' field - Show the Promotional Code field for coupon codes 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. 

Customer Information

  • Newsletter Subscription Checkbox - Select how the optional newsletter checkbox behaves. This checkbox is labeled “Get free updates about our products and offerings” and appears below the email field.
    • Show, Checked - By default, the newsletter checkbox appears in the Popup Storefront. This results in FastSpring sending a 'subscribed' value for the email address in the optional mailingListEntry.updated server webhook event.
      For customers in areas covered by the GDPR, the checkbox is never selected by default, regardless of your selection here. This setting only affects customers in non-GDPR locations.
    • Show, Unchecked - The newsletter checkbox appears in the Popup Storefront, but it is not selected by default.
    • Hide - The newsletter checkbox does not appear at all in the Popup Storefront. FastSpring does not send mailingListEntry.updated webhook events for new orders.
  • 'Company' field - Choose whether or not to include the ‘Company’ field in the Popup, and whether or not it is required.
    • Disable company field -  By default, the Company field does not appear at all in the Popup Storefront.
    • Enable company field - The Company field appears in the Popup Storefront, but it is not required for purchase.
    • Enable company field and make it required - The Company field appears in the Popup Storefront, and consumers must fill it out to complete an order.
  • Force physical address collection on all orders -  Select this checkbox to require consumers to enter their full physical billing addresses when placing an order, whether the products are physical or digital.
  • Force phone number collection - Select this checkbox to require consumers to enter their phone numbers during the order process.
  • Auto/Manual subscription renewal - Control whether or not consumers can opt out of automatic subscription renewals, resulting in subscriptions with a manual renewal policy.
    • Do not allow customers to opt out from saving payment details - By default, FastSpring saves the payment details (using a secure payment token) and automatically processes applicable rebills. 
    • Allow, Opt-Out (details are saved by default, customers can opt out during the purchase) - Consumers can select a checkbox to opt out of automatic renewals when a non-managed subscription product is in the cart. Consumers must clear the checkbox to opt out. Otherwise, FastSpring saves the payment details and automatically processes subscription rebills.
    • Allow, Opt-In (details are not saved by default, customers can opt in during the purchase) - When a non-managed subscription is in the cart, consumers can select a checkbox to opt in to automatic renewals. If they choose not to select the checkbox, FastSpring does not save the payment details, and customers must process any subscription rebill transactions manually via Account Management.

Completion Page

The section labeled Completion Page contains options that apply to the Completion Page that appears following completion of a successful purchase.

  • Adjust popup window size based on contents - Select this checkbox to enable automatic adjustments of the popup dialog’s width to accommodate content. For example, if an order contains multiple items with licenses and post-order instructions, this will enlarge the popup to include all content. 
  • Enable products on completion page - By default, the purchased products are listed on the Completion Page. If you do not want the products to be listed on the Completion Page, clear this checkbox.
  • Enable licenses on completion page - By default, licenses for the purchased products are listed on the Completion Page. If you do not want licenses to appear on the Completion Page, clear this checkbox.

Purchaser Settings

Select the Enable Gift Purchases checkbox to enable Gift Purchases on your Storefront.

The Allow Separate Billing Contact check box is currently only functional for Sellers in our Beta program. Functionality and details will be made available to all Sellers soon.

Styling

To control the appearance of your Popup Storefront:

  1. In the FastSpring App, go to Storefronts > Popup Storefronts, then click Settings on the Popup you want to edit.
  2. On the left submenu, click Styling.

Checkout Title

  
  • Checkout Logo and Title - Control the heading of the Popup Storefront.
    • Show the predefined logo and first product's display name - By default, the logo image specified below and the display name of the first product in the cart appear at the top of the Popup Storefront.
    • Show the first product's icon and display name - The icon and display name of the first product in the cart to appear at the top of Popup Storefront, in place of the logo and Checkout Title.
    • Show the predefined logo and checkout title - The logo and Checkout Title to appear at the top of the Popup Storefront. Otherwise, no product information appears in the Popup Storefront.
    • Show the predefined logo only - Only the logo appears at the top of the Popup Storefront. No text or value from the Checkout Title appears.
    • Do not show a logo or checkout title - Selecting this option prevents a logo image or product title from appearing, to provide a more condensed format 
  • Checkout title - Optionally, enter a title that appears at the top of the Popup Storefront, under the logo. If your Storefront includes more than one language, click the drop-down to enter the title in each language. This field is blank by default.
  • Logo for Retina screens - Click Choose File to select a file that appears in the header of the Popup. The logo specified here may not appear depending on the Checkout Logo and Title options you select.
  • Logo for regular screens - Optionally, click Choose File to select an image that appears in the header when a consumer without high resolution display views the Popup Storefront. If you have selected an image file in the Logo for Retina screens field above, you may leave this field blank. The Store automatically scales the specified logo file for use on lower-resolution displays. 
    • The Logo for regular screens does not appear if the option to display the first product's icon is selected in the Checkout logo and title field above.
    • To remove a logo image from this field, select the Remove checkbox.
  • Logo placement - Select the desired placement for the image selected above.
    • 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 - The header of the popup (labeled above) contains the: logo, optional cart button, and the X to close the popup. By default, it is the same background color as the rest of the popup window. Click the color selector in this field to choose a different header background color. The default value is blank (no color).

Checkout Text

  • Checkout title color - Select or enter the color for the checkout title text on the Popup Storefront. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(0, 0, 0) (black).
  • Checkout font size - Select the size (in pixels) of the font for the checkout title. The default value is 20px.
  • Checkout title font weight - By default, the checkout title uses a standard font. To bolden the checkout title, click the drop-down and select Bold.

Tax Text

  • Tax Text Color - Select or enter the color of the text that is displayed when product prices have applicable taxes included (e.g., "Includes €8.67 VAT at 19%"). The default value is rgb(153, 153, 153).

Pricing Block

  • 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. The default value is rgb(169, 68, 66).
  • Price line font size - Select the size (in pixels) of the font for the price line. The default value is 18px.
  • Price line font weight - By default, the price line uses bold text. If you do not want the price line to be bold, click the drop-down and select Normal.

Payment Button

  • Color of the payment button - Select or enter the main color for the payment button.
  • Payment button text color - Select or enter the main color for the text label on the payment button (e.g., "Pay $69.95"). The default value is rgb(255, 255, 255) (pure white).
  • Color of the payment button on hover - Select or enter the color used by the payment button when a consumer hovers the mouse cursor over the button. 
  • Payment button text color on hover - Select or enter the color used by the text label on the payment button when a customer hovers the mouse cursor over the button. The default value is rgb(255, 255, 255) (pure white). Since that is the same value as the Payment button text color, the text does not change color when the mouse cursor hovers over the button.

Corner Radius

Control the roundness of the panels and buttons.

  • Window - Select the corner radius for the Popup Storefront window. The default value is 6px; selecting a higher value results in rounder corners. Selecting 0px results in square corners.
  • Buttons - Select the corner radius for the buttons in the Popup Storefront window. The default value is 4px; selecting a higher value results in rounder corners. Selecting 0px results in square corners.

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 (in pixels) to appear above the checkout title. The default value is 10px.
  • Checkout title bottom margin - Select the amount of space (in pixels) to appear below the checkout title. The default value is 5px.
  • Order pricing line bottom margin - Select the amount of space (in pixels) to appear below the order pricing line. The default value is 5px.
  • Order pricing whole block bottom margin - Select the size of the margin (in pixels) to appear below the entire block of order pricing fields, including the optional Promotional Code field. The default value is 5px.

Completion Page: Download Button 

The following sections control the styling of the completion page that appears following a successful purchase in your Popup Storefront.
  • Color of the 'Download' button - Click the drop-down and select or enter the main color for the Download Now button in the Completion Page. The default value is rgb(66, 139, 202).
  • Color of the 'Download' button text - Click the drop-down and select or enter the main color for the text label on the Download Now button. The default value is rgb(255, 255, 255) (pure white).
  • Color of the 'Download' button on hover - Select or enter the color of the Download Now button when a consumer hovers their cursor over it. The default value is rgb(53, 126, 189).
  • Color of the 'Download' button text on hover - Select or enter the color used by the text label on the Download Now button when a consumer hovers their cursor over the button.
    • The default value is rgb(255, 255, 255) (pure white). Since that is the same default value as the Color of the 'Download' button text, the text color does not change when the mouse cursor hovers over the button.

Completion Page: Continue Button

  • Color of the 'Continue' button - Select or enter the main color for the Continue button near the bottom of the Completion Page.
  • Color of the 'Continue' button text - Select or enter the main color of the text label on the Continue button.  The default value is rgb(255, 255, 255) (pure white).
  • Color of the 'Continue' button on hover - Select or enter the color used by the Continue button when a customer hovers the cursor over the button. The default value is rgb(76, 174, 76).
  • Color of the 'Continue' button text on hover - Select or enter the color used by the text label on the Continue button when a customer hovers the cursor over the button. 
    • The default value is rgb(255, 255, 255) (pure white). Since that is the same value as the Color of the 'Continue' button text, by default, the text color does not change when the mouse cursor hovers 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. The default value is rgb(0, 128, 0), illustrated above.

Analytics Integration

The Analytics Integration page contains options to configure optional integration with Google Analytics and Google Tag Manager. You can configure the Popup Storefront to use the default integration settings configured under the Integrations menu, or override those values for this specific Popup Storefront.

  • Google Analytics Integration Behavior - Select an option to enable Google Analytics Integration
    • Use default Google Analytics property ID from integration settings - By default, the Popup Storefront uses the Google Analytics property ID configured under Integrations > Extensions > Google Analytics > SETUP.
    • Use custom Google Analytics property ID for this Storefront - The Popup Storefront uses the Google Analytics property ID specified in the field directly below.
    • Do not enable Google Analytics for this Storefront - The Popup Storefront does not use Google Analytics integration at all.
  • Custom Google Analytics property ID for this Storefront - If you have selected Use custom Google Analytics property ID for this Storefront above, enter a custom Google Analytics property ID.
  • Google Tag Manager Integration Behavior - There are three options available in this field:
    • Use default Google Tag Manager container ID from integration settings - By default, the Popup Storefront uses the Google Tag Manager container ID configured under Integrations > Extensions > Google Tag Manager > SETUP.
    • Use custom Google Tag Manager container ID for this Storefront - The Popup Storefront uses the Google Tag Manager container ID specified in the field directly below.
    • Do not run Google Tag Manager for this Storefront - The Popup Storefront does not use Google Tag Manager integration at all. 
  • Google Tag Manager custom container ID for this Storefront - If Use custom Google Tag Manager container ID for this Storefront is selected, enter a custom Google Tag Manager container ID.

PayPal

The PayPal subpage contains options that let you control the logo and the store title used in the PayPal login window when a purchaser chooses to pay using PayPal.

  • Checkout Brand Logo -Click Choose File and select a logo image 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.

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.