Configuring the Checkout - Shipping system page design settings

The Shipping page, accessed via the PAGES tab of the Website Editor under the SYSTEM PAGES section, lets you edit the design and layout of the Checkout Shipping form. You can adjust elements of the form content such as positioning, styling, color schemes, fonts, and button styles to match your website’s branding.

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

   The Checkout Shipping 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 Checkout Shipping form.
   • Label Left: displays labels to the left of fields in the Checkout Shipping form.
8. Configure the design settings for the Checkout Shipping 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.
   • Shipping Method Choices: lets you choose the style to use for the shipping method options.
     • Drop-down List: displays the shipping method options in a drop-down list box.
     • Radio Buttons: displays the shipping method options as radio buttons.
   • Shipping Method Description: lets you choose whether to display the description for the shipping methods.
     • Show: displays the description of the selected shipping method.
     • Don't Show: hides the description of the selected shipping method.
   • Estimated Delivery Time: lets you choose whether to display the estimated number of days in which an order is due to be delivered.
   • Tax Notice: Lets you choose whether to display the tax notice for your site.
     • Show: displays the tax notice under the shipping methods.
     • Don't Show: will hide the tax notice.
     • The message for the tax notice is configured via Admin > Settings > Taxes > Tax Notice.
     • The tax notice will only appear if tax is applied to the shipping fee, even if the setting is set to "Show".
   • Heading: lets you configure the heading font and color.

     The procedure for configuring the heading font is the same as for editing the font style in the Style Editor. See the Style Editor article for instructions.

     The procedure for configuring the heading color is the same as for editing an element's color in the Style Editor. See the Style Editor article for instructions.

   • Label: lets you configure the label font and color.

     The procedure for configuring the label font is the same as for editing the font style in the Style Editor. See the Style Editor article for instructions.

     The procedure for configuring the label color is the same as for editing an element's color in the Style Editor. See the Style Editor article 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. 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, and Previous Step Link fields by clicking on the brush icon beside the drop-down box. 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.

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