Collapse Menu
Docs Home
Developer Tools
Contact Support

Customize Your Web Storefront

Overview

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

Customize the look and feel of a Web Storefront by clicking the Storefronts > Web Storefronts in the FastSpring App. Click the Settings button for the Web Storefront you want to customize.

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

Use the illustration below to determine which of the settings menus you need to access for some customizable parts of the website. Click Save at the top right-hand corner of the page after making changes in any of the following pages.

1: 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. Click the language code selector to enter the title in additional languages.
  • Favicon - Click Choose File and select an image file (typically .png or .ico) to be displayed next to the caption in the browser tab. This may also be displayed in the browser’s address bar. 
  • Country and Language selector - Select the desired behavior that can appear towards the top right-hand corner of the Web Storefront. 
    • Show Country/Language selector - Consumers can see and change the Country and Language selector.
    • Show, but lock Country/Language selector - Consumers can see the Country and Language selector, but not change it. The country and language are selected automatically based on the consumer's location (from their IP address) or using override settings available via the More menu of a given Storefront on the list of Web Storefronts.
    • Hide Country/Language selector - The Country and Language selector is not displayed. They are automatically selected based on the consumer's location (from their IP address) or using override settings available via the More menu for a given Storefront.
  • Norton Security Seal - Select whether or not the optional Norton Security seal is displayed on the Web Storefront.
  • Require email to start the order - If you select the True checkbox, consumers visiting the Web Storefront must enter a valid email address before they can proceed. Your store retains the email address entered by the consumer for the remainder of the checkout process. This allows you to re-market to consumers who abandon the cart without purchasing. In the event of abandonment, a mailingListEntry.updated webhook event can be sent, showing the consumer's email address as recognized.

  • Show 'Enter VAT ID' -  Consumers in locations that have VAT, GST, or similar taxes may be required to pay these taxes on the purchase amount. The Show 'Enter VAT ID' setting controls whether or not exempt consumers can enter their IDs to avoid paying these taxes where applicable. If you select the True checkbox, consumers click the Enter VAT ID link in the Your Payment section on the right of the page. The link opens a Lightbox popup window allowing the consumers to enter their tax IDs. If you do not select this checkbox, the link does not appear, and an exempt consumer 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 consumer's computer.

Customer Information

  • Email field - Choose whether the Email field appears in both the right column of the Storefront in addition to 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 - Causes the checkbox to be displayed and selected by default. The consumer may uncheck the checkbox to opt out. For consumers in areas covered by the GDPR, the checkbox is never selected by default. This setting only affects consumers in non-GDPR locations. 
    • Show, Unchecked - Causes the checkbox to be displayed but not selected. The consumer may choose to select the checkbox to opt in.
    • Hide - 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 - By default, the Company field does not appear during the order process, and consumers do not have a place to enter their company names.
    • Enable company field - The Company field appears in the Payment Information popup window during the order process. The field is optional.
    • Enable the company field and make it required - The Company field appears in the Payment Information popup window during the order process. All consumers are required to enter a value in the Company field; otherwise the purchase cannot be processed. 
  • Force physical address collection on all orders - By default, the Yes checkbox is not selected. Consumers do not see data entry fields for a physical address, except when ordering physical products that require shipment. If you select the Yes checkbox, all consumers are required to enter a complete physical address, as shown in the example below.
  • Auto/Manual subscription renewal - Controls whether or not consumers can choose to opt out of automatic subscription renewals, resulting in subscriptions with a manual renewal policy. See Manual Renewal Subscriptions for more information.
    • Do not allow customers to opt out from saving payment details - By default, when a subscription is purchased, FastSpring saves the consumers' payment details using a secure payment token. Future subscription rebills will be processed automatically.
    • Allow, Opt-Out - When this option is selected and a non-managed subscription is in the cart, consumers can opt out of automatic renewals by clearing a checkbox. If the checkbox remains selected, FastSpring saves the consumers' payment details using a secure payment token to automatically process future subscription rebills. 
    • Allow, Opt-In - When this option is selected and a non-managed subscription is in the cart, consumers can opt in to automatic rebills by selecting a checkbox. If the checkbox remains cleared, FastSpring does not save the consumer's payment details. Future subscription rebills will require the consumer to log on to Account Management and make the payments manually.

The Header Settings enable you to control the appearance of the header section that is at the top of every page in the Web Storefront.

Size and Behavior Settings

  • Height - Click the drop-down and select the size of the header in pixels. A higher number results in a taller header section at the top of each page.
  • Freeze - Selecting this checkbox causes the entire header section to remain visible when a consumer scrolls up or down the page.
  • Logo for Retina screens - Click Choose File to select a logo image file. The image appears in the header when the consumers view the Web Storefront using a high-resolution display.
  • Logo - Click Choose File to select a logo image file. The image appears in the header when consumers 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 - 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). These values are included around the logo regardless of whether the consumer views the Web Storefront using a high-resolution display or a standard display. For more information, see CSS Margin.
    • Depending on the image resolution, the ideal image size may vary. Logos in the Logo for Retina Screens field is automatically scaled as needed, therefore you can leave the second Logo field blank. To specify a lower-resolution logo image in the second field, aim for the approximate size of 455 pixels wide x 70 pixels tall. 
  • Logo link - Specify a Web address for a hyperlink to be used when a purchaser clicks the logo image in the header.
  • Text - Enter a message or caption to be displayed in the header section of the Web Storefront, to the right of the logo. Click the language code selector to enter the text in additional languages
  • Text alignment - Select the desired text alignment for the contents of the Text field above. 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 - Select the desired color for the text 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).

Links Settings

The Links section provides options that control the display of any clickable hyperlink text in the header of the Web Storefront. Links outside the header are controlled separately under Footer Settings, and under Page Settings.

  • Links color - Select the color of the hyperlink text 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 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 - For hyperlinks 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 consumer hovers the 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 cursor over them. To change this, click the drop-down and select Normal.

Background Settings

  • Background color - Enter the desired color for the 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 - 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 pixel size of the line separating the header section from the rest of the Web Storefront. A higher value results in a taller separating line.
  • Line color - Select 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). 
    • The larger the separation line height is, the more noticeable this color will become.

In the Footer Settings, control the appearance of the footer section. The footer section appears at the bottom of every page in the Web Storefront and directly above the static section that identifies FastSpring as the merchant.

Footer Text Settings

  • Color - Select the text color that appears in the footer of your Web Storefront. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(119, 119, 119).
  • Text - Enter a message to be included in the footer of the Web Storefront. You can add clickable hyperlinks using markdown. Click the language code drop-down to enter the message in additional languages.

Footer Links

The Links section of the Footer Settings controls the display of any clickable hyperlink text appearing in the footer of the Web Storefront. Any hyperlinks included in the Text field above are affected. Links outside the footer of the Web Storefront are controlled separately under Header Settings and Page Settings.

  • Links color - Enter the color of the hyperlink text 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 - Select the color of the hyperlink text to be used when a consumer 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 - Select whether or not you want hyperlinks in the footer to be underlined.
  • Links decoration on hover - Select whether or not you want your links to be underlined when one hovers over them.
  • Links style - Select Bold to bolden hyperlinks in the Web Storefront footer.
  • Links style on hover - Select whether or not you want links in the footer to be bolded when a consumer hovers the cursor over them. 
  • Background color - Select 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).

4: 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.

Links on Pages

The Links section of Page Settings 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 Header Settings and Footer Settings.

  • Content links color - 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 - Select the color to be used when the consumer 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 - Select whether or not hyperlinked text is underlined.
  • Content links decoration on hover - Select whether or not hyperlinked text becomes underlined when a consumer hovers the cursor over the link.
  • Content links font weight - To bolden the hyperlinked text, select Bold.
  • Content links font weight on hover - To bolden the hyperlinked text when a consumer’s cursor is over it, select Bold.
  • Tax Text Color - 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).

Background 

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

  • Background color - Select 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 - Click Choose File to select a background image for the main content area.
  • Background image 'repeat' property - Specify whether the image selected in the previous field is to be repeated horizontally, vertically, or not at all.
  • Background image 'size' property - Control 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, see CSS Background Size.
  • Background image 'position' property - This field controls whether or not the Background Image specified above remains fixed when a consumer scrolls up and down on the Web Storefront page.
  • Background image 'attachment' property - This field controls whether or not the Background Image specified above remains fixed when a consumer scrolls up and down on the Web Storefront page.
    • Scroll with content - The background image moves up or down when the consumer scrolls up or down on the page. The visible portion of the image does not change, thus the consumer cannot scroll past the bottom of it.
    • Stay in a fixed position - The background image remains static when the purchaser scrolls up or down on the page. 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 a Background Image, this field controls the CSS background-clip property for the image. The default value is Content box. For more information about this, see CSS Background-Clip Property.

  • Color of the group title - Select the color of the text to be displayed as the heading label in product offers. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(49, 54, 65).
  • Panel corners radius - Control the squareness or roundness of the border corners around panels in the main content area. Higher values indicate rounder corners.
  • Popup windows corners radius - Control the squareness or roundness of the corners of popup window borders. Higher values indicate rounder corners.
  • Panel and group display title alignment - Select the text alignment to be used for panel and group titles. This setting affects the "Your Order" heading on the Product Page, and the "Your Payment" heading above the payment methods panel on the right side of the Web Storefront.
  • Panel headers background color - Select the background color 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 - Select the color of 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 - Select 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).

5: Products and Prices

In the Products and Prices subpage, you control sizing of product titles and icons, as well as the color of product prices on the Web Storefront.

Product Price and Display Settings

  • Color - Enter the color for product prices. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(169, 68, 66).
  • Size - Control the size of the text. By default, the text is Large; Standard is slightly smaller. 
  • Product title size - Select the font size for product titles in the: Primary Homepage Section, Secondary Homepage Section, and the Main section of the Product Page. This does not apply to Product Offer groups. The default value is 18px; selecting a higher value results in larger product title text.
  • Product image size - Select the size (in pixels) to be used for product icons in the: primary homepage section, secondary homepage section, and the main section of the Product Page. The default value is Large (128x128).

Products as Offers

  • Offer title size - Select the size (in pixels) for the product title text in Product Offers. The default value is 16px; selecting a higher value results in larger product title text.
  • Offer image size outside the cart - Select the size (in pixels) for product icons that appear as part of a Product Offer when before the consumer has selected those products. The default value is Large (128x128).
  • Offer image size inside the cart - Select the size (in pixels) for product icons that appear as part of a Product Offer before the consumer selects those products. The default value is Medium (96x96).

6: 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 - Select Yes to display a checkbox to the left of each product. When a consumer selects this checkbox, the corresponding product is added to their cart. 
    • By default, consumers can add products to the cart by clicking a product's action button, which you control under Products.

  • Product action button behavior - Select the behavior of the products' action buttons.
    • Adds product to cart - By default, clicking a product's action button adds the product to the cart. The consumer remains on the Homepage, with the Your Payment section displayed on the right.
    • Opens product page - Clicking a product's action button opens the associated Product Page. The product is added to the cart automatically.
    • Hidden - Hides the action buttons, so only the prices are displayed.
  • Product title link behavior - Select the behavior of the products' title links.
    • Open product checkout page - Clicking a product's title link opens the associated Product Page. The product is automatically added to the cart.
    • Show inline product description - By default, clicking a product's title link opens a popup window displaying the product's icon and the contents of its Long Description field.

7: Buttons

On the Buttons subpage, control the appearance of buttons throughout your Web Storefront. Some settings, including Corner Radius, can be controlled separately for different types of buttons. All options function the same for all sections. The only variance is the type of button you are designing. 

  • Corners radius - Control the roundness of the corners for various buttons in the main content area. Higher pixel amounts result in rounder corners.
  • Color - Select the primary color for buttons in each section. If you enter the RGB values, click Choose to submit your choices.
  • Color on hover - Select the color for buttons when a consumer hovers the mouse cursor over them. If you enter the RGB values, click Choose to submit your choices. 
    • Default values create the effect of a button "lighting up" while the cursor hovers over it.
  • Text size - Select the size (in pixels) of the text that provides the caption for buttons. Higher values result in larger text.
  • Text color - Select the primary color for the button text. If you enter the RGB values, click Choose to submit your choices. The default value is rgb(255, 255, 255), which is pure white.
  • Text color on hover - Select the color 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. 
  • Border width - Select the size (in pixels) of the border to appear around the buttons. The default value is 0px, or no border. Higher values result in thicker borders.
  • Border color - Select the primary color for the border around buttons. If you enter the RGB values, click Choose to submit your choice. 
    • The default border color is the same color as the default primary color for buttons. The Border Width is 0px by default. Because of this, changing the Border Color does not affect most buttons unless you also increase the Border Width.
  • Border color on hover - Select the color 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. The default value is the same as the default Color on hover value.

Example:


Corner Radius = 8px
Border Width = 3px
Border Color = rgb(0,0,0)(black)

Payment Buttons

In the Payment Buttons section, control the appearance of payment buttons, including the Enter Payment Details and Place Your Order buttons.

  • Short Checkout Flow - Selecting Yes allows purchasers to initiate checkout by 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 consumers must click the Enter Payment Details button to initiate checkout. 


      To use PayPal Checkout or Amazon Pay, consumers must first select that option and then click Place Your Order.

Default values for the Payment Buttons section:

  • Corners Radius = 4px
  • Color = rgb(240, 173, 78)
  • Color on Hover = rgb(236, 151, 31)
  • Text Size = 14px
  • Text Color = rgb(255, 255, 255)
  • Border Width = 0px (no border)
  • Border Color = rgb(240, 173, 78)
  • Border Color on Hover = rgb(236, 151, 31)

Add to Cart Button 

In the 'Add to Cart' Button section, control the appearance of product action buttons (or 'Add to Cart' buttons). Text labels for these buttons can vary from product to product, as configured in the Call to Action field of each product record.

Default Values for ‘Add to Cart’ Button

  • Corner Radius = 4px
  • Color = rgb(66, 139, 202)
  • Color on Hover = rgb(48, 113, 169)
  • Text Size = 14px
  • Text Color = rgb(255, 255, 255)
  • Text Color on Hover = rgb(255, 255, 255)
  • Border Width = 0px (no border)
  • Border Color = rgb(66, 139, 202)
  • Border Color on Hover = rgb(48, 113, 169)

Cross-Sell Button

In the Cross-Sell Button section, control the appearance of action buttons when they appear as a cross-sell offer. Text labels for these buttons can vary from product to product, as configured in the Call to Action field of each product record.

Default Values for Cross-Sell Button

  • Corner Radius = 0px (square corner)
  • Color = rgb(66, 139, 202)
  • Color on Hover = rgb(48, 113, 169)
  • Text Size = 14px
  • Text Color = rgb(255, 255, 255)
  • Text Color on Hover = rgb(255, 255, 255)
  • Border Width = 0px (no border)
  • Border Color = rgb(66, 139, 202)
  • Border Color on Hover = rgb(48, 113, 169)

Up-Sell Button

In the Up-Sell section, control the appearance of product action buttons when they appear in an up-sell offer. Labels for these buttons may vary from product to product, as configured in the Call to Action field of each product record. 

Default Values for Up-Sell Button

  • Corner Radius = 0px (square corners)
  • Color = rgb(66, 139, 202)
  • Color on Hover = rgb(48, 113, 169)
  • Text Size = 14px
  • Text Color = rgb(255, 255, 255)
  • Text Color on Hover = rgb(255, 255, 255)
  • Border Width = 0px (no border)
  • Border Color = rgb(66, 139, 202)
  • Border Color on Hover = rgb(48, 113, 169)

‘Download Now’ and ‘View Instructions’ Buttons

Control the appearance of Download Now and View Instructions buttons on the corresponding subpage. These buttons may appear on the Completion Page following a successful purchase. 

Default Values for ‘Download Now’ and “View Instructions’ Buttons

  • Corners Radius = 4px
  • Color = rgb(66, 139, 202)
  • Color on Hover = rgb(48, 113, 169)
  • Text Size = 14px
  • Text Color = rgb(255, 255, 255)
  • Text Color on Hover = rgb(255, 255, 255)
  • Border Width = 0px (no border)
  • Border Color = rgb(66, 139, 202)
  • Border Color on Hover = rgb(48, 113, 169)

Manage Subscription Button

The Manage Subscriptions section is the first of various sections that let you control the styling of the Consumer-Facing Account Management site. These settings only affect the site when consumers access the site via the current Web Storefront.

The Manage Your Orders link in consumer-facing emails targets your default Web Storefront. Changes to the Account Management button for any Web Storefront other than the default are ineffective. Because of this, you must provide consumers with account management links that target the default Storefront. See Consumer-Facing Account Management for more information. 

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

Default Values for Manage Subscription Button

  • Text Color = rgb(255, 255, 255)
  • Color = rgb(66, 139, 202)
  • Border Color = rgb(66, 139, 202)
  • Corners Radius = 4px
  • Border Width = 1px
  • Text Size = 14px
  • Text Color on Hover = rgb(255, 255, 255)
  • Color on Hover = rgb(48, 113, 169)
  • Border Color on Hover = rgb(48, 113, 169)

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

Subscription ‘Use Payment Method’ Button

Control the styling of Use This buttons displayed on the Account Management site. These buttons appear when a consumer logs on to Account Management, clicks the Subscriptions tab, and selects Manage > Update Payment Method for a subscription.

Default Values for Manage Subscription Button

  • Text Color - rgb(255, 255, 255)
  • Color - rgb(240, 173, 78)
  • Border Color - rgb(240, 173, 78)
  • Corners Radius - 4px
  • Border Width - 1px
  • Text Size - 14px
  • Text Color on Hover - rgb(255, 255, 255)
  • Color on Hover - rgb(236, 151, 31)
  • Border Color on Hover - rgb(236, 151, 31)

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

Add Payment Method Button

In the Add Payment Method section, control the styling for the Add Payment Method Button on the Account Management site. This button appears on the Account Details and Payment Methods tab. 

Default Values for Add Payment Method Button

  • Text Color = rgb(255, 255, 255)
  • Color = rgb(240, 173, 78)
  • Border Color = rgb(240, 173, 78)
  • Corner Radius = 4px
  • Border Width = 1px
  • Text Size = 12px
  • Text Color on Hover = rgb(255, 255, 255)
  • Color on Hover = rgb(236, 151, 31)
  • Border Color on Hover = rgb(236, 151, 31)

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

Save Payment Details Button

Control the style of the Save Payment Details button on the Account Management site. This button appears when a consumer chooses to add a new payment method via the Account Details and Payment Methods tab.

Default Values for Save Payment Details Button

  • Text Color = rgb(255, 255, 255)
  • Color = rgb(240, 173, 78)
  • Border Color = rgb(240, 173, 78)
  • Corners Radius = 4px
  • Border Width = 1px
  • Text Size = 14px
  • Text Color on Hover = rgb(255, 255, 255)
  • Color on Hover = rgb(236, 151, 31)
  • Border Color on Hover = rgb(236, 151, 31)

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

Manage Payment Method Button

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.

Default Values for Manage Payment Button

  • Text Color = rgb(255, 255, 255)
  • Color = rgb(66, 139, 202)
  • Border Color = rgb(66, 139, 202)
  • Corners Radius = 4px
  • Border Width = 1px
  • Text Size = 14px
  • Text Color on Hover = rgb(255, 255, 255)
  • Color on Hover = rgb(48, 113, 69)
  • Border Color on Hover =  rgb(48, 113, 69)

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

Confirm Dialog OK Button

Control the styling of the Yes button on the Account Management site. This button appears in the confirmation dialog when a consumer chooses to remove a payment method, cancel a subscription, or perform similar actions.

Default Values for Confirm Dialog OK Button

  • Text Color = rgb(255, 255, 255)
  • Color = rgb(92, 184, 92)
  • Border Color = rgb(92, 184, 92)
  • Corners Radius = 4px
  • Border Width = 1px
  • Text Size = 14px
  • Text Color on Hover = rgb(255, 255, 255)
  • Color on Hover = rgb(68, 157, 68)
  • Border Color on Hover = rgb(68, 157, 68)

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

Confirm Dialog Cancel Button

Control the styling of the Cancel button on the Account Management site. This button appears in the confirmation dialog when a consumer chooses to remove a payment method, cancel a subscription, or perform similar actions.

Default Values for Confirm Dialog Cancel Button

  • Text Color = rgb(0, 0, 0)
  • Color = rgb(204, 204, 204)
  • Border Color = rgb(204, 204, 204)
  • Corners Radius = 4px
  • Border Width = 1px
  • Text Size = 14px
  • Text Color on Hover = rgb(0, 0, 0)
  • Color on Hover = rgb(221, 221, 221)
  • Border Color on Hover = rgb(221, 221, 221)

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

Completion Page

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 included in consumers' receipt emails (by default). Consumers can still view their licenses via the Account Management site.

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:

  • Promotional Code 
  • 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 lets you control the behavior of the Promotional Code field (also called the Coupon Code field).

  • Show 'Promotional Code' field - Select the placement of the Promotional Code field.
    • Show - By default, 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 - The Promotional Code field does not appear anywhere in the Web Storefront. Consumers cannot enter their promotional codes, but you can apply them via the Store Builder Library, FastSpring API, or Custom Orders.
    • Show in 'Your Payment' Block - The Promotional Code field 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 - By default, the Promotional Code field appears when the Web Storefront page loads, unless the Show 'Promotional Code' field is set to Hide.
      • Display 'Enter coupon code' link which exposes coupon field when clicked - An Enter Promotional Code link appears below the products on the Web Storefront. Consumers must click the link to display the Promotional Code field.

    Storefront Level Cross-Sell Offers Position 

    This field lets you control the display of special cross-sell offers such as Extended Download Service (EDS). This setting does not apply to standard cross-sell offers, which are controlled by the next field.

    The options in this drop-down are the same as in the Cross-sell offers position field. However, this field controls the display of special cross-sells like whereas the Cross-sell offers position field controls all other (standard) cross-sell offers.

    Product, Cart, and Homepage

    The Product Page, Cart Page, and Homepage sections of the Promotions page control where cross-sells and upsells appear. Each section controls a different page in the Web Storefront. They contain 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 - Control where on the pages cross-sells are offered. By default, it is below the product which triggered the promotion. Here are examples of each of the options:
      • Below the Product which triggered the promotion:
      • Above 'Your Order' Block:
      • Inside 'Your Order' Block:
      • Below 'Your Order' Block:
      • Under 'Your Payment' Block: 
    • 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 -One upsell product appears in a popup window. 
      • First up-sell offer is displayed in the popup, rest are displayed inside the page - The first upsell configured for the product appears in a popup window. Other upsells appear inside the page.
      • First up-sell offer is displayed in the popup, all (including the first) are displayed inside the page - The first upsell product configured for the selected product appears in a popup window. That upsell also appears inside the page alongside other upsells.
    • Up-sell offers position on the page - Control the display of upsell offers. 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.
      • Product Page and Cart Page - the default value is Below ‘Your Order’ Block
      • Homepage - the default value is Below the product which triggered the promotion.

    Abandoned Cart Popup

    In the Abandoned Cart Popup section, control the optional cart abandonment popup dialog. This occurs when a consumer remains on the same page for a certain amount of time before completing the purchase, or when they choose to stay after almost abandoning the cart. This encourages consumers to purchase products before they leave the page. 

    The Abandoned Cart Popup is a Lightbox dialog that appears over the top of the main page content.

    On the Web Storefront Homepage, the Abandoned Cart Popup does not appear unless the consumer has added something to the cart. 

    Example of the abandoned cart popup dialog with an image and a coupon attached:

    • Popup displayed when visitor attempts to leave the page - When this is Enabled, the browser’s built-in warning appears when the consumer attempts to leave the page. If the consumer selects the option to stay on the page, the Popup dialog appears in an attempt to convince the consumer to complete the purchase. 
    • Popup displayed when no visitor activity detected - Control whether or not the Abandoned Cart Popup appears after a specified amount of time with no activity by the consumer. By default, the checkbox is not selected and consumer inactivity does not cause the Abandoned Cart Popup dialog to appear.
    • Display timeout - Control the amount of minutes that the Web Storefront waits with no activity from the purchaser before the Abandoned Cart Popup appears. The default is 10, thus if you have enabled the Popup displayed when visitor attempts to leave the page, the Popup appears after 10 minutes of inactivity. Click the language selector to specify a separate setting for each language.
    • Popup Title - Enter the title to be used at the top of the Abandoned Cart Popup. By default, this is left blank. Click the language selector to enter the title in each language.
    • Popup Text - Type the message that appears in the Abandoned Cart Popup. Click the language code selector to enter the text in additional language.

    • Coupon to be offered to complete the purchase - Offer consumers a promotional discount within the Abandoned Cart Popup to entice them to complete the purchase. This field may have a different value for each supported language. Enter a valid Promotional Code that will apply to the order if the consumer selects the Purchase With Discount button.
    • Popup heading alignment - Select an alignment for the heading text of the Abandoned Cart Popup. 
    • Popup text alignment - Select an alignment for the main text message in the Abandoned Card Popup.
    • Popup button alignment - Select an alignment for the action button at the bottom of the abandoned cart popup dialog. The default value is Left.
    • Popup image - Click Choose File to select an image file that will be displayed in the center of the abandoned cart popup dialog. By default, no image appears in the dialog.

Analytics Integration

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

Google Analytics

Select one of the following options:

  • Use default Google Analytics property ID from integration settings - By default, the Web Storefront uses the default Google Analytics property ID specified in Google Analytics > Setup.
  • Use custom Google Analytics property ID for this storefront - 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 - Disable Google Analytics tracking for the Web Storefront.
  • Custom Google Analytics property ID for this storefront - Enter a Google Analytics property ID to be used by this Web Storefront. This 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 - By default, the Web Storefront uses the Google Tag Manager container ID specified in Google Tag Manager Setup.
  • Use custom Google Tag Manager container ID for this storefront - Specify a custom Google Tag Manager container ID 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 - Disable Google Tag Manager integration for this Web Storefront. 

Google Tag Manager custom container ID for this storefront:

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.

Checkout

The Checkout subpage 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.

PayPal

The PayPal subpage lets you customize the PayPal logon window that appears when a consumer chooses to pay with PayPal.

  • Checkout Brand Logo - Click Choose File to select an image file to appear at the top of the PayPal login window. 
  • Checkout Brand Title - Enter a brand title to appear in the PayPal login window. You can link this logo to the Web Storefront. Click the language code selector to enter the title in each language.