Optimized Checkout (South Bank)
You must enable Optimized One-Page Checkout on your store in order to see the Optimized Checkout settings in Page Builder.
Header
| Setting |
Description |
| Background color |
Select the color that appears behind the logo
|
| Use custom background |
Check this box to upload an image to display behind the logo. Recommended dimensions are 1000 x 400 pixels.
|
| Text color |
Select the color of header text if using a text logo.
|
| Border color |
Select the color of the border below the header.
|
Logo
| Setting |
Description |
| Use custom logo |
Choose to add an image for your logo. By default, it will inherit the settings from the Logo tab. If a unique logo image is chosen, you can select the size to be Optimized for theme or Specify dimensions. The Optimized for theme option's size is 250 x 100 pixels.
|
| Position |
Select this to move the logo to the left, center or right side of the header.
|
Discount Banner
| Setting |
Description |
| Background color |
Select the color of Automatic Promotion notifications (set up in Marketing).
|
| Text color |
Select the color of the text in Automatic Promotion notifications.
|
| Icon color |
Select the color of the icon that appears in Automatic Promotion notifications.
|
Order Summary
| Setting |
Description |
| Background color |
Select the color of the order summary box background.
|
| Border color |
Select the color of the border around the order summary box.
|
Checkout Steps
| Setting |
Description |
| Background color |
Select the color of the circle behind the icon/number.
|
| Text color |
Select the color of the icon/number in the step.
|
| Border color |
Select the color of the border of the circle around the icon/number.
|
Primary Headings
| Setting |
Description |
| Text color |
Select the color of h1 text.
|
Secondary Headings
| Setting |
Description |
| Text color |
Select the color of h2 text.
|
Body
| Setting |
Description |
| Background color |
Select the color of the page background.
|
| Focus color |
Select the color of the focused/selected field on the checkout form.
|
Primary Content
| Setting |
Description |
| Text color |
Select the color of the text that appears on the checkout page.
|
Secondary Content
| Setting |
Description |
| Text color |
Select the color of text that is not a title, label or informational text.
|
Links
| Setting |
Description |
| Text color |
Select the color for text links that appear on the checkout page.
|
| Text color |
Select the color of text links when you hover a cursor over it.
|
Primary Button
| Setting |
Description |
| Text color |
Choose the color of the text inside the button.
|
| Text hover color |
Choose the color of the text in the button when you hover a cursor over it.
|
| Text active color |
Choose the color of the text in the button when you click on it. |
| Text disabled color |
Choose the color of the text inside the disabled button. |
| Background color |
Choose the background color of the button.
|
| Background hover color |
Choose the background color of the button when you hover a cursor over it.
|
| Background active color |
Choose the background color of the button when you click on it.
|
| Background disabled color |
Choose the color of the button behind the text.
|
| Border color |
Choose the color of the border around the button.
|
| Border hover color |
Choose the color of the border around the button when you hover a cursor over it.
|
| Border active color |
Choose the color of the border around the button when you click on it.
|
| Border disabled color |
Choose the color of the color of the border around the button.
|
Secondary Button
| Setting |
Description |
| Text color |
Choose the color of the text inside the button.
|
| Text hover color |
Choose the color of the text in the button when you hover a cursor over it.
|
| Text active color |
Choose the color of the text in the button when you click on it. |
| Background color |
Choose the background color of the button.
|
| Background hover color |
Choose the background color of the button when you hover a cursor over it.
|
| Background active color |
Choose the background color of the button when you click on it.
|
| Border color |
Choose the color of the border around the button.
|
| Border hover color |
Choose the color of the border around the button when you hover a cursor over it.
|
| Border active color |
Choose the color of the border around the button when you click on it.
|
Form Labels
| Setting |
Description |
| Text color |
Choose the color of the form labels that appear above text boxes or product option selections.
|
Form Inputs
| Setting |
Description |
| Text color |
Select the color of the form labels that appear above text boxes or product option selections.
|
| Background color |
Select the color of text that appears inside a text box or drop-down menu.
|
| Shadow color |
Select the color of the shadow next to the field border.
|
| Placeholder color |
Select the color of example text that appears inside a text box or drop-down menu before the user starts typing.
|
| Border |
Select the color of the border around drop down menus, text boxes and rectangle multiple-choice buttons.
|
| Input control color |
Select the color of the input control that appear around text boxes.
|
| Error color |
Select the color of the error label text when a user attempt to submit the form without completing all required fields.
|
Form Checklist
| Setting |
Description |
| Background color |
Choose the color of the background for payment methods.
|
| Selected background color |
Choose the color of the active/selected payment method.
|
| Text color |
Choose the color of the text.
|
| Selected text color |
Choose the color of the active/selected text.
|
| Border color |
Choose the color of the borders around payment methods.
|
Loading Toaster
| Setting |
Description |
| Background color |
Choose the color of behind the text on the loading notification.
|
| Text color |
Choose the color of the text on the loading notification.
|
