Collapse Menu
Docs Home
Extensibility Options
Contact Support

Customizing Your Web Storefront

Overview

This article explains how you can customize the look and feel of a Web Storefront.

You can customize the look and feel of a Web Storefront by clicking the Storefronts menu; the Web Storefronts tab is the default tab. Click the Settings button for the Web Storefront you want to customize.

 

 Tip

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

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
2Header Settings
3Footer Settings
4Page Settings
5Products and Prices
6Homepage
 Buttons
 Completion Page
7Promotions
 Analytics Integration
 Gift Purchases
 PayPal

 

General Settings

The General Settings page contains some controls that affect all pages of the Web Storefront. Other settings let you control what customer information FastSpring collects during the purchase process.

  • Store Title - Enter the title that you want to appear as the caption for the browser tab or window. Optionally, click the language code selector and enter the title in additional languages if desired.
  • Favicon - Click Choose File and then browse your local computer or network and select an image file to be displayed next to the caption in the browser tab (as well as in the browser's address bar, where applicable). Favicon images are typically .png or .ico files.
  • Country and Language selector - Click the drop-down and select the desired behavior for the Country and Language selector that can appear towards the top right-hand corner of the Web Storefront.
     
    • Show Country/Language selector - This option lets customers see and change the Country and Language selector.
    • Show, but lock Country/Language selector - This option lets customers 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 a given Storefront on the list of Web 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 a given Storefront on the list of Web Storefronts.
       
  • Norton Security Seal - Click the drop-down and select whether or not the optional Norton Security seal is displayed on the Web Storefront, as well as the size of the seal if applicable.
  • Require email to start the order - If you select the True checkbox, customers visiting the Web Storefront must enter a valid email address before they can proceed. Your store retains the email address entered by the customer for the remainder of the checkout process. The purpose of this option is to allow you to re-market to customers who abandon the cart without purchasing. In the event of abandonment, a mailingListEntry.updated webhook event can be sent, showing the customer's email address as "recognized."


     
  • Show 'Enter VAT ID' - Customers in locations that have VAT, GST, or similar taxes (such as the EU) may be required to pay these taxes on the purchase amount. The Show 'Enter VAT ID' setting controls whether or not exempt customers can enter their IDs to avoid paying these taxes where applicable. If you select the True checkbox, customers click the Enter VAT ID link in the Your Payment section on the right-hand side of the page. Clicking the link opens a Lightbox popup window allowing the customers to enter their tax IDs. If you do not select this checkbox, the link does not appear, and an exempt customer cannot enter an ID to avoid paying the taxes.

           


     
  • Font - Click the drop-down and select the font to be used throughout the Web Storefront. The default option automatically uses one of three fonts depending on which fonts are present on the customer's computer.


     
  • Email field - Click the drop-down and choose whether the Email field is to appear in both the right-hand column of the Storefront and the payment window, or only in the payment window.
  • Newsletter Subscription Checkbox - Click the drop-down and choose the behavior of the optional opt-in checkbox labeled Stay updated via email about product updates and special offers:
     
    • Show, Checked - This option causes the checkbox to be displayed and selected by default. The customer may uncheck the checkbox to opt out.
       

       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 - This option causes the checkbox to be displayed but not selected. The customer may choose to select the checkbox to opt in.
    • Hide - Selecting this option prevents the checkbox from being displayed. Your store treats the checkbox as if it had been unchecked/opted out.
       
  • 'Company' field - Click the drop-down and select the behavior of the optional Company field on the Storefront.
     
    • Disable company field - This is the default value for this field. The Company field does not appear during the order process, and customers do not have a place to enter their company names.
    • Enable company field - This option causes the Company field to appear in the Payment Information popup window during the order process. When this option is selected, the field is optional.
    • Enable the company field and make it required - This option causes the Company field to appear in the Payment Information popup window during the order process. All customers are required to enter a value in the Company field. When this option is selected, the purchase cannot be processed with the Company field empty or blank.
       
  • Force physical address collection on all orders - By default, the Yes checkbox is not selected. Customers do not see data entry fields for a physical address, except when ordering one or more physical products requiring shipment. If you select the Yes checkbox, all customers are required to enter a complete physical address, as shown in the example below.


     
  • 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 is the default value for this field. When a subscription is purchased, FastSpring saves the customers' payment details (using a secure payment token). Any future subscription rebills will be processed automatically.
    • Allow, Opt-Out (details are saved by default, customers can opt out during the purchase) - When this option is selected and any non-managed subscription is in the cart, customers can opt out of automatic renewals by clearing a checkbox. The checkbox is selected by default, and customers who want to opt out must clear the checkbox. If the checkbox remains selected, FastSpring saves the customers' payment details using a secure payment token. Any future subscription rebills will be processed automatically.
    • Allow, Opt-In (details are not saved by default, customers can opt in during the purchase) - When this option is selected and any non-managed subscription is in the cart, customers can opt in to automatic rebills by selecting a checkbox. The checkbox is not selected by default, and customers who want to opt in must select the checkbox. If the checkbox remains cleared, FastSpring does not save the customer's payment details. Any future subscription rebills will require the customer to log on to Account Management and make the payments manually.

 

back to list

 

The Header Settings page contains options that let you control the appearance of the header section that appears at the top of every page in the Web Storefront.



 
  • Height - Click the drop-down and select the size of the header in pixels. A higher number results in a taller / larger header section at the top of each page.
  • Freeze - Selecting this checkbox causes the entire header section to remain visible at the top of the page when a customer scrolls up or down the page.
  • Logo for Retina screens - Click Choose File and then browse your network or local computer to select a logo image file. The selected image appears in the header when the customers view the Web Storefront using a very high-resolution display.
  • Logo - Optionally, click Choose File and then browse your network or local computer to select a logo image file. The selected image appears in the header when customers view the Web Storefront using standard/non-high-resolution displays. If you have specified a Logo for Retina screens above, you may leave this field blank. Your store automatically scales the specified logo image for use on standard displays.
  • Margins around the logo - Optionally, specify the margins to be included around the logo image(s) selected above. The default margins are 19 pixels above and below the logo image(s) and 0 pixels to the left and right of the logo image(s). The values specified here are included around the logo regardless of whether the customer views the Web Storefront using a high-resolution display or a standard display. More information on how to set this property can is available at http://www.w3schools.com/css/css_margin.asp.
     

     Image size note

    Depending on the image resolution, the ideal image size in pixels may vary. A high-resolution image that is suitable for use in Retina displays may be much larger than the ideal size for a non-Retina display. Any logo image specified in the Logo for Retina screens field is automatically scaled as needed. Therefore, you are welcome to specify only the Logo for Retina screens and leave the second Logo field blank. However, if you want to specify a lower-resolution logo image in that second field, an ideal approximate size to aim for is 455 pixels wide by 70 pixels tall.

     
  • Logo link - Optionally, specify a Web address for a hyperlink to be used when a purchaser clicks the logo image in the header.


     
  • Text - Optionally, click the text entry area and enter a message or caption to be displayed in the header section of the Web Storefront, to the right of the logo (if any). You can also click the language code selector and enter the text in additional languages if desired.
  • Text alignment - Click the drop-down and select the desired text alignment for the contents of the Text field above (if any). The Text alignment field does not control the placement of the text in the header of the Web Storefront; only its alignment within the text area.
  • Text color - Click the drop-down and select or enter the desired color for the text (if any) to appear in the header section of the Web Storefront. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(255, 255, 255).

The Links section of the Header Settings page provides options that control the display of any clickable hyperlink text/descriptions appearing in the header of the Web Storefront. Specifically, any hyperlinks included in the Text field above are affected. Links outside the header of the Web Storefront are controlled separately under Storefronts > Web Storefronts > Settings > Footer Settings, and under Storefronts > Web Storefronts > Settings > Page Settings.

  • Links color - Click the drop-down and select or enter the color of the hyperlink text/description for any links included in the header. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(255, 255, 255).
  • Links color on hover - Click the drop-down and select or enter the color of the hyperlink text to be used when a purchaser hovers the mouse cursor over any links included in the header. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(255, 255, 255), and since this is the same as in the previous field, the links do not change color on hover by default.
  • Links decoration - If you want any hyperlinks included in the Web Storefront header to be underlined by default, click the drop-down and select Underline.
  • Links decoration on hover - If you do not want header hyperlinks to be underlined when a customer hovers the mouse cursor over them, click the drop-down and select None.
  • Links style - By default, any hyperlinks included in the Web Storefront header use bold text. If you do not want the links to be bold, click the drop-down and select Normal.
  • Links style on hover - By default, any hyperlinks included in the Web Storefront header use bold text when a purchaser hovers the mouse cursor over them. If you do not want the links to be bold while the cursor hovers over them, click the drop-down and select Normal.


     
  • Background color - Click the drop-down and select or enter the desired color for the main/background area of the header displayed at the top of the Web Storefront. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(49, 54, 65).
  • Background image - Optionally, click Choose File and browse your network or local computer to select an image file to be rendered instead of a solid background color for the header.
  • Background image 'repeat' property - This property controls any image you have selected in the Background image field above. Click the drop-down and specify whether the image should be repeated horizontally or vertically, or not at all. The default setting is No repeat.
  • Header and content separation line height - Click the drop-down and select the size, in pixels, of the line separating the header section from the rest of the Web Storefront. A higher value results in a taller/larger separating line.
  • Line color - Click the drop-down and select or enter the color of the line separating the header section from the rest of the Web Storefront. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(34, 38, 48). Tip: The larger the separation line height specified above, the more noticeable this color is likely to become.
 

back to list

 

The Footer Settings page contains options that let you control the appearance of the footer section that appears near the bottom of every page in the Web Storefront. (Note: The footer section appears directly above the static section that identifies FastSpring as the merchant and provides links to our terms and privacy policy.)

 

  • Color - Click the drop-down and select or enter the color of the text that appears in the footer of the Web Storefront. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(119, 119, 119).
  • Text - Optionally, click the text entry area and enter a message to be included in the footer of the Web Storefront. You can add clickable hyperlinks using Markdown; documentation is available at http://daringfireball.net/projects/markdown/syntax#link. You can also optionally click the language code drop-down and enter the message in other supported languages.
     

The Links section of the Footer Settings page provides options that control the display of any clickable hyperlink text appearing in the footer of the Web Storefront. Specifically, any hyperlinks included in the Text field above are affected. Links outside the footer of the Web Storefront are controlled separately under Storefronts > Web Storefronts > Settings > Header Settings and under Storefronts > Web Storefronts > Settings > Page Settings.

  • Links color - Click the drop-down and select or enter the color of the hyperlink text/description for any links included in the footer of the Web Storefront. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(49, 54, 65).
  • Links color on hover - Click the drop-down and select or enter the color of the hyperlink text to be used when a customer hovers the mouse cursor over any links included in the footer of the Web Storefront. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(34, 38, 48).
  • Links decoration - If you want any hyperlinks included in the footer to be underlined by default, click the drop-down and select Underline.
  • Links decoration on hover - If you do not want footer hyperlinks to be underlined when a customer hovers the mouse cursor over them, click the drop-down and select None.
  • Links style - If you want any hyperlinks included in the Web Storefront footer to use bold text, click the drop-down and select Bold.
  • Links style on hover - By default, footer hyperlinks do not use bold text when a customer hovers the mouse cursor over them. If you want the links to be bold while the cursor hovers over them, click the drop-down and select Bold.
  • Background color - Click the drop-down and select or enter the color that fills the background of the footer on every page of the Web Storefront. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(231, 231, 231).
 

back to list

 

Page Settings

The Page Settings page contains options that let you control the style of certain content in the central portion of each page of the Web Storefront, between the header and footer.

The Links section of the Page Settings page controls the appearance of all hyperlinks contained in the content area between the header and footer of the Web Storefront. Links contained in the header and footer are controlled separately under Storefronts > Web Storefronts > Settings > Header Settings and Storefronts > Web Storefronts > Settings > Footer Settings, respectively.

  • Content links color - Click the drop-down and select or enter the color of the text/description for hyperlinks. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(66, 139, 202).
  • Content links color on hover - Click the drop-down and select or enter the color to be used when the customer hovers the mouse cursor over the text/description of hyperlinks. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(66, 139, 202).
  • Content links decoration - By default, the text/description of all hyperlinks is not underlined. If you want the links to be underlined, click the drop-down and select Underline.
  • Content links decoration on hover - By default, the text/description of all hyperlinks is underlined when the customer hovers the mouse cursor over the links. If you do not want the links to be underlined while the cursor hovers over them, click the drop-down and select None.
  • Content links font weight - By default, the text/description of all hyperlinks is not bold. If you want the links to use bold text, click the drop-down and select Bold.
  • Content links font weight on hover - By default, the text/description of all hyperlinks is not bold when the customer hovers the mouse cursor over the link. If you want the link text to be bold, click the drop-down and select Bold.
  • Tax Text Color - Click the drop-down and select or enter the color to be used for the text rendered when product prices have applicable taxes included (e.g. "Includes €8.67 VAT at 19%"). The default value is rgb(153, 153, 153).

The Background section of the Page Settings page controls the background of the content section between the header and footer of the Web Storefront. The background of the header and footer sections are controlled separately under Storefronts > Web Storefronts > Settings > Header Settings and Storefronts > Web Storefronts > Settings > Footer Settings, respectively.

  • Background color - Click the drop-down and select or enter the color to be used in the background of the main content area when there is no Background image. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(231, 231, 231).
  • Background image - Optionally, click Choose File to browse your network or local computer for an image file to be rendered in the background of the main content area.
  • Background image 'repeat' property - Click the drop-down and specify whether the image selected in the previous field is to be repeated horizontally, vertically, or not at all. The default setting is No repeat.
  • Background image 'size' property - This field controls the size of the Background image selected above, via the CSS length, percentage, contain, or cover values of the background-size property. For more information about this property, please see http://www.w3schools.com/cssref/css3_pr_background-size.asp.
  • Background image 'position' property - This field controls the position of the Background image selected above, relative to the main content area, via the CSS background-position property. For more information about this property, please see http://www.w3schools.com/cssref/pr_background-position.asp.
  • Background image 'attachment' property - This field controls whether or not the Background image specified above remains fixed when a customer scrolls up and down on the Web Storefront page.
     
    • If you select Scroll with content, the background image moves up or down when the customer scrolls up or down on the page. In effect, the visible portion of the image does not change, so the customer could not scroll down past the bottom of it.
    • If you select Stay in a fixed position, the background image remains static when the purchaser scrolls up or down on the page. In effect, the background of the page stays in its original position while the content in the foreground moves with the browser's scroll bar.
       
  • Background image 'clip' property - If you have selected an image in the Background image field above, this field controls the CSS background-clip property for the image. The default value is Content box. For more information about this property, please see http://www.w3schools.com/cssref/css3_pr_background-clip.asp.


     
  • Color of the group title - Click the drop-down and select or enter the color of the text to be displayed as the heading label in certain types of offer groups such as cross-sells and upsells. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(49, 54, 65).
  • Panel corners radius - This field controls the squareness or roundness of the corners for borders around panels in the main content area. The default value is 0 pixels, which indicates square corners; a higher value results in rounder corners.
  • Popup windows corners radius - This field controls the squareness or roundness of the corners for borders around popup windows. The default value is 0 pixels, which indicates square corners; a higher value results in rounder corners.
  • Panel and group display title alignment - Click the drop-down and select the text alignment to be used for panel and group titles. For example, this setting affects the "Your Order" heading on the Product Page, and the "Your Payment" heading above the payment methods panel on the right-hand side of the Web Storefront.
  • Panel headers background color - Click the drop-down and select or enter the color to be used for the background of panel headers such as "Your Order" and "Your Payment." If you enter the RGB value, click Choose to submit your choice. The default value is rgb(245, 245, 245).
  • Panel headers text color - Click the drop-down and select or enter the color to be used for the text for panel headers such as "Your Order" and "Your Payment." If you enter the RGB value, click Choose to submit your choice. The default value is rgb(51, 51, 51).
  • Text Color - Click the drop-down and select or enter the color to be used for the FastSpring terms and conditions text that appears below the footer on your Web Storefront. The default value is rgb(119,119,119).
 

back to list

 

Products and Prices

The Products and Prices page contains options that let you control the size of product titles and product icons, as well as the color of product prices on the Web Storefront.

  • Color - Click the drop-down and select or enter the color to be used for product prices. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(169, 68, 66).
  • Size - This field controls the size of the price text. The default value is Large; if you click the drop-down and select Standard, the price text becomes somewhat smaller by comparison.
  • Product title size - Click the drop-down and select the font size to be used for product titles in the Primary and Secondary sections of the Homepage, and in the main section of the Product page (but not inside cross-sell or upsell groups). The default value is 18px; selecting a higher value results in larger product title text.
  • Product image size - Click the drop-down and select the size (in pixels) to be used for product icons in the Primary and Secondary sections of the Homepage, and in the main section of the Product page (but not inside cross-sell or upsell groups). The default value is Large (128x128).


     
  • Offer title size - Click the drop-down and select the size (in pixels) to be used for the product title text for products that appear as a cross-sell or upsell offer. The default value is 16px; selecting a higher value results in larger product title text.
  • Offer image size outside the cart - Click the drop-down and select the size (in pixels) to be used for product icons that appear as part of a cross-sell or upsell offer when the customer has not yet selected those products. The default value is Large (128x128).
  • Offer image size inside the cart - Click the drop-down and select the size (in pixels) to be used for product icons that appear as part of a cross-sell or upsell offer when the customer has not yet selected those products. The default value is Medium (96x96).
 

back to list

 

Homepage

The Homepage page contains options for controlling the appearance and behavior of some specific elements on the Homepage.

  • Show checkboxes for adding products to cart - By default, customers can select products/add products to the cart by clicking a product's action button. (You can control the label of that button for each item under Products.) However, if you prefer to display a checkbox for each product and have each product selected/added to the cart when its corresponding checkbox is selected, then select the Yes checkbox here.


     
  • Product action button behavior - Click the drop-down and select the behavior of the products' action buttons (see example image below).
     
    • Adds product to cart - This is the default value. When it is selected, clicking a product's action button adds the product to the cart. The customer remains on the Homepage, with the Your Payment section displayed on the right-hand side.
    • Opens product page - When this option is selected, clicking a product's action button opens the associated Product Page. The product is selected/added to the cart automatically.
    • Hidden - hides the products' action button, so only the products' prices are displayed.
       
  • Product title link behavior - Click the drop-down and select the behavior of the products' title links (see example image below).
     
    • Open product checkout page - When this option is selected, clicking a product's title link opens the associated Product Page. The product is selected/added to the cart automatically.
    • Show inline product description - This is the default value. When it is selected, clicking a product's title link opens a popup window displaying the product's icon and the contents of its Long Description field.

 

back to list

 

Buttons

The Buttons page contains options for controlling the appearance of buttons throughout the Web Storefront. For settings that can be controlled separately for different types of buttons, such as Corners radius, you may want to use the same values for all button types. This approach creates consistency throughout the Web Storefront.

Many of the same options appear in separate sections of this page for different types of buttons. The options function identically in all sections; what varies with each section is the type of buttons being affected by the options.

The following is a description of each of the options that appears in every section. Details about unique options and the default values for each section are specified below.

  • Corners radius - These fields control the squareness or roundness of the corners for various buttons in the main content area. Entering 0px results in square corners. Entering a higher value results in rounder corners.
  • Color - Click the drop-down and select or enter the primary color for buttons in each section. If you enter the RGB values, click Choose to submit your choices.
  • Color on hover - Click the drop-down and select or enter the color to be used for buttons when a customer hovers the mouse cursor over them. If you enter the RGB values, click Choose to submit your choices. Typically, the default values create the effect of a button "lighting up" while the cursor hovers over it.
  • Text size - Click the drop-down and select the size (in pixels) of the text that provides the caption/description for buttons. Selecting a higher value results in larger button text.
  • Text color - Click the drop-down and select or enter the primary color to be used for button text. If you enter the RGB values, click Choose to submit your choices. For most buttons, the default value is rgb(255, 255, 255), which is pure white.
  • Text color on hover - Click the drop-down and select or enter the color to be used for button text when a purchaser hovers the mouse cursor over the buttons. For most buttons, the default value is rgb(255, 255, 255), which is pure white like the default text color. Since the default values are the same, most button text does not change color while the cursor hovers over the button, by default.
  • Border width - Click the drop-down and select the size (in pixels) of the border to appear around the buttons. For most buttons, the default value is 0px, which means no border appears by default. Selecting a higher value results in a thicker border.
  • Border color - Click the drop-down and select or enter the primary color for the border around buttons. If you enter the RGB values, click Choose to submit your choices. For most buttons, the default value is the same color as the default primary color for buttons. Also, since the Border width is 0px by default, changing the Border color does not affect most buttons unless you also increase the Border width.
  • Border color on hover - Click the drop-down and select or enter the color that to be used for the border around buttons when a purchaser hovers the mouse cursor over them. If you enter the RGB values, click Choose to submit your choice. For most buttons, the default value is the same as the default Color on hover value for buttons.

The following example illustrates a non-default payment button with Corners radius set to 8px, a Border width of 3px, and a Border color of rgb(0,0,0) (black). Notice that the corners are much rounder compared to the default settings.

The Payment Buttons section of the Buttons page contains options that control the appearance of payment buttons. For example, this section controls the Enter Payment Details and Place Your Order buttons pictured in the example images below.

  • Short Checkout Flow - The Yes checkbox is selected by default. This setting allows purchasers to initiate checkout by simply clicking their desired payment method.

    The images below illustrate behavior when this checkbox is not selected. If you clear this checkbox, the Credit/Debit Card option is selected by default, and purchasers must click the Enter Payment Details button to initiate check out. Purchasers who want to use PayPal Checkout or Amazon Pay must first select that option and then click Place Your Order.





    Default values for the Payment Buttons section:
     
    Field NameDefault Value
    Corners radius4px
    Colorrgb(240, 173, 78)
    Color on hoverrgb(236, 151, 31)
    Text size14px
    Text colorrgb(255, 255, 255)
    Text color on hoverrgb(255, 255, 255)
    Border width0px (no border)
    Border colorrgb(240, 173, 78)
    Border color on hoverrgb(236, 151, 31)

The 'Add to Cart' Button section of the Buttons page contains options that control the appearance of product action buttons, sometimes called the 'Add to Cart' buttons. The actual text labels for these buttons can vary from product to product, as configured in the Call to Action field of each product record, under Products from the main menu of the FastSpring App.

Field NameDefault Value
Corner radius4px
Colorrgb(66, 139, 202)
Color on hoverrgb(48, 113, 169)
Text size14px
Text colorrgb(255, 255, 255)
Text color on hoverrgb(255, 255, 255)
Border width0px (no border)
Border colorrgb(66, 139, 202)
Border color on hoverrgb(48, 113, 169)

The 'Cross-Sell' Button section of the Buttons page contains options that control the appearance of product action buttons when they appear in the context of a cross-sell offering. In this context, the actual text labels for these buttons can vary from product to product, as configured in the Call to Action field of each product record, under Products from the main menu of the FastSpring App.

Field NameDefault Value
Corners radius0px (square corner)
Colorrgb(66, 139, 202)
Color on hoverrgb(48, 113, 169)
Text size14px
Text colorrgb(255, 255, 255)
Text color on hoverrgb(255, 255, 255)
Border width0px (no border)
Border colorrgb(66, 139, 202)
Border color on hoverrgb(48, 113, 169)

The 'Up-Sell' Button section of the Buttons page contains options that control the appearance of product action buttons when they appear in the context of a cross-sell offering. In this context, the actual text labels for these buttons can vary from product to product, as configured in the Call to Action field of each product record, under Products from the main menu of the FastSpring App.

Field NameDefault Value
Corners radius0px (square corners)
Colorrgb(66, 139, 202)
Color on hoverrgb(48, 113, 169)
Text size14px
Text colorrgb(255, 255, 255)
Text color on hoverrgb(255, 255, 255)
Border width0px (no border)
Border colorrgb(66, 139, 202)
Border color on hoverrgb(48, 113, 169)

The 'Download Now' and 'View Instructions' Buttons section of the Buttons page contains options that control the appearance of the Download Now and View Instructions buttons. These buttons may appear on the Completion Page following a successful purchase.

Field NameDefault Value
Corners radius4px
Colorrgb(66, 139, 202)
Color on hoverrgb(48, 113, 169)
Text size14px
Text colorrgb(255, 255, 255)
Text color on hoverrgb(255, 255, 255)
Border width0px (no border)
Border colorrgb(66, 139, 202)
Border color on hoverrgb(48, 113, 169)

The 'Manage Subscriptions' section of the Buttons page is the first section in a series of several that let you control the styling of the Customer-Facing Account Management site. These settings only affect the site when customers access the site via the current Web Storefront.

 Important

The Manage Your Orders link found in customer-facing order receipt email messages always targets your default Web Storefront. Changes to the Account Management button styles for any Web Storefront other than the default have no practical effect unless you provide customers with account management links specifically targeting that Storefront. Please see Customer-Facing Account Management for more information.

Using the Manage Subscriptions controls, you can style the Manage buttons found on the Subscriptions tab of the account management site.

*The Account Management screenshot above does not reflect the default values; the Web Storefront pictured has been customized to match a specific design style.

Field NameDefault Value*
Text colorrgb(255, 255, 255)
Colorrgb(66, 139, 202)
Border colorrgb(66, 139, 202)
Corners radius4px
Border width1px
Text size14px
Text color on hoverrgb(255, 255, 255)
Color on hoverrgb(48, 113, 169)
Border color on hoverrgb(48, 113, 169)

The Subscription 'Use Payment Method' section of the Buttons page lets you control the styling of the Use This buttons displayed on the Account Management site. These buttons appear when a customer logs on to Account Management, clicks the Subscriptions tab, and selects Manage -> Update Payment Method for a subscription.

*The Account Management screenshot above does not reflect the default values; the Web Storefront pictured has been customized to match a specific design style.

Field NameDefault Value*
Text colorrgb(255, 255, 255)
Colorrgb(240, 173, 78)
Border colorrgb(240, 173, 78)
Corners radius4px
Border width1px
Text size14px
Text color on hoverrgb(255, 255, 255)
Color on hoverrgb(236, 151, 31)
Border color on hoverrgb(236, 151, 31)

The 'Add Payment Method' section of the Buttons page lets you control the styling of the Add Payment Method button found on the Account Management site. This button appears on the Account Details and Payment Methods tab.

*The Account Management screenshot above does not reflect the default values; the Web Storefront pictured has been customized to match a specific design style.

Field NameDefault Value*
Text colorrgb(255, 255, 255)
Colorrgb(240, 173, 78)
Border colorrgb(240, 173, 78)
Corners radius4px
Border width1px
Text size12px
Text color on hoverrgb(255, 255, 255)
Color on hoverrgb(236, 151, 31)
Border color on hoverrgb(236, 151, 31)

The 'Save Payment Details' section of the Buttons page lets you control the style of the Save Payment Details button on the Account Management site. This button appears when a customer chooses to add a new payment method via the Account Details and Payment Methods tab.

*The Account Management screenshot above does not reflect the default values; the Web Storefront pictured has been customized to match a specific design style.

Field NameDefault Value*
Text colorrgb(255, 255, 255)
Colorrgb(240, 173, 78)
Border colorrgb(240, 173, 78)
Corners radius4px
Border width1px
Text size14px
Text color on hoverrgb(255, 255, 255)
Color on hoverrgb(236, 151, 31)
Border color on hoverrgb(236, 151, 31)

The 'Manage Payment Method' section of the Buttons page lets you control the styling of the Manage button on the Account Management site. This button appears next to each payment method on the Account Details and Payment Methods tab.

*The Account Management screenshot above does not reflect the default values; the Web Storefront pictured has been customized to match a specific design style.

Field NameDefault Value*
Text colorrgb(255, 255, 255)
Colorrgb(66, 139, 202)
Border colorrgb(66, 139, 202)
Corners radius4px
Border width1px
Text size14px
Text color on hoverrgb(255, 255, 255)
Color on hoverrgb(48, 113, 69)
Border color on hoverrgb(48, 113, 69)

The 'Confirm Dialog OK' section of the Buttons page lets you control the styling of the Yes button on the Account Management site. This button appears in the confirmation dialog when a customer chooses to remove a payment method, cancel a subscription, or perform similar actions.

*The Account Management screenshot above does not reflect the default values; the Web Storefront pictured has been customized to match a specific design style.

Field NameDefault Value*
Text colorrgb(255, 255, 255)
Colorrgb(92, 184, 92)
Border colorrgb(92, 184, 92)
Corners radius4px
Border width1px
Text size14px
Text color on hoverrgb(255, 255, 255)
Color on hoverrgb(68, 157, 68)
Border color on hoverrgb(68, 157, 68)

The 'Confirm Dialog Cancel' section of the Buttons page lets you control the styling of the Cancel button on the Account Management site. This button appears in the confirmation dialog when a customer chooses to remove a payment method, cancel a subscription, or perform similar actions.

*The Account Management screenshot above does not reflect the default values; the Web Storefront pictured has been customized to match a specific design style.

Field NameDefault Value*
Text colorrgb(0, 0, 0)
Colorrgb(204, 204, 204)
Border colorrgb(204, 204, 204)
Corners radius4px
Border width1px
Text size14px
Text color on hoverrgb(0, 0, 0)
Color on hoverrgb(221, 221, 221)
Border color on hoverrgb(221, 221, 221)
 

back to list

 

Completion Page

The page titled Completion Page lets you control whether or not licenses appear on the Completion Page following a successful purchase.

The checkbox labeled Enable licenses on completion page controls whether or not licenses appear on the Completion Page following a successful purchase. If you clear this checkbox, licenses configured in the product's Fulfillment section are still generated but do not appear on the Completion Page. In that case, purchased licenses are still included in customers' receipt email messages (by default), and customers can still view their licenses via the Account Management site.

 

back to list

 

Promotions

The Promotions page contains options that let you control the behavior of various Web Storefront promotional features. This page includes controls for the following:

  • the Promotional Code field
  • cross-sells
  • upsells
  • the optional popup that can appear when customers leave the Web Storefront open for an extended period without purchasing

The Promotional Code section of the Promotions page lets you control the behavior of the Promotional Code field (also called the Coupon Code field).

  • Show 'Promotional Code' field - Click the drop-down and select the placement of the Promotional Code field.
     
    • Show - This is the default value for this field. The Promotional Code field appears below the Primary and Secondary sections of the Homepage and Cart Page, and below the Primary section of the Product Page.


       
    • Hide - If you select this option, the Promotional Code field does not appear anywhere in the Web Storefront. Customers cannot enter coupon codes, but you can still apply coupon codes via the Store Builder Library, the FastSpring API, or custom orders.


       
    • Show in 'Your Payment' Block - If you select this option, the Promotional Code field does not appear below the products on any page of the Web Storefront. Instead, it appears in the Your Payment block on the right-hand side of the page.


       
  • 'Promotional Code' display type - This field controls whether or not the Promotional Code field is displayed automatically when the Web Storefront page loads.
     
    • Display coupon fields right away - This option is selected by default. The Promotional Code field appears when the Web Storefront page loads, unless Show 'Promotional Code' field is set to Hide.
    • Display 'Enter coupon code' link which exposes coupon field when clicked - If you select this option and do not hide the Promotional Code field, an Enter Promotional Code link appears below the products on the Web Storefront. Customers must click the link to display the Promotional Code field.


       

The Storefront level Cross-sell offers position field in the Product Page section of the Promotions page lets you control the display of special cross-sell offers such as the offer for the Extended Download Service (EDS). This setting does not apply to standard cross-sell offers, which are controlled by the next field on the Promotions page.

Each of the options in this field's drop-down selector corresponds to–and works the same way as–the options of the same names in the Cross-sell offers position field, as described and illustrated below. The only difference is that this field controls the display of special cross-sells like the EDS. In contrast, the Cross-sell offers position field controls all other (standard) cross-sell offers.

The Product Page, Cart Page, and Homepage sections of the Promotions page contain options that let you control where cross-sells and upsells appear. The options in each section correspond to and control a different page in the Web Storefront. Each section contains similar options, though some of the drop-down selectors in the Homepage section have fewer options since not every option applies there.

  • Cross-sell offers position - This field lets you control where on the pages cross-sells are offered. The default value is Below the product which triggered the promotion. Here are examples of each of the options:
     
    ValueExample
    Below the product which triggered the promotion
    Above 'Your Order' block
    Inside 'Your Order' block
    Below 'Your Order' block
    Under 'Your Payment' block
    Do not show cross-sells

     
  • Where up-sell offers are displayed - If you enable upsell offers (see Up-sell offers position on the page), this field controls whether they appear inside the selected page, via a popup window, or both.
     
    • All inside the page - This is the default value. All available upsell offers for the product appear inside the selected page.
    • First up-sell offer is displayed in the popup, rest are discarded - If you select this option, only one upsell product appears, regardless of how many are configured for the selected product. The upsell offer appears in a popup window rather than on the main page.
    • First up-sell offer is displayed in the popup, rest are displayed inside the page - Selecting this option causes the first upsell product configured for the selected product to appear in a popup window. Any other upsell offerings for the selected product appear inside the page.
    • First up-sell offer is displayed in the popup, all (including the first) are displayed inside the page - Selecting this option causes the first upsell product configured for the selected product to appear in a popup window. The same first upsell also appears--along with any other upsell offerings for the selected product--inside the page.
       
  • Up-sell offers position on the page - This field works exactly like the Cross-sell offers position field above, except it controls the display of upsell offers rather than cross-sell offers. Note, however, that the first upsell offer for the selected product may appear in a popup window instead of using the setting here. This behavior depends on the option selected in the Where up-sell offers are displayed field above.

    Note:  For the Product Page and Cart Page, the default value for this field is Below 'Your Order' block. For the Homepage, the default value for this field is Below the product which triggered the promotion.
     

The Abandoned Cart Popup section of the Promotions page contains options that let you control the optional cart abandonment popup dialog. This dialog can appear when a customer attempts to abandon the cart but then chooses to stay, or remains on the same page of the Web Storefront for a specified amount of time without completing a purchase. The goal of these settings is to encourage customers not to abandon the cart without purchasing. The dialog that can optionally appear to customers is not technically a browser popup window, but rather a Lightbox dialog that appears over the top of the main page content.

 Note

On the Homepage of the Web Storefront, the abandoned cart popup dialog does not appear unless the customer has selected a product, bundle, or subscription. In other words, if there is nothing in the cart to abandon, the dialog does not appear.

The following is an example of the abandoned cart popup dialog with an image and a coupon attached.

  • Popup displayed when visitor attempts to leave the page - If the Enabled checkbox is selected, then when a customer attempts to leave the page, the browser's built-in warning appears. If the customer clicks the option to stay on the page, then the popup dialog appears. The purpose of the dialog is to convince the customer to reconsider and complete the purchase. If this checkbox is not selected (which is the default value), no alert message is displayed when the customer abandons the cart.
  • Popup displayed when no visitor activity detected - The Enabled checkbox here controls whether or not the abandoned cart popup dialog appears after a specified amount of time with no activity by the customer. If this checkbox is not selected (which is the default value), customer inactivity does not cause the abandoned cart popup dialog to appear.
  • Display timeout - This field can have different values depending on the customer's selected language. You can optionally click the drop-down language selector and specify a separate setting for each supported language; English the default value for the language selector. The field controls the amount of time, in minutes, that the Web Storefront page waits with no activity from the purchaser before the abandoned cart popup dialog appears. The default value is 10, meaning that if you have selected the corresponding Enabled checkbox above, the abandoned cart popup dialog appears on the Web Storefront after 10 minutes of inactivity by the customer.
  • Popup Title - Optionally, enter the title to be used at the top of the abandoned cart popup dialog. If you don't want a title to appear at the top of the abandoned cart popup dialog, this field can be left blank, which is its default value. If your Web Storefront supports more than one language, you can optionally click the language code selector and enter the title in each language.
  • Popup Text - Enter the text of the message that is to appear in the abandoned cart popup dialog. If your Web Storefront includes more than one language, you can optionally click the language code selector and enter the text in each language.

  • Coupon to be offered to complete the purchase - Using this field, you can optionally offer customers a promotional discount code within the abandoned cart popup dialog. The goal is to entice the customer to complete the purchase. As with the Display timeout, this field can have a different value for each supported language. English the default selection in the language code selector. Enter a valid coupon code (created under Coupons from the main menu), which is to be applied to the order if the purchaser clicks the Purchase With Discount button in the popup dialog.
  • Popup heading alignment - Click the drop-down and select the desired alignment for the heading text of the abandoned cart popup dialog. The default value is Left.
  • Popup text alignment - Click the drop-down and select the desired alignment for the main text message in the abandoned card popup dialog. The default value is Left.
  • Popup button alignment - Click the drop-down and select the desired alignment for the action button at the bottom of the abandoned cart popup dialog. The default value is Left.
  • Popup image - Optionally, click Choose File and then browse your network or your local computer for an image file to be displayed in the center of the abandoned cart popup dialog. By default, no image appears in the dialog.
 

back to list

 

Analytics Integration

The Analytics Integration page contains options that let you set up integration between the Web Storefront and your Google Analytics account.

  • Google Analytics Integration Behavior - Three options are available for this field:
     
    • Use default Google Analytics property ID from integration settings - This is the default value for this field. When this value is selected, the Web Storefront uses the default Google Analytics property ID specified in Integrations > Extensions > Google Analytics > SETUP.
    • Use custom Google Analytics property ID for this storefront - Selecting this value allows you to specify a custom property ID in the field below, for use by the Web Storefront instead of the default property ID specified under the Integrations menu.
    • Do not enable Google Analytics for this storefront - Selecting this option disables Google Analytics tracking for the Web Storefront.
       
  • Custom Google Analytics property ID for this storefront - Optionally, enter a Google Analytics property ID to be used by this Web Storefront. This ID only applies if Use custom Google Analytics property ID for this storefront is selected above.


     
  • Google Tag Manager Integration Behavior - Three options are available for this field:
     
    • Use default Google Tag Manager container ID from integration settings - This is the default value for this field. When this value is selected, the Web Storefront uses the Google Tag Manager container ID specified in Integrations > Extensions > Google Tag Manager > SETUP.
    • Use custom Google Tag Manager container ID for this storefront - Selecting this value allows you to specify a custom Google Tag Manager container ID in the field below, for use by the Web Storefront instead of the default container ID specified under the Integrations menu.
    • Do not run Google Tag Manager for this storefront - Selecting this option disables Google Tag Manager integration for this Web Storefront.
       
  • Google Tag Manager custom container ID for this storefront - Optionally, enter a custom Google Tag Manager container ID to be used by this Web Storefront. This ID only applies if Use custom Google Tag Manager container ID for this storefront is selected above.
 

back to list

 

Checkout

The Checkout page only appears when gift purchases are enabled for your FastSpring Store. It 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 to allow gift purchases on the Storefront, clear the checkbox instead.

 

back to list

 

PayPal

The PayPal page contains options that you let customize the PayPal logon window that appears when a customer chooses to pay using PayPal.

  • Checkout Brand Logo - Optionally, click Choose File and browse your network or local computer for an image file to appear at the top of the PayPal logon window. The illustration below has an example of a logo image on the PayPal logon window. No image is selected or displayed by default.
  • Checkout Brand Title - Optionally, enter a brand title to appear in the PayPal logon window in the context of the link to cancel and return to the Web Storefront. The illustration below has an example of a brand title in the return link. This field is blank by default. If your Web Storefront includes multiple languages, you can optionally click the language code selector and enter the 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.