Configuring the Checkout - Payment Method system page design settings

On the Payment Method page, accessed via the PAGES tab of the Website Editor under the SYSTEM PAGES section, you can edit the design settings of the Payment Method form. These settings allow you to configure the layout and design options of the Payment Method form.

To configure the Payment Method system page design settings:

1. Click on the PAGES button in the Website Editor Toolbar.
   
2. Click on the + icon at the left of the Checkout tab to expand the Checkout pages menu.
   
3. Click on the Payment Method page tab.
   
4. Mouse over the Payment Method widget in the content area of the Payment Method page.
5. Click on the down arrow beside the form icon.
6. Choose the Checkout Billing Settings item from the drop-down menu.
   

   The Checkout Billing Settings popup will be displayed, with the Design Tab selected.

   
7. Select a Login Layout style for the form.
   • Label Above: displays labels above fields in the Payment Method form.
   • Label Left: displays labels to the left of fields in the Payment Method form.
8. Configure the design settings for the Payment Method Widget.
   • Step Number Total: lets you choose whether to display the total number of steps of the checkout process.
     • Show: displays the total number of steps of the checkout process.
     • Don't Show: hides the total number of steps of the checkout process.
   • Breadcrumb Display: lets you choose if/where the breadcrumb is displayed.
     • None: hides the breadcrumb.
     • Standard: displays the standard breadcrumb - a linkable path of the checkout process steps.
     • Numbered: displays the breadcrumb with the step number before each step name.
     • Worded: displays the breadcrumb with labels above the step name.
   • Previous Step Link: lets you choose whether to display a link to the previous step of the checkout process.
     • Show: displays a link to the previous step of the checkout process.
     • Don't Show: hides the link to the previous step of the checkout process.
   • Payment Method Choices: lets you choose the style to use for the payment method options.
     • Drop-down List: displays the payment method options in a drop-down list box.
     • Radio Buttons: displays the payment method options as radio buttons.
   • Submit on Account Terms Label: lets you modify the text for the option that allows a customer to pay on account if the customer is an account holder.

     The option appears in the Payment page of checkout as follows:

     

     Click the image to enlarge.

   • Heading: lets you configure the heading font style and color.
     • Click on the font name to configure the font style using the Font popup. Click here for instructions.
     • Click on the color spot to choose a text color using the Color popup. Click here for instructions.
   • Label: lets you configure the label font style and color.
     • Click on the font name to configure the font style using the Font popup. Click here for instructions.
     • Click on the color spot to choose a text color using the Color popup. Click here for instructions.
   • Payment Options: lets you configure the font style and colors used for the payment method options.
     • Click on the font name to configure the font style using the Font popup. Click here for instructions.
     • Click on the color spot to choose a text color using the Color popup. Click here for instructions.
   • Input: lets you configure the input field style.

     The procedure for configuring the input field is the same as in the Style Editor. Click here for instructions.

   • Button: lets you configure the submit button style.

     The procedure for configuring the submit button style is the same as for editing the button style in the Style Editor. Click here for instructions.

   You can configure the font properties of the text in the drop-down boxes for the Step Number Total, Breadcrumb Display, and Previous Step Link fields by clicking on the brush icon beside the drop-down box. The Font Popup will be displayed. Click here for instructions on how to configure the properties in the Font Popup.

9. Click OK.
10. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.