Collapse Menu
Documentation
FastSpring App
Contact Support

Customize Your Web Storefront

After you create a Store and a Web Storefront, you can click the Settings button to access the configuration pages. These pages control the branding, localization, customer communication, and appearance associated with the storefront. If you have configured default settings at for your overall Store, you can override default settings within the subpages below. 

Edit your Storefront Settings

You can customize the appearance and UX of each of your Web Storefronts in the FastSpring App. 

  1. Navigate to Storefronts > Web Storefronts
  2. Click Settings on the Web Storefront you want to customize. A list of subpages appears. 
  3. Select a subpage to edit the associated information. Click on the drop-downs below to access more information on each page. 
  4. Save your changes. 

General Settings

From the General Settings tab, you can configure settings that apply to each page on your Web Storefront. 

Fill out following fields to customize your storefront settings:

  • Store Title: This title appears as the caption for browsers. Click the language selector to display the title in additional languages. 
  • Favicon: Select an image file to display in the browser tab. This may also display in the browser’s address bar. 
  • Country and Language Selector: Select the availability of your Storefront’s country and language selector:
  • Show Country/Language selector: Customers may see and change the selected language.
  • Show, but lock Country/Language selector: Customers can see the selector, but they cannot change the country or language. They are automatically selected based on the customer’s IP address. 
  • Hide Country/Language selector: The selector does not display. They are automatically selected based on the customer’s IP address. 
  • Norton Security Seal: Select whether Norton’s security seal is displayed on your Storefront. 
  • Require email to start the order: Select True to require customers to enter their email address prior to checkout. The Store will save the email address for the remainder of the checkout process. If the checkout is abandoned, you can configure the mailingListEntry.updated webhook to display the email address for remarketing. 
    2021-12-06_14-20-55.png
  • Show ‘Enter VAT ID’: Select True to enable customers to enter their tax ID for tax exemption at checkout.
  • Font: Select which font FastSpring applies to your Storefront. 

Customer Information

  • Email field: Select whether to display the email field in the right column of the checkout Storefront in addition to the payment window.
  • Newsletter Subscription Checkbox: Select the behavior of the optional opt-in checkbox labeled Stay updated via email about product updates and special offers:
    • Show, Checked: The checkbox displays on the storefront, and is selected by default. The checkbox remains deselected for customers in areas covered by the GDPR. The consumer may deselect the checkbox to opt out of the newsletter. 
    • Show, Unchecked: The checkbox displays deselected. The consumer may select the checkbox to opt in to the newsletter.
    • Hide: The checkbox does not display. Customers cannot opt in to a newsletter. 
  • Force physical address collection on all orders: Selecting Yes requires all customers to enter their physical address information at checkout. 
  • Auto / Manual subscription renewal: Select whether or not customers can opt out of automatic subscription renewals. If they opt out, the subscription becomes a Manual Renewal Subscription. This does not apply to managed subscriptions. 
    • Do not allow customers to opt out from saving payment details: FastSpring saves the payment details using a secure token. Rebills will be processed automatically. 
    • Allow, Apt-Out: The subscription automatically renews by default. Customers can clear the checkbox to opt out of automatic renewals. If the checkbox remains selected, FastSpring saves the payment details to automatically process future rebills. 
    • Allow, Opt-In: Customers manually renew their subscriptions by default. They can select the checkbox to opt in to automatic rebills. FastSpring saves tokenized payment information only if the checkbox is selected. The customer must log in to their Account Management portal and make a payment prior to the next rebill date in order to keep the subscription. 

Header Settings

The Header Settings control the appearance of the section at the top of your Web Storefront. This applies to all pages within the Storefront. 

Size and Behavior Settings

  • Height: Select the size of the header in pixels. 
  • Freeze: Select this checkbox to keep the header visible while customers scroll through your pages.  
  • Logo for Retina screens: Select a logo image file from your computer to appear in the header.
  • Logo: Select a logo image file to appear in the header when consumers use standard displays. If you have selected a dile for retina screens above, you can leave this field blank. 
  • Margins around the logo: Enter (in pixels) the amount of space to include around the logo images. 
  • Logo link: Enter the URL that logo images direct customers to when they click on the image. 
  • Text: Enter text that will be displayed in the header of the Storefront, to the right of the logo. Use the language selector to enter the text in additional languages. 
  • Text alignment: Select whether the text in the header is aligned with the left, right, or center margin.
  • Text color: Select or enter the color that the text appears in. If you enter the RGB value, click Choose to submit your choice. 

Links Settings

The Links section controls the display of hyperlink texts in the header of the header. To customize links in the footer and body of your Web Storefront, see Footer Settings and Page Settings below. 

  • Links color: Select the color of all hyperlinked text in the header. If you enter the RGB value, click Choose to submit your choice. 
  • Links color on hover: Select the color that the hyperlinked text appears when a customer hovers it with their cursor. If you enter the RGB value, click Choose to submit your choice. 
  • Links decoration: Select whether or not hyperlinks in the header are underlined by default.
  • Links decoration on hover: Select whether or not hyperlinks are underlined when a customer hovers their cursor over them. 
  • Links style: Select whether hyperlinked text appears normal or bold in the header. 
  • Link style on hover: Select whether the hyperlinked text appears normal or bold when a customer hovers their cursor over it. 

Background Settings

  • Background color: Enter the header background color. If you enter the RGB value, click Choose to submit your choice.
  • Background image: Optionally upload an image file to serve as the header background. 
  • Background image ‘repeat’ property: Select from the drop-down whether the background image should be repeated horizontally, vertically, or not at all. 
  • Header and content separation line height: Select the pixel size of the line separating the header section from the rest of the storefront. 
  • Line color: Select the color of the line that separates the header from the rest of the storefront. If you enter the RGB value, click Choose to submit your choice.

Footer Settings

The footer settings control the appearance of the bottom of your Web Storefront. The footer is identical on every page of your storefront. It appears directly above the section that identifies FastSpring as the Merchant of Record. 

Footer Text Settings

  • Color: Select the color of the text in your footer. If you enter the RGB value, click Choose. 
  • Text: Enter text to appear in the footer. You can add hyperlinks with markdown. Use the language drop-down to enter the message in additional languages. 

Footer Links

Footer links settings control the appearance of hyperlinks in your Storefront’s footer. These settings also apply to the text configured in the section above. See Header Settings above, or Page Settings below to configure links in the heading and body of the Storefront. 

  • Links color: Select the color of all hyperlinked text in the footer. If you enter the RGB value, click Choose to submit your choice. 
  • Links color on hover: Select the color that the hyperlinked text appears when a customer hovers it with their cursor. If you enter the RGB value, click Choose to submit your choice. 
  • Links decoration: Select whether or not hyperlinks in the header are underlined.
  • Links decoration on hover: Select whether or not hyperlinks are underlined when a customer hovers their cursor over them. 
  • Links style: Select whether hyperlinked text appears normal or bold in the header. 
  • Link style on hover: Select whether the hyperlinked text appears normal or bold when a customer hovers their cursor over it. 
  • Background color: Select the main color of the footer on each page. If you enter the RGB value, click Choose to submit your choice.

Page Settings

Page settings control the style of specific content within the body of each page on your Web Storefront. The body includes all content in between the header and the footer. 

Links on Pages

Links on Pages settings control the appearance of hyperlinks in the body of your Web Storefront. See Header Settings and Footer Settings above to configure links in the header and footer of your Storefront.

  • Content links color: Select the color of all hyperlinked text in the header. If you enter the RGB value, click Choose to submit your choice. 
  • Content links color on hover: Select the color that the hyperlinked text appears when a customer hovers it with their cursor. If you enter the RGB value, click Choose to submit your choice. 
  • Content links decoration: Select whether or not hyperlinks in the main part of your storefront are underlined.
  • Content links decoration on hover: Select whether or not hyperlinks are underlined when a customer hovers their cursor over them. 
  • Content links font weight: Select bold or normal to control the weight of hyperlinked text. 
  • Content links decoration on hover: Select whether to underline the hyperlinked text when a customer hovers their cursor over it. 
  • Tax Text Color: Enter the color of text that displays tax information. If you enter the RGB value, click Choose to submit your choice.

Background

The background section of page settings controls the background of the content section between the header and footer of your Web Storefront. See Header Settings and Footer Settings above to customize their background display. 

  • Background color: Select color of the background, if there is no background image. This appears behind your products and pricing information. If you enter the RGB value, click Choose to submit your choice.
  • Background image: Optionally upload an image file to serve as the background of each page. If you enter the RGB value, click Choose to submit your choice. If you select a background image, adjust the following fields: 
    • Background image ‘repeat’ property: Select from the drop-down whether the background image should be repeated horizontally, vertically, or not at all. 
    • Background image ‘size’ property: Use CSS values to control the size of teh background image, if selected. 
    • Background image ‘position’ property: Control whether the background image remains in a fixed position or moves when a customer scrolls. 
    • Background image ‘attachment’ property: Control whether the background image remains in a fixed position or moves when a customer scrolls.
    • Background image ‘clip’ property: Control the background-clip CSS property of the image. 
  • Color of the group title: Select the color of the heading text in product offers. If you enter the RGB value, click Choose to submit your choice.
  • Panel corners radius: Control how sharp or round the corners of your main content area appear. Higher values apply rounder corners. 
  • Popup windows corner radius: Control how sharp or round the corners of popup windows appear. Higher values apply rounder corners. 
  • Panel and group display title alignment: Select whether the text aligns with the left, right, or center margin for panel and group titles. Panel and group titles include: “Your Order” on the product page and “Your Payment” above the payment methods on the right panel. 
  • Panel headers background color: Select the background color of panel headers. Panel headers include “Your Order” on the product page, and “Your Payment” above the payment methods on the right panel. 
  • Panel headers text color: Select the color of the panel header text. If you enter the RGB value, click Choose to submit your choice.
  • Text Color: Select the color in which FastSpring terms and conditions display below your footer. 

Products and Prices

The Products and Prices subpage controls the sizing of product titles and icons, and the color of product prices displayed on your Web Storefront. 

Price

  • Color: Enter the color in which product prices appear. If you enter the RGB value, click Choose to submit your choice.
  • Size: Adjust the size of your product price.
  • Product options price display configuration: Select whether or not free products are labeled “FREE” in your Storefront. 

Products

  • Product title size: Select the font size (in pixels) for product titles in the following sections: homepage, secondary homepage, main product page. This does not apply to product offers. 
  • Product image size: Select the size (in pixels) to apply to product icons in the following sections: homepage, secondary homepage, main product page

Products as Offers

The following settings apply to product offers that you display on your Web Storefront. The settings applied here only apply to offers displayed on your storefront. To control the settings of all other products, see Price and Products above. 

  • Offer title size: Select the font size (in pixels) of the product title. 
  • Offer image size outside the cart: Select the size of product icons that appear with a product offer after a customer selects it.  
  • Offer image size within the cart: Select the size of product icons that appear with a product offer before a customer selects it. 

Homepage

The Homepage subpage controls the appearance and behavior of elements and features that are unique to your storefront’s homepage. 

  • Show checkboxes for adding products to the cart: Select whether or not to display a checkbox to the left of products in your product catalog. When a customer selects the checkbox, FastSpring adds the product to their cart. 
  • Product action button behavior: Select the behavior of product action buttons. These buttons appear to the right of the product and include customizable text, such as “Buy Now”. The selected behavior applies to all products on the homepage. 
  • Adds product to cart: Clicking the action button adds the product to the customer’s cart. The customer remains on the homepage with “Your Payment” displaying on the right. 
  • Opens product page: Clicking the action button opens the associated product details page, and adds the product to the cart. 
  • Hidden: Removes the action buttons. Only product prices display to the right of the product. 
  • Product title link behavior: Select the behavior when a customer clicks on a product title:
  • Open product checkout page: Opens the associated product details page, and adds the product to the cart. 
  • Show inline product description: Triggers a popup window which displays the product’s icon and the contents of the long description field. 

Buttons

The Buttons subpage controls the appearance of all buttons on your Web Storefront. Some settings can be controlled separately for each type of button.

  • Corner radius: Control the roundness of the buttons’ corners. Higher pixels result in rounder corners. 
  • Color: Select the primary colors of your buttons. This can vary by type of button. If you enter the RGB value, click Choose to submit your choice. 
  • Color on Hover: Select the color to which buttons change when a customer hovers their cursor over them. If you enter the RGB value, click Choose to submit your choice.
  • Text size: Select the size (in pixels) of the text that appears on the button. Higher values result in larger text. 
  • Text color: Select the primary color of the text that appears on the button. If you enter the RGB value, click Choose to submit your choice.
  • Text color on hover: Select the color to which the text changes when a customer hovers their cursor over the button. 
  • Border width: Select the size (in pixels) of the button’s border. Higher values result in thicker borders. 
  • Border color: If you increased the border width above, select the primary color of the button’s border. If you enter the RGB value, click Choose to submit your choice.
  • Border color on hover: If you increased the border width, select the color to which the border changes when a customer hovers their cursor over the button. If you enter the RGB value, click Choose to submit your choice.

Example:

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

Types of Buttons

  • Payment: Payment buttons control the user experience when a customer is ready to pay for their product. If you select the Short Checkout Flow checkbox, customers may also initiate the checkout flow by selecting their payment method to the right of the product catalog. 
  • Add to Cart: Add to Cart buttons display to the right of the product in the product catalog. They control when products are added or removed from the cart. You can customize the text in the “Call to Action” field of the product’s configuration page.
  • Cross-Sell: Cross-Sell buttons are action buttons associated with cross-sell offers. You can customize the text in the “Call to Action” field of the product’s configuration page.
  • Up-Sell: Up-Sell buttons are action buttons associated with upsell offers. You can customize the text in the “Call to Action” field of the product’s configuration page.
  • ‘Download Now’ and ‘View Instructions’: These buttons appear on the completion page after a successful purchase. Customers can click these buttons to receive their fulfillments, or instructions for getting started with your product. The fulfillments are configured at the product level. 
  • Manage Subscription: Manage Subscription buttons appear in the customer’s Account Management page, and allow customers to pause, cancel, resume, and upgrade subscriptions, depending on your Store’s configuration. These settings only apply when customers access their portal through the Web Storefront for which the settings are configured. 
  • Manage Your Orders Links in customer notifications target your default web storefront: If you want to customize those settings, make sure the links are associated with the default storefront, and apply the changes there. 
  • Subscription ‘Use Payment Method’: When a customer adds a new payment method in their Account Management portal, they can click Use This to change the payment details of an active subscription. This section controls the appearance of that button. 
  • Add Payment Method Button: This section controls the Add Payment Method button displayed above. This also displays on the Account Details and Payment Methods tab of the Account Management site. Customers click this button to input new card details for existing subscriptions.
  • Save Payment Details: After a customer adds a new payment method in the Account Management site, this button appears. 
  • Manage Payment Method: Control the styling of the Manage button on the Account Management site. Customers may pause, cancel, or upgrade existing subscriptions, depending on their configuration. This button appears next to each payment method on the Account Details and Payment Methods tab. 
  • Confirm Dialog OK: Control the styling of the Yes button in the Account Management site. These buttons appear on confirmation pages when a customer makes changes to their existing subscriptions via the Manage button. 
  • Confirm Dialog Cancel: Control the styling of the Cancel button in the Account Management site. These buttons appear on confirmation pages when a customer makes changes to their existing subscriptions via the Manage button.

Completion Page

The checkbox labeled Enable licenses on completion page controls whether or not configured fulfillments appear on the Completion page following a successful purchase. 

Customers can also access their fulfillments through their receipt emails, or their account management portal

Promotions

The Promotions subpage controls the behavior of your Web Storefront’s promotional features. This includes promotional codes, cross-sells, upsells, and popup offers when a customer does not make a purchase immediately. 

Promotional Code

This section controls the behavior of the coupon code field at checkout. If displayed, customers can input coupon codes that you configure to receive a discount at checkout. 

  • Show ‘Promotional Code’ field: Select the placement of the coupon code field:
    • Show: The coupon code field appears below the products in the homepage, product page and cart page (displayed above).
    • Hide: The coupon code field does not appear in the Web Storefront. Customers cannot enter promotional codes, however you can apply them from the Store Builder Library, FastSpring API, or by creating a Custom Order
    • Show in ‘Your Payment’ Block: The coupon code field appears in the ‘Your Payment’ block.
  • ‘Promotional Code’ display type: If you configure the promotional code field to display on your Web Storefront, select the conditions in which it displays:
  • Display coupon fields right away: The coupon code field appears when the Web Storefront loads.
  • Display ‘Enter coupon code’ link which exposes coupon field when clicked: An "Enter Promotional Code" link appears below the products. Customers click the link to access the coupon code field. 

Product Page

The Product Page subpage controls the positioning of cross-sell and upsell offers in the product catalog. This placement is in relation to the products which trigger the offers.  

  • Storefront level Сross-sell offers position: Control how FastSpring displays the Extended Download Service. This setting does not apply to standard cross-sell offers.
  • Cross-sell offers position: Control where cross sells display in reference to the product that triggers the promotion. 
  • Where up-sell offers are displayed: If upsells are enabled in your Store, this field controls whether they appear on the product page, on a popup window, or both.
  • Up-sell offers position on the page: Control the location of upsell offers. If you selected to display an up-sell offer on a popup window above, the upsell will appear in the popup instead of this setting, by default. 

Abandoned Cart Popup

If you plan to use a cart abandonment popup dialog, you can control the appearance in this section. This will display when a customer leaves the page open in their browser without completing a purchase. This only appears if there are items in the cart.

  • Popup displayed when visitor attempts to leave page: If enabled, the browser’s built-in warning appears when the customer attempts to close the page. If the customer stays on the page, the Popup dialog appears. 
  • Popup displayed when no visitor activity detected: If enabled, the popup appears after a configured amount of time with no activity from the customer. 
  • Display timeout: Control the number of minutes of no activity that triggers the popup. Click the language drop-down to apply different timeouts for specific regions. 
  • Popup Title: Enter the title to be used at the top of the Abandoned Cart Popup. Use the language selector to enter it in additional languages.
  • Popup Text: Enter the message that appears in the Abandoned Cart Popup. Use the language selector to enter it in additional languages.
  • Coupon to be offered to complete the purchase: Optionally apply an existing coupon code to offer consumers a discount when the popup appears. Use the language selector to enter it in additional languages.
  • Popup heading alignment: Select the alignment of the heading text. 
  • Popup text alignment: Select the alignment of the main message. 
  • Popup bottom alignment: Select the alignment of the action button at the bottom of the popup. 
  • Popup image: Select an image file that will display at the center of the popup. 

Analytics Integration

From the Analytics Integration subpage, you can customize the integration between your Web Storefront and your Google Analytics account. 

Google Analytics

  • Use default Google Analytics property ID from integration settings: The Web Storefront uses the default Google Analytics property ID. 
  • Use custom Google Analytics property ID for this storefront: Specify a custom property ID in the field below. This will be used by the Web Storefront. 
  • Do not enable Google Analytics for this storefront: Disable Google Analytics tracking for all activity on this 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 you are using the Google Analytics property ID. 

Google Tag Manager Integration Behavior

  • Use default Google Tag Manager container ID from integration settings: The Web Storefront uses the default Google Tag Manager container ID. 
  • Use custom Google Tag Manager container ID for this storefront: Specify a custom container ID in the field below. This will be used by the Web Storefront. 
  • Do not run Google Tag Manager for this storefront: Disable the Google Tag Manager integration for this Web Storefront. 
  • Google Tag Manager custom container ID for this storefront: Enter a container ID to be used by this Web Storefront. This only applies if you are using the Google Analytics property ID. 

Checkout

If gift purchases are enabled in your Store, you can control the availability of gift purchases for this Web Storefront. Select Enable Gift Purchases to allow customers to purchase on behalf of a recipient in this Storefront. 

PayPal

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

  • Checkout Brand Logo: 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. Use the language code selector to enter the title in each language.