Customizing the Look and Feel of the Web Storefront

Last modified January 15, 2018

This article applies to Contextual Commerce. (Looking for Classic Commerce documentation?)

You can customize the look and feel of a Web Storefront by clicking the Storefronts menu; the Web Storefronts tab will be selected by default.  Click the SETTINGS command for the Web Storefront you want to customize.

Example of the Storefronts menu
Example of the Web Storefronts tab of the Storefronts menu, with the SETTINGS command highlighted for a particular Web Storefront

Tutorial Video

Check out our tutorial video on adding your logo to a Web Storefront:   How to Add Your Logo to a Web Storefront.


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

Illustration of various customizable properties
 

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

General Settings

The General Settings page contains some controls that affect all pages of the Web Storefront, as well as some controls related to the purchaser's e-mail address, the newsletter opt-in, and the optional Company field for use by purchasers.

General Settings section of the General Settings page

  • Store Title - Enter the title that you want displayed as the caption for the browser tab or window.  If your Web Storefront supports multiple languages, be sure to click the language code selector and select the desired language, and enter the title in the corresponding language as well.
  • Favicon - Click Choose File to browse your local computer or network and select an image file (usually a .png or .ico file) to be displayed next to the browser tab title (as well as in the browser's address bar, where applicable).
  • 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 will be 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 will not be displayed at all. The country and language will be selected automatically based on the customer's location (from their IP address) or using override settings available via theMOREmenu 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 will be displayed on the Web Storefront, as well as the size of the seal if displayed.
  • Require email to start the order - If you select the True check box, purchasers visiting the Web Storefront will encounter a Lightbox popup and will be forced to enter an e-mail address (with a valid format) before they can proceed. The popup cannot be closed or canceled. The email address entered by the purchaser will be retained 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. The email address will be "recognized" in a mailingListEntry.updated webhook in the event of abandonment.

    Example of the required email field when selecting the True check box for Require email to start the order
  • Show 'Enter VAT ID' - If you select the True check box, purchasers whose country is in the EU will see the Enter VAT ID link in the Your Payment section on the right-hand side of the page. Clicking the link will open a Lightbox popup window allowing the purchasers to enter their VAT IDs. If you do not select this check box, that link will not be shown, and purchasers in the EU will be unable to enter a VAT ID and avoid paying VAT.

    Example of the Enter VAT ID link in the Your Payment section of the Web Storefront pagered arrow Example of the VAT Information popup window

     

Font section of the General Settings page

  • Font - Click the drop-down and select the font to be used throughout the Web Storefront. The default option will use choose one of three fonts depending on what fonts are installed on the purchaser's computer.


     
  • Email field - Click the drop-down and choose whether the Email field will be displayed 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 check box labeled Stay updated via email about product updates and special offers:
    • Show, Checked - This option will cause the check box to be displayed, and selected by default. The purchaser may uncheck the check box to opt out.
    • Show, Unchecked - This option will cause the check box to be displayed but not selected. The purchase may choose to select the check box to opt in.
    • Hide - Selecting this option prevents the check box from being displayed. It will be recorded 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 option is selected by default. The Company field will not be displayed during the order process, and customers will not have a field designed to accept their company name. 
    • Enable company field - This option will cause the Company field to appear in the Payment Information popup window during the order process. The field will be optional.
    • Enable the company field and make it required - This option will cause the Company field to appear in the Payment Information popup window during the order process, and all purchasers will be required to enter a value in the Company field of the payment window. In that case, the purchase cannot be processed with the Company field empty or blank.
  • Force physical address collection on all orders - By default, the Yes check box is not checked, and purchasers will not be required to enter a physical address except when ordering one or more physical products requiring shipment. If you select the Yes check box, all customers will be 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.

    For more information about manual subscription renewals, please see Manual Renewal Subscriptions.
    • Do not allow customers to opt out from saving payment details - This option is selected by default. When a subscription is purchased, payment details will always be saved (using a secure payment token) and any renewals will always be automatic.
    • Allow, Opt-Out (details are saved by default, customers can opt out during the purchase) - When this option is selected, the presence of any non-managed subscription in the cart will cause a check box to be displayed whereby customers opt out of automatic renewals. The check box will be selected by default, and customers who want to opt out must clear the check box. If the check box is not cleared, customers' payment details will be saved using a secure payment token and any renewals will always be automatic.
    • Allow, Opt-In (details are not saved by default, customers can opt in during the purchase) - When this option is selected, the presence of any non-managed subscription in the the cart will cause a check box to be displayed whereby customers can opt in to automatic renewals. The check box will not be selected by default, and customers who want to opt in must select the check box. If the check box is not selected, customers' payment details will not be saved, and any renewals will always be manual.
       
    Example of the check box for opting out of automatic renewals

     

back to list


Header Settings

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.

Size and Behavior and Logo sections of the Header Settings page

  • Height - Click the drop-down and select the size of the header, in pixels. A larger number will result in a taller / larger header section at the top of each page.
  • Freeze - Selecting this check box causes the entire header section to remain visible at the top of the page when a purchaser scrolls up or down the page.
  • Logo for Retina screens - Click Choose File and browse to and select a logo file on your network or your local computer, to be included in the header when the Web Storefront is viewed on a Retina display.
  • Logo - Optionally click Choose File and browse to and select a logo file on your network or your local computer, to be included in the header when the Web Storefront is viewed on any display that is not a Retina display. If you have specified a Logo for Retina screens above, you may choose to leave this field blank, and the specified logo file will be scaled for use on non-Retina displays.
  • 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 will be applied around the logo regardless of whether the Web Storefront is viewed on a Retina display or a non-Retina display. More information on how to set this property can be found at http://www.w3schools.com/css/css_margin.asp.
  • Logo link - Optionally specify a Web address for a hyperlink to be used when a purchaser clicks the logo image in the header.

Text section of the Header Settings page

  • 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). If your Web Storefront supports more than one language, be sure click the language code drop-down and select each language, and enter the message in each language.
  • Text alignment - Click the drop-down and select the desired text alignment for the contents of the Text field above (if any). This does not control the placement of the text in the header of the Web Storefront; only its alignment relative to the area where the text is displayed.
  • Text color - Click the drop-down and select or enter the desired color for the text (if any) that will be displayed 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 section of the Header Settings page

The Links section of the Header Settings page provides options that control the display of clickable hyperlink text / descriptions for any links displayed in the header of the Web Storefront. Specifically, any hyperlinks included in the Text field above will be 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 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 color on hover - Click the drop-down and select or enter the color of the hyperlink text to be used while a purchaser hovers the mouse cursor over any links included in the header of the Web Storefront. 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 won't 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 any hyperlinks included in the Web Storefront header to be underlined while a purchaser 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 will 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 will use bold text while 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 and Separation Line sections of the Header Settings page

  • 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 to and select an image file from your network or your local computer to be rendered instead of a solid background color for the header.
  • Background image 'repeat' property - If you have selected an image in the Background image field above, you can click the drop-down and specify whether the image will 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 larger value will result 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


Footer Settings

The Footer Settings page contains options that let you control the appearance of the footer section that appears at the bottom of every page in the Web Storefront.

Text section of the Footer Settings page

  • Color - Click the drop-down and select or enter the color that will be used for 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 can be found at http://daringfireball.net/projects/markdown/syntax#link. If your Web Storefront supports more than one language, be sure to click the language code drop-down and select each language, and enter the message in each language.

Links and Background sections of the Footer Settings page

The Links section of the Footer Settings page provides options that control the display of clickable hyperlink text / descriptions for any links displayed in the footer of the Web Storefront. Specifically, any hyperlinks included in the Text field above will be 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 while a purchaser 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 Web Storefront footer to be underlined by default, click the drop-down and select Underline.
  • Links decoration on hover - If you do not want any hyperlinks included in the Web Storefront footer to be underlined while a purchaser 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, any hyperlinks included in the Web Storefront footer will use normal text (not bold) while a purchaser 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 will fill 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 appearance of links and certain content sections in the main portion of each page of the Web Storefront, between the header and footer.

Links section of the Page Settings page

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 to be used for 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 color on hover - Click the drop-down and select or enter the color to be used while the purchaser 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 will not be 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 will be underlined while the purchaser 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 will not be bold. If you want the links to use bold text, click the drop-down and select Bold.
  • Content links font weight on hover - If you want the text / description of hyperlinks to be bold while the purchaser hovers the mouse cursor over the links, click the drop-down and select Bold.

Background section of the Page Settings page

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 no Background image has been specified. 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 and browse to and select an image file from your network or your local computer to be rendered in the background of the main content area.
  • Background image 'repeat' property - If you have selected an image in the Background image field above, you can click the drop-down and specify whether the image will be repeated horizontally or vertically, or not at all. The default setting is No repeat.
  • Background image 'size' property - If you have selected an image in the Background image field above, you can control its size by entering the CSS length, percentage, contain or cover values for 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 - If you have selected an image in the Background image field above, you can control its position relative to the main content area by entering a value for 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 - If you have selected an image in the Background image field above, this field controls whether or not the background image will scroll up and down with the rest of the Web Storefront page.
    • If you select Scroll with content, the background image will move up or down when the purchaser scrolls up or down on the page. In effect, the visible portion of the image will not change, so the purchaser could not scroll down past the bottom of it.
    • If you select Stay in a fixed position, the background image will remain static when the purchaser scrolls up or down on the page. In effect, the background of the page will stay 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.

Offer Groups and Panels and Popups section of the Page Settings page

  • 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 up-sells. 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 larger value will result 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 larger value will result 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 that appears on the right-hand side of the Web Storefront when one or more products have been selected.
  • 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(0, 3, 51).

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.

Price and Products sections of the Products and Prices page

  • 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 will be 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 up-sell groups).. The default value is 18px; selecting a larger value will result 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 up-sell groups). The default value is Large (128x128).

Products as Offers section of the Products and Prices page

  • Offer title size - Click the drop-down and select the size (in pixels) to be used for the product title text when a product is displayed as a cross-sell or up-sell offer. The default value is 16px; selecting a larger value will result 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 when displayed as part of a cross-sell or up-sell offer, and the product has not been selected / added to the cart. 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 when a product is displayed as part of a cross-sell or up-sell offer, and the product has been selected / added to the cart. The default value is Medium (96x96).

back to list


Homepage

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

Homepage settings page

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

    A Homepage with check boxes for adding products to the cart
  • 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 purchaser 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.


    Example of product title links and product action buttons

back to list
 

Buttons

The Buttons page contains options for controlling the appearance of buttons throughout the Web Storefront. For some of the settings that can be controlled separately for different types of buttons, such as Corners radius, it is recommended - but not required - that you use the same values for all button types, to create consistency throughout the Web Storefront.

Many of the options are repeated 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 is repeated in all sections. Details about unique options and the default values for each section are provided below.

  • Corners radius - These fields control the squareness or roundness of the corners for various buttons in the main content area. Entering 0px will result in square corners; entering a larger value will result in rounder corners.
  • Color - Click the drop-down and select or enter the main 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 that will be used for buttons while a purchaser hovers the mouse cursor over them. If you enter the RGB values, click Choose to submit your choices. Typically, the default values are designed to 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 larger value will result in larger button text.
  • Text color - Click the drop-down and select or enter the main 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 that will be used for button text while 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 - so by default, most button text will not change color while the cursor hovers over the button.
  • Border width - Click the drop-down and select the size (in pixels) of the border that will be rendered around the buttons. For most buttons, the default value is 0px, which means no border is rendered by default. Selecting a larger value will result in a thicker border.
  • Border color - Click the drop-down and select or enter the main 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 main color for buttons. Also, since the Border width is 0px by default, changing the Border color will have no effect on most buttons unless you also increase the Border width.
  • Border color on hover - Click the drop-down and select or enter the color that will be used for the border around buttons while 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.

Example of a payment button with 8px Corner radius, 3px Border width, and Border color black.


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

  • Short Checkout Flow - The Yes check box is selected by default. This allows purchasers to initiate checkout by simply clicking their desired payment method.
    The images below illustrate behavior when this check box is not selected. If you clear this check box, Credit / Debit Card will be selected by default, and purchasers must click the Enter Payment Details button to initiate check out. Purchasers who want to use PayPal Checkout must first select that option and then click Place Your Order.

    Example of disabling the Short Checkout Flow when the purchaser uses a credit card
    Example of disabling the Short Checkout Flow when the purchaser uses Paypal

Default values for the Payment Buttons section:

Field Name Default Value
Corners radius 4px
Color rgb(240, 173, 78)
Color on hover rgb(236, 151, 31)
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(240, 173, 78)
Border color on hover rgb(236, 151, 31)



'Add to Cart' Button section of the Buttons page

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

Field Name Default Value
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)



'Cross-Sell' Button section of the Buttons page

The 'Cross-Sell' Button section of the Buttons page contains options that control the appearance of product action buttons when they are rendered 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 Dashboard.

Field Name Default Value
Corners 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)



'Up-Sell' Button section of the Buttons page

The 'Up-Sell' Button section of the Buttons page contains options that control the appearance of product action buttons when they are rendered 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 Dashboard.

Field Name Default Value
Corners 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 section of the Buttons page

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 that may be included on the Completion Page following a successful purchase.

Field Name Default Value
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' section of the Buttons page

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 - but only when the site is accessed 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 will only have an effect when customers visit the account management site via a special URL specifically targeting that Storefront (e.g. provided by you). 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.

Example of the Manage Subscription buttons

*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 Name Default Value*
Text color rgb(0, 3, 51)
Color rgb(0, 15, 255)
Border color rgb(0, 12, 204)
Corners radius 4px
Border width 1px
Text size 14px
Text color on hover rgb(0, 3, 51)
Color on hover rgb(230, 230, 230)
Border color on hover rgb(173, 173, 173)



Subscription 'Use Payment Method' section of the Buttons page

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

Example of the Update payment method dialog on 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 Name Default Value*
Text color rgb(0, 15, 255)
Color rgb(91, 192, 222)
Border color rgb(70, 184, 218)
Corners radius 4px
Border width 1px
Text size 14px
Text color on hover rgb(0, 15, 255)
Color on hover rgb(49, 176, 213)
Border color on hover rgb(38, 154, 188)



'Add Payment Method' section of the Buttons page

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

Example of the Add Payment Method button on 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 Name Default Value*
Text color rgb(0, 15, 255)
Color rgb(92, 184, 92)
Border color rgb(76, 174, 76)
Corners radius 4px
Border width 1px
Text size 14px
Text color on hover rgb(0, 15, 255)
Color on hover rgb(68, 157, 68)
Border color on hover rgb(57, 132, 57)



'Save Payment Details' section of the Buttons page

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

Example of the 'Save Payment Details' button on 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 Name Default Value
Text color rgb(0, 15, 255)
Color rgb(240, 173, 78)
Border color rgb(238, 162, 54)
Corners radius 4px
Border width 1px
Text size 14px
Text color on hover rgb(0, 15, 255)
Color on hover rgb(236, 151, 31)
Border color on hover rgb(213, 133, 18)



'Manage Payment Method' section of the Buttons page

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

Example of the 'Manage Payment Method' buttons on 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 Name Default Value
Text color rgb(0, 3, 51)
Color rgb(0, 15, 255)
Border color rgb(0, 12, 204)
Corners radius 4px
Border width 1px
Text size 14px
Text color on hover rgb(0, 3, 51)
Color on hover rgb(230, 230, 230)
Border color on hover rgb(173, 173, 173)



'Confirm Dialog OK' section of the Buttons page

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

Example of the Confirm dialog on 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 Name Default Value*
Text color rgb(0, 15, 255)
Color rgb(92, 184, 92)
Border color rgb(76, 174, 76)
Corners radius 4px
Border width 1px
Text size 14px
Text color on hover rgb(0, 15, 255)
Color on hover rgb(68, 157, 68)
Border color on hover rgb(57, 132, 57)



'Confirm Dialog Cancel' section of the Buttons page

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

Example of the Confirm dialog on 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 Name Default Value*
Text color rgb(0, 3, 51)
Color rgb(0, 15, 255)
Border color rgb(0, 12, 204)
Corners radius 4px
Border width 1px
Text size 14px
Text color on hover rgb(0, 3, 51)
Color on hover rgb(230, 230, 230)
Border color on hover rgb(173, 173, 173)



back to list

 

Completion Page

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

Completion Page settings

If you select the check box labeled Enable licenses on completion page - which is selected by default -  licenses that have been configured in the product's Fulfillment section can be displayed on the Completion Page following a successful purchase. If you clear this check box, licenses will not be included on the Completion Page. In that case, purchasers can still view their purchased licenses via the purchaser-facing Order Management page.

back to list
 

Promotions

The Promotions page contains options that let you control the Web Storefront behavior of promotions such as the Promotional Code field, cross-sells, and up-sells, as well as the optional pop-ups to appear when purchasers abandon or leave the Web Storefront without making a purchase.

Promotional Code section of the Promotions page

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 option is selected by default. The Promotional Code field will appear 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 will not be displayed anywhere in the Web Storefront. Purchasers will be unable to enter promotional codes, but promotional codes can still be applied via the API.
    • Show in 'Your Payment' Block - If you select this option, the Promotional Code field will not be displayed below the products on any page of the Web Storefront; instead, it will be included in the Your Payment block on the right-hand side of the page.
  • 'Promotional Code' display type - This field controls whether or not the PromotionalCode 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 will be displayed when the Web Storefront page loads, unless Show 'Promotional Code' field is set to Hidden.
    • Display 'Enter coupon code' link which exposes coupon field when clicked - If you select this option and have not chosen to hide the Promotional Code field, purchasers will see an Enter Promotional Code link below the products on the Web Storefront, which must be clicked to display the Promotional Code field.
      Example of 'Promotional Code' display type - Display 'Enter coupon code' link that exposes coupon field when clicked

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 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, whereas 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 up-sells are offered. 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.

Example of the cross-sell and up-sell controls on the Promotions page

  • Cross-sell offers position - This field lets you control where on the pages cross-sells will be offered. The default value is Below the product which triggered the promotion. Examples of each of the options are provided here:


Value Example
Below the product which triggered the promotion
Example of showing cross-sells below the product which triggered the promotion
Above 'Your Order' block
Example of showing cross-sells above the 'Your Order' block
Inside 'Your Order' block
Example of showing cross-sells inside the 'Your Order' block
Below 'Your Order' block
Example of showing cross-sells below the 'Your Order' block
Under 'Your Payment' block
Example of showing cross-sells under the 'Your Payment' block
Do not show cross-sells
Example of selecting the Do not show cross-sells option
  • Where up-sell offers are displayed - If up-sell offers are shown (see Up-sell offers position on the page), this field lets you control whether up-sell offers are displayed inside the selected page, via a pop-up window, or both.
    • All inside the page - This is the default value. All up-sell products offered will be displayed inside the selected page.
    • First up-sell offer is displayed in the popup, rest are discarded - If you select this option, only one up-sell product will be offered, regardless of how many are configured for the selected product. The up-sell will be offered 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 will cause the first up-sell product configured for the selected product to be offered in a popup window. Any other up-selling offerings for the selected product will be displayed inside the page.
    • First up-sell offer is displayed in the popup, all (including the first) are displayed inside the page - Selecting this option will cause the first up-sell product configured for the selected product to be offered in a popup window. The same first up-sell will also be offered - along with any other up-sell 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 with regard to the display of up-sell offers rather than cross-sell offers. Note, however, that the first up-sell offer for the selected SKU may be displayed in a popup window instead of using the setting here, depending on the option selected for 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

The Abandoned Cart Popup section of the Promotions page contains options that let you control the optional popup dialog that appears when a purchaser attempts to abandon the cart but then chooses to stay, or remains on the same page of the Web Storefront for a specified period of time without completing a purchase. The goal of these settings to is to help reduce the rate at which customers 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 will 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 will never appear.
  Click here for an example of the abandoned cart popup dialog on a Web Storefront

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 check box is selected, the browser's built-in warning about leaving the page will appear when the customer attempts to close the browser tab; if the customer clicks the option to stay on the page, then the popup dialog will be displayed. The purpose of the dialog is to convince the customer to reconsider and complete the purchase. If this check box is not selected (which is the default value), no alert message will be displayed when the cart is abandoned.
  • Popup displayed when no visitor activity detected - The Enabled check box here controls whether or not the abandoned cart popup dialog will be displayed after a specified period of time with no activity by the buyer. If this check box is not selected (which is the default value), no abandoned cart popup dialog will be displayed due to inactivity.
  • Display timeout - This field can be set to have different values depending on the purchaser's selected language. You can optionally click the drop-down language selector and specify a separate setting for each supported language; English is selected by default. The field controls the amount of time, in minutes, that the Web Storefront page will wait with no activity from the purchaser before the abandoned cart popup dialog will be displayed. The default value is 10, meaning that if the corresponding Enabled check box is selected above, the abandoned cart popup dialog will be displayed after 10 minutes of inactivity by the purchaser.
  • 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 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, be sure to click the language code selector and enter the title in each language.
  • Popup Text - Enter the text of the message that will be displayed in the abandoned cart popup dialog. If your Web Storefront includes more than one language, be sure to click the drop-down for the language code selector and enter the message in each language.
     

The Abandoned Cart Popup section, part 2

  • 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, to entice them to complete the purchase. As with the Display timeout, this field can have a different value for each supported language, and English is selected by default. Enter a valid coupon code (created under Coupons from the main menu), which will 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 alignment that will be used 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 alignment that will be used 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 alignment that will be used 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 to and select an image file from your network or your local computer, to be displayed in the center of the abandoned cart popup dialog. By default, no image will be displayed.


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 section of the Analytics Integration page

  • Google Analytics Integration Behavior - Three options are available for this field:
    • Use default Google Analytics property ID from integration settings - This value is selected by default. When this value is selected, the Web Storefront will use 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 will allow 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 will disable Google Analytics tracking for the Web Storefront.
  • Custom Google Analytics property ID for this storefront - Optionally enter a Google Analytics property ID that will be used by this Web Storefront. This will only be used if Use custom Google Analytics property ID for this storefront is selected above.


Google Tag Manager section of the Analytics Integration page

  • Google Tag Manager Integration Behavior - Three options are available for this field:
    • Use default Google Tag Manager container ID from integration settings - This value is selected by default. When this value is selected, the Web Storefront will use 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 will allow 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 will disable 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 that will be used by this Web Storefront. This will only be used if Use custom Google Tag Manager container ID for this storefront is selected above.

back to list


PayPal

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

PayPal page

  • Checkout Brand Logo - Optionally click Choose File and browse to and select an image file on your network or your local computer that will be displayed at the top of the PayPal logon window, as shown in the example below. No image is selected or displayed by default.
  • Checkout Brand Title - Optionally enter a brand title that will appear in the PayPal log on window in the context of the link to cancel and return to the Web Storefront, as shown in the example below. This field is blank by default. If your Web Storefront includes multiple languages, be sure to click the drop-down select for the language code and enter the brand title in each language.

    Example of the Checkout Brand Logo and Checkout Brand Title on the PayPal logon page

back to list