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.

Overview

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

 

User-added image
User-added image

 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.
 

User-added image

 Important

The preview popup will simulate 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.

Although you can configure the Popup Storefront to display your company or Store logo at the top rather than a product icon, even when your logo is shown in the preview, it is important to understand that the preview does not represent the pricing of any actual product in your Store or assigned to the selected Popup Storefront. The example product does not actually exist in your account and is used for illustration purposes only.

Illustration of a Popup Storefront

The following illustration, and the accompanying legend below, may help you determine which of the settings menus you need to access for some of the commonly-modified parts of a Web 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.

1General Settings
2Checkout
3Promotions
4Margins and Paddings
5Colors and Styling
 Completion Page
 Analytics Integration
 Gift Purchases
 PayPal

 

General Settings

The General Settings page contains options that let you control whether or not the purchaser must enter an e-mail address prior to the appearance of the payment information fields, as well as whether or not the popup cart will be available.

  • Show Shopping Cart - By default, this check box is not selected. If you select this check box, customers will be able to view a mini shopping cart directly in the popup. For more information, see About the Popup Storefront Cart .
  • Require email to start the order - By default, this check box is not selected. If you select this check box, customers will be required to enter an e-mail address in a separate window prior to the window that contains the payment information fields, as illustrated below. The benefit of selecting this check box is that the purchaser's e-mail address can be collected and used for re-marketing in case the purchaser ultimately exits the Popup Storefront without completing a purchase.

    User-added image
  • Country and Language selector - Click the drop-down and select the desired behavior for the Country and Language selector.
    • Show Country/Language selector - This value is selected by default. This option lets customers see and change the Country and Language selector.
    • Show, but lock Country/Language selector - If you select this option, purchasers will be able to see the Country and Language selector, but not change it. The country and language will be 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 will not be displayed at all. The country and language will be 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.


User-added image

  • Show 'Enter VAT ID' - If you select the True check box, purchasers whose country is in the EU will see the Enter VAT ID link next to the VAT amount in the Popup Storefront. Clicking the link will open a popup window allowing the purchasers to enter their VAT IDs. If you do not select this check box, that link will not be shown, and purchasers in the EU will be unable to enter a VAT ID  and avoid paying VAT.

     User-added image   
  • Show Norton Secured Seal - If you select the True check box, the Norton Secured seal will be displayed below the lower left-hand corner of the Popup Storefront window, as shown below. If the True check box is not selected, the Norton Secured seal will not be displayed.

back to list
 

Checkout

The Checkout page contains options that let you control the behavior of the optional newsletter check box and the optional Company field, as well as the logo and title that will be displayed at the top of the Popup Storefront.

 

  • Newsletter Subscription Checkbox - Click the drop-down and select an option to choose how the optional newsletter check box (labeled Get free updates about our products and offerings and appearing below the Email field) will behave.
    • Show, Checked - This the default value. When this option is selected, the optional newsletter check box will be displayed in the Popup Storefront. It will be selected by default, which unless the customer clears the check box will result in a 'subscribed' value being sent for the optional mailingListEntry.updated server webhook.

       Note

        For customers in areas covered by the GDPR, the check box 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 check box  will be displayed in the Popup Storefront, but it will not be selected by default.
      • Hide - When this option is selected, the optional newsletter check box will not be displayed at all in the Popup Storefront.
    • 'Company' field - Click the drop-down and select an option to choose whether or not the optional Company field will be included in the Popup Storefront, and whether or not it will be a required field. The following image is an example of the Company field being included.

      User-added image
      • Disable company field - This is the default value. When this option is selected, the Company field will not be displayed at all in the Popup Storefront.
      • Enable company field - When this option is selected, the Company field will be displayed in the Popup Storefront, but purchasers will not be required to enter anything in the field.
      • Enable company field and make it required - When this option is selected,  the Company field will be displayed in the Popup Storefront, and purchasers will be required to enter something in that field in order to proceed with a purchase.
    • Force physical address collection on all orders - By default, this check box is not selected. Selecting this check box will cause purchasers to be required to enter their full physical shipping address as part of the order process, even when the purchase does not include physical products to be shipped. The image below illustrates how the physical address fields will appear (but without the yellow highlights).

    • Force phone number collection - By default, this check box is not selected. Selecting this check box will cause purchasers to be required to enter their telephone number 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.

       

      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, payment details will always be saved (using a secure payment token) and any renewals will always be automatic.
      • Allow, Opt-Out (details are saved by default, customers can opt out during the purchase) - When this option is selected, the presence of any non-managed subscription in the cart will cause a check box to be displayed whereby customers opt out of automatic renewals. The check box will be selected by default, and customers who want to opt out must clear the check box. If the check box is not cleared, customers' payment details will be saved using a secure payment token and any renewals will always be automatic.
      • Allow, Opt-In (details are not saved by default, customers can opt in during the purchase) - When this option is selected, the presence of any non-managed subscription in the the cart will cause a check box to be displayed whereby customers can opt in to automatic renewals. The check box will not be selected by default, and customers who want to opt in must select the check box. If the check box is not selected, customers' payment details will not be saved, and any renewals will always be manual.

         

    User-added image

    • 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. When this option is selected, the logo image specified below and the display name of the first product in the cart will be shown at the top of the Popup Storefront.
      • Show the first product's icon and display name - Selecting this option will cause the icon and display name of the first product in the cart to be rendered 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 will cause the logo and Checkout title specified below to be displayed at the top of the Popup Storefront, without any product information being displayed.
      • Show the predefined logo only - Selecting this option will cause only the logo specified below to be displayed at the top of the Popup Storefront. No title text will be displayed; not even any value entered in the Checkout title field below.
      • Do not show a logo or checkout title - Selecting this option will prevent a logo image or product title from appearing, to provide a more condensed format.
    • Checkout title - Optionally enter a title that can be displayed 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, be sure to 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 to and select a logo file on your network or your local computer, to be included in the header when the Popup Storefront is viewed on a Retina display. The logo specified here will not be displayed 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 completely, select the Remove check box, and 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 to and select a logo file on your network or your local computer, to be included in the header when the Popup Storefront is viewed on any display that is not a Retina display. If you have specified a Logo for Retina screens above, you may choose to leave this field blank, and the specified logo file will be scaled for use on non-Retina displays. The logo specified here will not be displayed 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 completely, select the Remove check box, 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 in Checkout logo and title.
      • Place the logo inside the popup - The logo will appear 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 will appear above the popup, partially overlapping it with the header background behind the logo image, as shown here:

    back to list
     

    Promotions

    The Promotions page contains options that let you control the presence and behavior of the optional Promotional Code field, which purchasers can use to enter a pre-defined coupon code and receive a discount, on the Popup Storefront.

    User-added image

    • Show 'Promotional Code' field -  The Show check box is selected by default. If you uncheck this check box, the Promotional Code field for coupon codes will not be displayed 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, purchasers can enter a coupon code directly on the Popup Storefront, without having to first click the Enter Promotional Code link.
      • Display 'Enter Coupon Code' link which exposes coupon field when clicked - This option is selected by default. when this is selected, purchasers must click the Enter Promotional Code link (illustrated below) in order to expose the Promotional Code field so that a coupon code can be entered and applied.

    back to list
     

    Margins and Paddings

    The Margins and Paddings page contains options that let you adjust the placement of the checkout title, order pricing lines, and the block containing order pricing information in the Popup Storefront.

    User-added image

    • Checkout title top margin - Click the drop-down and select the top margin (in pixels) that will be rendered above the checkout title. The default value is 10px; selecting a larger value will result in a larger margin above the checkout title.
    • Checkout title bottom margin - Click the drop-down and select the bottom margin (in pixels) that will be rendered below the checkout title. The default value is 5px; selecting a larger value will result 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 25px; notice the extra space above and below the example title Sudden Impact Checkout.

       
    • Order pricing line bottom margin - Click the drop-down and select the bottom margin (in pixels) that will be rendered below the order pricing line. The default value is 5px; selecting a larger value will result 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 Your total is $69.95.

      User-added image 
    • Order pricing whole block bottom margin - Click the drop-down and select the size of the margin (in pixels) that will be rendered below the entire block of order pricing fields, including the optional Promotional Code field. The default value is 5px; selecting a larger value will result 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 Promotional Code field).

       

    back to list

    Colors and Styling

    The Colors and Styling page contains options that let you control the roundness of the panels and buttons, as well as the background colors of certain sections and the colors of the buttons in the Popup Storefront.

    User-added image

    • Window - Click the drop-down and select the corner radius for the Popup Storefront window. The default value is 6px; selecting a larger value will result in rounder corners. Selecting 0px will result 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 larger value will result in rounder corners. Selecting 0px will result in square corners.
    • Header Background Color - Click the drop-down and select or enter the color that will be used for the background of the header section, as illustrated in the image below. If you enter the RGB value, click Choose to submit your choice. By default, no color is specified, which will result in a transparent background for the header section.

      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 yellow (rgb(255, 255, 0)) set as the Header Background Color.

    User-added image

    • Checkout title color - Click the drop-down and select or enter the color that will be used 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 that will be used for the checkout title. The default value is 20px.
    • Checkout title font weight - By default, the checkout title will use a normal font (not bold). If you want the checkout title to use bold text, click the drop-down and select Bold.

    User-added image

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

    User-added image

    • Price line color - Click the drop-down and select or enter the color that will be used 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 that will be used for the price line. The default value is 18px.
    • Price line font weight - By default, the price line will use bold text. If you do not want the price line to be bold, click the drop-down and select Normal.

    User-added image

    • Color for the 'Other Methods' link - Click the drop-down and select or enter the main color that will be used for the Other Methods methods link that appears below the pricing block on the right-hand side of the Popup Storefront. 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 Other Methods link below.
    • Color for the 'Other Methods' link on hover - Click the drop-down and select or enter the color that will be used for the Other Methods link while a purchaser hovers the mouse cursor over the link. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(200, 102, 26).

      User-added image

    User-added image

    • Color of the payment button - Click the drop-down and select or enter the main color that will be used 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 that will be used 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 that will be used for the payment button while a purchaser 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 that will be used for the text label on the payment button while a purchaser 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), and since that is the same value as the Payment button text color, by default, the text will not change color while the mouse cursor hovers over the button.

      User-added image

    User-added image

    • Color of the 'Download' button - Click the drop-down and select or enter the main color that will be used 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 button below.
    • Color of the 'Download' button text - Click the drop-down and select or enter the main color that will be used 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 that will be used for the Download Now button while a purchaser 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 that will be used for the text label on the Download Now button while a purchaser 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), and since that is the same value as the Color of the 'Download' button text, by default, the text color will not change while the mouse cursor hovers over the button.

      User-added image

    User-added image

    • Color of the 'Continue' button - Click the drop-down and select or enter the main color that will be used 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 that will be used 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 that will be used for the Continue button while a purchaser 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 that will be used for the text label on the Continue button while a purchaser 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), and since that is the same value as the Color of the 'Continue' button text, by default, the text color will not change while the mouse cursor hovers over the button.

      User-added image

    User-added image

    • Color of the successful order check mark on the completion page - Click the drop-down and select or enter the color that will be used 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.

      User-added image

    back to list
     

    Completion Page

    The page labeled Completion Page contains options that apply to the Completion Page that is displayed following completion of a successful purchase.

    User-added image

    • Adjust popup window size based on contents -  By default, this check box is not selected. If your orders may contain multiple items with multiple licenses or lengthy Post Order Instructions, you can select this check box and the width of the popup dialog will automatically adjust to accommodate the content. 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 check box not selected. The second example image, on the right, shows the Completion Page for an order with the same product, but with this check box selected.

      User-added image     User-added image

       
    • Enable products on completion page - By default, this check box is selected and the purchased products will be listed on the Completion Page. If you do not want the products to be listed on the Completion Page, clear this check box.
    • Enable licenses on completion page - By default, this check box is selected and any licenses for the purchased products will be listed on the Completion Page. If you do not want licenses to be listed on the Completion Page, clear this check box.
    • The following image illustrates a Completion Page that lists the products purchased and the licenses.

      User-added image

    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, over override those values for this specific Popup Storefront here.

    User-added image

    • 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 will use the Google Analytics property ID configured under Integrations > ExtensionsGoogle Analytics > SETUP.
      • Use custom Google Analytics property ID for this storefront - If you select this option, the Popup Storefront will use 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 will not use Google Analytics integration at all.
    • Custom Google Analytics property ID for this storefront - Optionally enter a custom Google Analytics property ID. This will only be used if Use custom Google Analytics property ID for this storefront is selected 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 will use the Google Tag Manager container ID configured under IntegrationsExtensions > Google Tag Manager > SETUP.
      • Use custom Google Tag Manager container ID for this storefront - If you select this option, the Popup Storefront will use 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 will 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 will only be used if Use custom Google Tag Manager container ID for this storefront is selected above.

    back to list

    Gift Purchases

    The Gift Purchases page appears only when gift purchases are enabled for your FastSpring Store.  It contains a check box that lets you control whether or not gift purchases will be available on the Storefront.

    User-added image

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


    PayPal

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

    User-added image

    • Checkout Brand Logo - Click Choose File and browse to and select an image file on your network or your local computer that will be used as the logo at the top of the PayPal logon window, as shown in the illustration below. By default, no image file is specified and no logo is displayed.
    • Checkout Brand Title - Optionally enter the brand title that will be used 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, be sure to click the drop-down selector for the language code and enter the brand title in each language.

      User-added image

    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.