Customizing the Look and Feel of a Popup Storefront

Last modified July 11, 2018

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

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

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

Previewing your changes

After making changes to the Popup Storefront's settings, you can use the PREVIEW command to see a current example of how your Storefront will look when implemented on a live website.
 

Example of the details card for a Popup Storefront, with the PREVIEW command highlighted

Example of a PREVIEW for a Popup Storefront

Important

The preview popup will simulate all of the settings of the selected Storefront so that you can see the effects live as you are making changes.

The preview always uses a fictitious, subscription-based example product priced at USD $14.95 monthly.

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

Illustration of a Popup Storefront

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

Example of a Popup Storefront


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


General Settings

The General Settings page contains options that let you control whether or not the purchaser must enter an e-mail address prior to the appearance of the payment information fields, as well as the default behavior of the Country and Language selector.

General Settings page

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


     
  • Country and Language selector - Click the drop-down and select the desired behavior for the Country and Language selector.
    • Show Country/Language selector - This value is selected by default. This option lets customers see and change the Country and Language selector.
    • Show, but lock Country/Language selector - If you select this option, purchasers will be able to see the Country and Language selector, but not change it. The country and language will be selected automatically based on the customer's location (from their IP address) or using override settings available via the MORE menu for this Storefront on the list of Popup Storefronts.
    • Hide Country/Language selector - If you select this option, the Country and Language selector will not be displayed at all. The country and language will be selected automatically based on the customer's location (from their IP address) or using override settings available via the MORE menu for this Storefront on the list of Popup Storefronts.


Show 'Enter VAT ID' and Show Norton Secured Seal sections of the General page

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

    Example of a Popup Storefront for an EU customer with the Enter VAT ID link highlighted   Example of a Popup Storefront for an EU customer with the VAT ID field displayed
     
  • Show Norton Secured Seal - If you select the True check box, the Norton Secured seal will be displayed below the lower left-hand corner of the Popup Storefront window, as shown below. If the True check box is not selected, the Norton Secured seal will not be displayed.

    Example of a Popup Storefront with the Norton Secured seal highlighted
     

back to list
 

Checkout

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

Customer Information section of the Checkout page 

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


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

    Example of requiring the purchaser's physical address
  • 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.

       

  • Checkout logo and title - Click the drop-down and select an option to control the heading of the Popup Storefront.
    • Show the predefined logo and all product titles in the order - This is the default value. When this option is selected, the logo image specified below and the title entered in the Checkout title field will be displayed at the top of the Popup Storefront.
    • Show the first product's icon and all product titles in the order - Selecting this option will cause the icon of the first product in the cart to be rendered at the top of Popup Storefront, in place of the logo defined below. The name of each product in the cart will also be listed instead of the Checkout title value below.

      Example of showing the first product's icon and all product titles in the order
    • Show the predefined logo and checkout title - Selecting this option will cause the logo and Checkout title specified below to be displayed at the top of the Popup Storefront, without any product information being displayed.
    • Show the predefined logo only - Selecting this option will cause only the logo specified below to be displayed at the top of the Popup Storefront. No title text will be displayed; not even any value entered in the Checkout title field below.
  • Checkout title - Optionally enter a title that can be displayed at the top of the Popup Storefront just under the logo, depending on the option selected in the Checkout logo and title field above. If your Popup Storefront includes more than one language, be sure to click the drop-down selector for the language code and enter the title in each language. This field is blank by default.
  • Logo for Retina screens - Click Choose File and browse to and select a logo file on your network or your local computer, to be included in the header when the Popup Storefront is viewed on a Retina display. The logo specified here will not be displayed if the option to display the first product's icon is selected in the Checkout logo and title field above. In case you need to remove a logo image from this field completely, select the Remove check box, and the logo will be removed when you save your change. No logo image is specified here by default.
  • Logo for regular screens - Optionally click Choose File and browse to and select a logo file on your network or your local computer, to be included in the header when the Popup Storefront is viewed on any display that is not a Retina display. If you have specified a Logo for Retina screens above, you may choose to leave this field blank, and the specified logo file will be scaled for use on non-Retina displays. The logo specified here will not be displayed if the option to display the first product's icon is selected in the Checkout logo and title field above. In case you need to remove a logo image from this field completely, select the Remove check box, and the logo will be removed when you save your change. No logo image is specified here by default.
  • Logo placement - Click the drop-down and select the desired placement for the image selected in Checkout logo and title.
    • Place the logo inside the popup - The logo will appear as part of the popup dialog, below the header background area, as shown here:

      Example of a Popup Storefront with the logo placed inside the popup

    • Place the logo overlapping the popup and the area over it - The logo will appear above the popup, partially overlapping it with the header background behind the logo image, as shown here:

      Example of a Popup Storefront with the logo overlapping

back to list

Promotions

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

Promotions page

  • Show 'Promotional Code' field -  The Show check box is selected by default. If you uncheck this check box, the Promotional Code field for coupon codes will not be displayed at all in the Popup Storefront.
  • 'Promotional Code' display type - Click the drop-down and select the desired behavior for the Promotional Code field.
    • Display coupon fields right away - This option is selected by default. This allows the purchaser to enter a coupon code directly on the Popup Storefront, without having to first click the Enter Promotional Code link.
    • Display 'Enter Coupon Code' link which exposes coupon field when clicked - If this option is selected, purchasers must click the Enter Promotional Code link (illustrated below) in order to expose the Promotional Code field so that a coupon code can be entered and applied.

      Example of the Enter Promotional Code link

back to list

Margins and Paddings

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

Margins and Paddings page

  • Checkout title top margin - Click the drop-down and select the top margin (in pixels) that will be rendered above the checkout title. The default value is 10px; selecting a larger value will result in a larger margin above the checkout title.
  • Checkout title bottom margin - Click the drop-down and select the bottom margin (in pixels) that will be rendered below the checkout title. The default value is 10px; selecting a larger value will result in a larger margin below the checkout title.

    The following image illustrates a Popup Storefront with the Checkout title top margin and Checkout title bottom margin each set to 25px; notice the extra space above and below the example title Sudden Impact Checkout.

    Example of a Popup Storefront with the the title top and title bottom margins set to 25 px 
  • Order pricing line bottom margin - Click the drop-down and select the bottom margin (in pixels) that will be rendered below the order pricing line. The default value is 5px; selecting a larger value will result in a larger margin below the order pricing line.

    The following image illustrates a Popup Storefront with the Order pricing line bottom margin set to 25px; notice the extra space below the example order total line Your total is $69.95.

    Example of setting the Order pricing line bottom margin to 25px 
  • Order pricing whole block bottom margin - Click the drop-down and select the size of the margin (in pixels) that will be rendered below the entire block of order pricing fields, including the optional Promotional Code field. The default value is 5px; selecting a larger value will result in a larger margin below the order pricing block.

    The following image illustrates a Popup Storefront with the Order pricing whole block bottom margin set to 25px; notice the extra space that appears below the order pricing block (in this case, below the optional Promotional Code field).

    Example of setting the Order pricing whole block bottom margin to 25px 

back to list

Colors and Styling

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

Corner Radius and Header section of the Colors and Styling page

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

    The image below illustrates a Popup Storefront with the Window set to a corner radius of 0px (square corners), the Buttons set to a corner radius of 25px (very round corners), and the color yellow (rgb(255, 255, 0)) set as the Header Background Color.

    Example of Window corner radius 0px, Button corner radius 25px, and Header Background Color yellow

Checkout Text and Pricing Block sections of the Colors and Styling page

  • Checkout title color - Click the drop-down and select or enter the color that will be used for the checkout title font on the Popup Storefront. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(0, 0, 0) (black). See the example image illustrating the checkout title below.
  • Checkout font size - Click the drop-down and select the size (in pixels) of the font that will be used for the checkout title. The default value is 20px.
  • Checkout title font weight - By default, the checkout title will use a normal font (not bold). If you want the checkout title to use bold text, click the drop-down and select Bold.
  • Price line color - Click the drop-down and select or enter the color that will be used for the price line in the Popup Storefront. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(169, 68, 66). See the example image illustrating the price line below.
  • Price line font size - Click the drop-down and select the size (in pixels) of the font that will be used for the price line. The default value is 18px.
  • Price line font weight - By default, the price line will use bold text. If you do not want the price line to be bold, click the drop-down and select Normal.

    Example illustrating the checkout title and the price line

'Other Methods' Link section of the Colors and Styling page

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

    Example of the Other Methods link

Payment Button section of the Colors and Styling page

  • Color of the payment button - Click the drop-down and select or enter the main color that will be used for the payment button. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(243, 128, 39). See the example image illustrating the payment button below.
  • Payment button text color - Click the drop-down and select or enter the main color that will be used for the text label on the payment button (e.g. "Pay $69.95"). If you enter the RGB value, click Choose to submit your choice. The default value is rgb(255, 255, 255) (pure white).
  • Color of the payment button on hover - Click the drop-down and select or enter the color that will be used for the payment button while a purchaser hovers the mouse cursor over the button. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(200, 102, 26).
  • Payment button text color on hover - Click the drop-down and select or enter the color that will be used for the text label on the payment button while a purchaser hovers the mouse cursor over the button. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(255, 255, 255) (pure white), and since that is the same value as the Payment button text color, by default, the text will not change color while the mouse cursor hovers over the button.

    Example of the payment button

Completion Page - Item 'Download' Button section of the Colors and Styling page

  • Color of the 'Download' button - Click the drop-down and select or enter the main color that will be used for the Download Now button in the Completion Page. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(66, 139, 202). See the example image illustrating the Download button below.
  • Color of the 'Download' button text - Click the drop-down and select or enter the main color that will be used for the text label on the Download Now button. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(255, 255, 255) (pure white).
  • Color of the 'Download' button on hover - Click the drop-down and select or enter the color that will be used for the Download Now button while a purchaser hovers the mouse cursor over the button. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(53, 126, 189).
  • Color of the 'Download' button text on hover - Click the drop-down and select or enter the color that will be used for the text label on the Download Now button while a purchaser hovers the mouse cursor over the button. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(255, 255, 255), and since that is the same value as the Color of the 'Download' button text, by default, the text color will not change while the mouse cursor hovers over the button.

    Example of a Completion Page with a Download Now button

Completion Page - 'Continue' Button section of the Colors and Styling page

  • Color of the 'Continue' button - Click the drop-down and select or enter the main color that will be used for the Continue button near the bottom of the Completion Page. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(92, 184, 92). See the example image illustrating the Continue button below.
  • Color of the 'Continue' button text - Click the drop-down and select or enter the main color that will be used for the text label on the Continue button. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(255, 255, 255) (pure white).
  • Color of the 'Continue' button on hover - Click the drop-down and select or enter the color that will be used for the Continue button while a purchaser hovers the mouse cursor over the button. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(76, 174, 76).
  • Color of the 'Continue' button text on hover - Click the drop-down and select or enter the color that will be used for the text label on the Continue button while a purchaser hovers the mouse cursor over the button. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(255, 255, 255), and since that is the same value as the Color of the 'Continue' button text, by default, the text color will not change while the mouse cursor hovers over the button.

    Example of the Continue button on the Completion Page

Completion Page - Checkmark Color section of the Colors and Styling page

  • Color of the successful order check mark on the completion page - Click the drop-down and select or enter the color that will be used for the check mark that appears at the top of the Completion Page indicating a successful order. If you enter the RGB value, click Choose to submit your choice. The default value is rgb(0, 128, 0). The following image illustrates the check mark.

    Example of the check mark at the top of the Completion Page

back to list

Completion Page

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

The Completion Page Settings dialog of a Popup Storefront's SETTINGS

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

         


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

    Example of a Completion Page with products and licenses displayed

back to list


Analytics Integration

The Analytics Integration page contains options that let you configure optional integration with Google Analytics and Google Tag Manager. You can configure the Popup Storefront to use the default integration settings configured under the Integrations menu, over override those values for this specific Popup Storefront here.

Analytics Integration page

  • Google Analytics Integration Behavior - There are three options available in this field:
    • Use default Google Analytics property ID from integration settings - This is the default value. When this option is selected, the Popup Storefront will use the Google Analytics property ID configured under Integrations > ExtensionsGoogle Analytics > SETUP.
    • Use custom Google Analytics property ID for this storefront - If you select this option, the Popup Storefront will use the Google Analytics property ID specified in the field directly below.
    • Do not enable Google Analytics for this storefront - If you select this option, the Popup Storefront will not use Google Analytics integration at all.
  • Custom Google Analytics property ID for this storefront - Optionally enter a custom Google Analytics property ID. This will only be used if Use custom Google Analytics property ID for this storefront is selected above.
  • Google Tag Manager Integration Behavior - There are three options available in this field:
    • Use default Google Tag Manager container ID from integration settings - This is the default value. When this option is selected, the Popup Storefront will use the Google Tag Manager container ID configured under IntegrationsExtensions > Google Tag Manager > SETUP.
    • Use custom Google Tag Manager container ID for this storefront - If you select this option, the Popup Storefront will use the Google Tag Manager container ID specified in the field directly below.
    • Do not run Google Tag Manager for this storefront - If you select this option, the Popup Storefront will not use Google Tag Manager integration at all. 
  • Google Tag Manager custom container ID for this storefront - Optionally enter a custom Google Tag Manager container ID. This will only be used if Use custom Google Tag Manager container ID for this storefront is selected above.

back to list


PayPal

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

  • Checkout Brand Logo - Click Choose File and browse to and select an image file on your network or your local computer that will be used as the logo at the top of the PayPal logon window, as shown in the illustration below. By default, no image file is specified and no logo is displayed.
  • Checkout Brand Title - Optionally enter the brand title that will be used in the 'Cancel and return' link on the PayPal logon window, as shown in the illustration below. If your Popup Storefront includes more than one language, be sure to click the drop-down selector for the language code and enter the brand title in each language.

back to list