Optimized Checkout (Kings Road)
Configure the appearance of the Optimized Checkout. In your control panel, go to Storefront > Themes, click the blue "Customize" button to launch Theme Editor, then select the "Theme Styles" icon. In the left hand column of the Theme Editor, click the panel labelled 'Optimized Checkout'.
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.
|
