Collapse Menu
Docs Home
Extensibility Options
Contact Support

Customizing the Look and Feel of a Popup Storefront

Overview

This article describes how to customize the appearance and functionality of a Popup Storefront via the Storefront's Settings command.

You can customize the look and feel of a Popup Storefront by clicking the Storefronts menu in the FastSpring App, and then selecting the Popup Storefronts tab. Then, click the Settings command for the Popup Storefront you want to customize.

 

 Tip

In addition to customizing the look and feel of your Popup Storefront, you can also customize customer-facing email messages and add your logo to customer-facing invoices.

 

Previewing 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.

 Important

The preview popup simulates all of the settings of the selected Storefront so that you can see the effects live as you are making changes.

The preview always uses a fictitious, subscription-based example product priced at USD 14.95 monthly.

It is essential to understand that the preview does not represent the pricing of any actual product in your Store. The example product does not actually exist in your account and appears for illustration purposes only.

 

Illustration of a Popup Storefront

The following illustration, and the accompanying legend below, may help you determine which page of the settings menu you need to access for some of the commonly-modified parts of a Popup Storefront. Be sure to click  at the top right-hand corner of the page after making changes in any of the following pages.

Legend - Click any link below to jump to the corresponding section of this document.

1,3Checkout
2, 4-5Styling
 Analytics Integration
 PayPal

 

Checkout

The Checkout page contains many options that let you control your customers' experience.

  • Show Shopping Cart - By default, this checkbox is not selected. If you select this checkbox, customers a shopping cart page can appear directly in the popup. For more information, see About the Popup Storefront Cart.
  • Require email to start the order - By default, this checkbox is not selected. If you select this checkbox, customers are required to enter an email address in a separate window before the window that contains the payment information fields, as illustrated below. The goal of collecting the customer's email address at this stage is to allow re-marketing in case the purchaser ultimately exits the Popup Storefront without completing a purchase. However, requiring customers to enter their email addresses before the checkout may induce some customers to abandon the page without purchasing.


     
  • Country and Language selector - Click the drop-down and select the desired behavior for the Country and Language selector.
    • Show Country/Language selector - This is the default value. This option lets customers see and change the Country and Language selector.
    • Show, but lock Country/Language selector - If you select this option, purchasers can see the Country and Language selector, but not change it. The country and language are selected automatically based on the customer's location (from their IP address) or using override settings available via the More menu for this Storefront on the list of Popup Storefronts.
    • Hide Country/Language selector - If you select this option, the Country and Language selector is not displayed at all. The country and language are selected automatically based on the customer's location (from their IP address) or using override settings available via the More menu for this Storefront on the list of Popup Storefronts.


  • Show 'Enter VAT ID' - If you select the True checkbox, the Enter VAT ID link appears next to the VAT amount in the Popup Storefront. The link only appears to customers located in countries with VAT, GST, or similar taxes. Clicking the link opens a popup window allowing the purchasers to enter their tax IDs. If you do not select this checkbox, the link does not appear, and purchasers who are exempt from VAT or GST are not able to enter a tax ID and avoid paying the taxes.

          
     
  • Show Norton Secured Seal - If you select the True checkbox, the Norton Secured seal appears below the lower left-hand corner of the Popup Storefront window, as shown below. If the True checkbox is not selected, the Norton Secured seal does not appear.


     

  • Show 'Promotional Code' field - The Show checkbox is selected by default. If you uncheck this checkbox, the Promotional Code field for coupon codes does not appear at all in the Popup Storefront.
  • 'Promotional Code' display type - Click the drop-down and select the desired behavior for the Promotional Code field.
     
    • Display coupon fields right away - When this option is selected, the field appears immediately, and customers can enter a coupon code without having to click the Enter Promotional Code link.
    • Display 'Enter Coupon Code' link which exposes coupon field when clicked - This is the default setting. When this is selected, customers must click the Enter Promotional Code link (illustrated below) to expose the Promotional Code field. Only then can a coupon code can be entered and applied.


       

  • Newsletter Subscription Checkbox - Click the drop-down and select an option to cho\ose how the optional newsletter checkbox (labeled Get free updates about our products and offerings and appearing below the Email field) behaves.
     
    • Show, Checked - This the default value. When this option is selected, the optional newsletter checkbox appears in the Popup Storefront. It is selected by default, which--unless the customer clears the checkbox--results in FastSpring sending a 'subscribed' value for the email address in the optional mailingListEntry.updated server webhook event.
       

       Note

      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 - When this option is selected, the optional newsletter checkbox appears in the Popup Storefront, but it is not selected by default.
    • Hide - When this option is selected, the optional newsletter checkbox does not appear at all in the Popup Storefront. In this case, FastSpring does not send mailingListEntry.updated webhook events for new orders.

       
  • 'Company' field - Click the drop-down and choose whether or not the optional Company field appears in the Popup Storefront, and whether or not it customers are required to complete that field. The following image is an example of the Company field.



     
    • Disable company field - This is the default value. When this option is selected, the Company field does not appear at all in the Popup Storefront.
    • Enable company field - When this option is selected, the Company field appears in the Popup Storefront. However, customers may choose to leave the field blank.
    • Enable company field and make it required - When this option is selected, the Company field appears in the Popup Storefront. Customers must enter something in that field to place an order.

       
  • Force physical address collection on all orders - By default, this checkbox is not selected. Selecting this checkbox forces customers to enter their full physical shipping addresses as part of the order process. The Storefront requires the full address even when the order does not include physical products to be shipped. The image below illustrates the appearance of the physical address. (Yellow highlights have been added to the image for illustrative purposes.)


     
  • Force phone number collection - By default, this checkbox is not selected. Selecting this checkbox forces customers to enter their telephone numbers as part of the order process.
  • Auto/Manual subscription renewal - This field controls whether or not customers can choose to opt out of automatic subscription renewals, resulting in subscriptions with a manual renewal policy. Note:  For more information about manual subscription renewals, please see Manual Renewal Subscriptions.
     
    • Do not allow customers to opt out from saving payment details - This option is selected by default. When a subscription is purchased, FastSpring always saves the payment details (using a secure payment token) and always processes any subscription rebill transactions automatically.
    • Allow, Opt-Out (details are saved by default, customers can opt out during the purchase) - When this option is selected, customers can select a checkbox to opt out of automatic renewals. The checkbox only appears when a non-managed subscription product is in the cart, and it is selected by default. Customers who want to opt out must clear the checkbox. If the customer does not clear the checkbox, FastSpring will save the payment details using a secure payment token and will process any subscription rebill transactions automatically.
    • Allow, Opt-In (details are not saved by default, customers can opt in during the purchase) - When this option is selected, customers can select a checkbox to opt in to automatic renewals. The checkbox only appears when a non-managed subscription product is in the cart; it is not selected by default. Customers who want to opt in must select the checkbox. If the checkbox is not selected, FastSpring does not save the payment details, and customers must process any subscription rebill transactions manually via Account Management.

 

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 - By default, this checkbox is not selected. Selecting this checkbox causes the width of the popup dialog to adjust to accommodate the content automatically. If your orders may contain multiple items with multiple licenses or lengthy Post Order Instructions, you may want to select this checkbox. The first image below, on the left, shows a partial example the Completion Page for an order of a product with lengthy Post Order Instructions and this checkbox not selected. The second example image, on the right, shows the Completion Page for an order with the same product, but with this checkbox selected.

       
     
  • Enable products on completion page - By default, this checkbox is selected, and 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, this checkbox is selected, and any 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.

    The following image illustrates a Completion Page that lists the products purchased and the licenses.

 

The Gift Purchases page contains a checkbox that lets you control whether or not gift purchases are available on the Storefront.

If you want customers to be able to make gift purchases, select the Yes checkbox. If you do not want gift purchases to be allowed on the Storefront, clear the checkbox instead.


back to list
 

 

Styling

The Styling page contains settings that let you control the appearance of the Popup Storefront.

  
  • Checkout Logo and Title - Click the drop-down and select an option to control the heading of the Popup Storefront.
     
    • Show the predefined logo and first product's display name - This is the default value. This option causes the logo image specified below and the display name of the first product in the cart to appear at the top of the Popup Storefront.
    • Show the first product's icon and display name - Selecting this option causes 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 defined below.


       
    • Show the predefined logo and checkout title - Selecting this option causes the logo and Checkout title specified below to appear at the top of the Popup Storefront. With this option selected, no product information appears in the Popup Storefront.
    • Show the predefined logo only - Selecting this option causes only the logo specified below to appear at the top of the Popup Storefront. No title text appears; not even any value entered in the Checkout title field below.
    • 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 can appear at the top of the Popup Storefront just under the logo, depending on the option selected in the Checkout logo and title field above. If your Popup Storefront includes more than one language, you can click the drop-down selector for the language code and enter the title in each language. This field is blank by default.
  • Logo for Retina screens - Click Choose File and browse your local network or computer for a logo image file. The image you select appears in the header when a customer views the Popup Storefront on a high-resolution display. The logo specified here does not appear if the option to display the first product's icon is selected in the Checkout logo and title field above. In case you need to remove a logo image from this field altogether, select the Remove checkbox. The logo will be removed when you save your change. No logo image is specified here by default.
  • Logo for regular screens - Optionally, click Choose File and browse your local network or computer for a logo image file. The image you select appears in the header when a customer who does not have a high-resolution display views the Popup Storefront. If you have selected an image file in the Logo for Retina screens field above, you may choose to leave this field blank. In that case, the Store automatically scales the specified logo file for use on lower-resolution displays. The logo specified here does not appear in the Popup Storefront if the option to display the first product's icon is selected in the Checkout logo and title field above. In case you need to remove a logo image from this field altogether, select the Remove checkbox, and the logo will be removed when you save your change. No logo image is specified here by default.
  • Logo placement - Click the drop-down and select the desired placement for the image selected above.
     
    • Place the logo inside the popup - The logo appears as part of the popup dialog, below the header background area, as shown here:


       
    • Place the logo overlapping the popup and the area over it - The logo appears above the popup, partially overlapping it with the header background behind the logo image, as shown here:


       
  • Header Background Color - The header section of the Popup Storefront is a horizontal section at the top of the popup window, which contains the logo, the optional cart button, and the X button to close the popup. By default, the header section has the same background color as the rest of the popup window. You can click the color selector in this field and choose a different background color for the header. The default value is blank (no color).

 

  • Checkout title color - Click the drop-down and select or enter the color for the checkout title font 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). See the example image illustrating the checkout title below.
  • Checkout font size - Click the drop-down and 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 (not bold). If you want the checkout title to use bold text, click the drop-down and select Bold.

  • Tax Text Color - Click the drop-down and select or enter the color for 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).

  • Price line color - Click the drop-down and 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). See the example image illustrating the price line below.
  • Price line font size - Click the drop-down and 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.


     

  • Color of the payment button - Click the drop-down and select or enter the main color for the payment button. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(243, 128, 39). See the example image illustrating the payment button below.
  • Payment button text color - Click the drop-down and select or enter the main color for the text label on the payment button (e.g., "Pay $69.95"). If you enter the RGB value, click Choose to submit your choice. The default value is rgb(255, 255, 255) (pure white).
  • Color of the payment button on hover - Click the drop-down and select or enter the color used by the payment button when a customer hovers the mouse cursor over the button. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(200, 102, 26).
  • Payment button text color on hover - Click the drop-down and select or enter the color used by the text label on the payment button when a customer hovers the mouse cursor over the button. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(255, 255, 255) (pure white). Since that is the same value as the Payment button text color, by default, the text does not change color when the mouse cursor hovers over the button.


The Corner Radius section lets you control the roundness of the panels and buttons.

  • Window - Click the drop-down and 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 - Click the drop-down and 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.

    The image below illustrates a Popup Storefront with the Window set to a corner radius of 0px (square corners), the Buttons set to a corner radius of 25px (very round corners), and the color blue (rgb(0, 0, 255)) set as the Header Background Color.

 

The Margin section and the Order Total, Tax and Savings section contain additional styling options:


 

  • Checkout title top margin - Click the drop-down and select the top margin (in pixels) that you want to appear above the checkout title. The default value is 10px; selecting a higher value results in a larger margin above the checkout title.
  • Checkout title bottom margin - Click the drop-down and select the bottom margin (in pixels) that you want to appear below the checkout title. The default value is 5px; selecting a higher value results in a larger margin below the checkout title.

    The following image illustrates a Popup Storefront with the Checkout title top margin and Checkout title bottom margin each set to 10px; notice the highlighted space above and below the product name Example Product 1.


     
  • Order pricing line bottom margin - Click the drop-down and select the bottom margin (in pixels) that you want to appear below the order pricing line. The default value is 5px; selecting a higher value results in a larger margin below the order pricing line.

    The following image illustrates a Popup Storefront with the Order pricing line bottom margin set to 25px. Notice the extra space below the example order total line Total: $10.00.


     
  • Order pricing whole block bottom margin - Click the drop-down and select the size of the margin (in pixels) that you want to appear below the entire block of order pricing fields, including the optional Promotional Code field. The default value is 5px; selecting a higher value results in a larger margin below the order pricing block.

    The following image illustrates a Popup Storefront with the Order pricing whole block bottom margin set to 25px. Notice the extra space that appears below the order pricing block (in this case, below the optional Enter Promotional Code link).


     
 

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. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(66, 139, 202). See the example image illustrating the Download Now button below.
  • 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. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(255, 255, 255) (pure white).
  • Color of the 'Download' button on hover - Click the drop-down and select or enter the color used by the Download Now button when a customer hovers the mouse cursor over the button. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(53, 126, 189).
  • Color of the 'Download' button text on hover - Click the drop-down and select or enter the color used by the text label on the Download Now button when a customer hovers the mouse cursor over the button. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(255, 255, 255) (pure white). Since that is the same value as the Color of the 'Download' button text, by default, the text color does not change when the mouse cursor hovers over the button.


     

  • Color of the 'Continue' button - Click the drop-down and select or enter the main color for the Continue button near the bottom of the Completion Page. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(92, 184, 92). See the example image illustrating the Continue button below.
  • Color of the 'Continue' button text - Click the drop-down and select or enter the main color for the text label on the Continue button. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(255, 255, 255) (pure white).
  • Color of the 'Continue' button on hover - Click the drop-down and select or enter the color used by the Continue button when a customer hovers the mouse cursor over the button. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(76, 174, 76).
  • Color of the 'Continue' button text on hover - Click the drop-down and select or enter the color used by the text label on the Continue button when a customer hovers the mouse cursor over the button. If you enter the RGB value, click Choose to submit your choice. 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.


     

  • Color of the successful order check mark on the completion page - Click the drop-down and select or enter the color for the check mark that appears at the top of the Completion Page, indicating a successful order. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(0, 128, 0). The following image illustrates the check mark.


     

back to list
 

 

Analytics Integration

The Analytics Integration page contains options that let you 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 - There are three options available in this field:
     
    • Use default Google Analytics property ID from integration settings - This is the default value. When this option is selected, 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 - If you select this option, the Popup Storefront uses the Google Analytics property ID specified in the field directly below.
    • Do not enable Google Analytics for this Storefront - If you select this option, the Popup Storefront does not use Google Analytics integration at all.

     
  • Custom Google Analytics property ID for this Storefront - Optionally, enter a custom Google Analytics property ID. This ID only applies if you have selected Use custom Google Analytics property ID for this Storefront above.
  • Google Tag Manager Integration Behavior - There are three options available in this field:
     
    • Use default Google Tag Manager container ID from integration settings - This is the default value. When this option is selected, 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 - If you select this option, 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 - If you select this option, the Popup Storefront does not use Google Tag Manager integration at all.

     
  • Google Tag Manager custom container ID for this Storefront - Optionally enter a custom Google Tag Manager container ID. This ID only applies if Use custom Google Tag Manager container ID for this Storefront is selected above.

back to list
 

 

PayPal

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

  • Checkout Brand Logo - Click Choose File to browse your network or your local computer for a logo image file to appear at the top of the PayPal logon window, as shown in the illustration below. By default, this field is empty; no logo image appears at the top of the window.
  • Checkout Brand Title - Optionally enter the brand title that appears in the 'Cancel and return' link on the PayPal logon window, as shown in the illustration below. If your Popup Storefront includes more than one language, you can click the drop-down selector for the language code and enter the brand title in each language.


     

back to list
 

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.