Configuring the Checkout - Address system page design settings

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

To configure the Address 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 Address page tab.
   
4. Mouse over the Checkout Address widget in the content area of the Address page.
5. Click on the down arrow beside the form icon.
6. Choose the Checkout Address Settings item from the drop-down menu.
   

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

   
7. Configure the settings:
   • Billing Address Title: lets you change the label for the billing address.
   • Shipping Address Title: lets you change the label for the shipping address.
8. Click on the Design tab.
   
9. Select a layout style for the Checkout Address form.
   • Label Above: displays labels above fields in the Checkout Address form.
   • Label Left: displays labels to the left of fields in the Checkout Address form.
10. Configure the design settings for the Checkout Address 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.
    • Existing Member Login: lets you choose the style to use for the existing member login form.
      • Popup: displays the existing member login form in a popup window.
      • Inline: displays the existing member login form within the Address page.
    • Page Columns (responsive): lets you choose the number of columns used on the page Address page.
      • One Column: displays the content in a single column.
      • Two Columns (min. screen size: 800px): displays the content in two columns when the screen size is 800 pixels or more in width. (Note, the Checkout Address form must be in its own full-width column in order for two columns to be displayed).
    • Heading: lets you configure the heading font style and color.
    • Label: lets you configure the label font style and color.
    • Link: lets you configure the font style and colors used for the links.
    • Shipping Options: lets you configure the font style and colors used for the shipping options.
    • Input: lets you configure the input field style.

      The procedure for configuring the input field is the same as in the Style Editor. See the Style Editor article 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. See the Style Editor article for instructions.

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

    You can configure the font properties of the text for the Heading, Label, Link, and Shipping Options by clicking on the font beside the respective setting. The Font Popup will be displayed.

    See the Configuring Font Settings for Text article for instructions on how to configure the properties in the Font Popup.

    The Font Popup for the Shipping Options text will have an additional setting:

    • Wrap when Multiple Lines: Tick this checkbox if you want words to be automatically moved to the next line if the text string does not fit within the defined margins on one line.
11. Click OK.
12. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.