Optimized Checkout (Kings Road)
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. |