In your control panel, go to Storefront > My Themes, and click the blue "Customize" button to launch Theme Editor.
In the left hand column of the Theme Editor, click the panel labelled 'Checkout'.
Header
Use background image | check this box to upload an image to display behind the logo. Recommended dimensions are 1000 x 400 pixels. |
Background color | color that appears behind the logo |
Header text color | color of header text if using a text logo |
Header border | color of the border around the header |
Logo
Logo type | Add an image for your logo. By default, it will inherit the settings from the Logo tab. |
Logo position | moves the logo to the left, center or right side of the header. |
Discount banner
Banner background | color of Automatic Promotion notifications (set up in Marketing) |
Banner text color | color of the text in Automatic Promotion notifications |
Banner icon |
color of the icon that appears in Automatic Promotion notifications |
Order summary box
Box background | color of the order summary box background |
Box border | color of the border around the order summary box |
Checkout steps
Icon background | color of the circle behind the icon/number |
Icon border | color of the border of the circle around the icon/number |
Icon text color | color of the icon/number in the step |
Headings
Heading 1 font family | font face for h1 text |
Heading 1 text color | color of h1 text |
Heading 2 font family | font face for h2 text |
Heading 2 text color | color of h2 text |
Body
Page background | color of the page background |
Focus color | color of the focused/selected field on the checkout form |
Body text and links
Body text font family | font face for the text that appears on the checkout page |
Body text color | color of the text that appears on the checkout page |
Secondary text font family | font face of text that is not a title, label or informational text |
Secondary text color | color of text that is not a title, label or informational text |
Link font family | font face for text links that appear on the checkout page |
Link color | color for text links that appear on the checkout page |
Link hover color | color of text links when you hover a cursor over it |
Primary action button
Button text font family | font face for buttons |
Button text color | color of the text inside these buttons |
Button text hover color | color of the text in the button when you hover a cursor over it |
Button text active color | color of the text when the button is clicked. This usually displays very quickly, and may not appear in all browsers |
Button text disabled color | color of the text when the button |
Button background | color of the button behind the text |
Button background hover | color of the button behind the text when you hover a cursor over it |
Button background active | color of the button behind the text when you click on it |
Button background disabled | color of the button behind the text when disabled |
Button border | color of the line around the button |
Button border hover | color of the line around the button when you hover a cursor over it |
Button border active | color of the line around the button when you click on it |
Button border disabled | color of the line around the button when disabled |
Secondary action button
Button text font family | font face for buttons |
Button text color | color of the text inside these buttons |
Button text hover color | color of the text in the button when you hover a cursor over it |
Button text active color | color of the text when the button is clicked. This usually displays very quickly, and may not appear in all browsers |
Button text disabled color | |
Button background | color of the button behind the text |
Button background hover | color of the button behind the text when you hover a cursor over it |
Button background active | color of the button behind the text when you click on it |
Button background disabled | color of the button behind the text when disabled |
Button border | color of the line around the button |
Button border hover | color of the line around the button when you hover a cursor over it |
Button border active | color of the line around the button when you click on it |
Button border disabled |
color of the line around the button when disabled |
Form input fields
Label text color | color of the form labels that appear above text boxes or product option selections |
Field text color | color of text that appears inside a text box or drop-down menu |
Field placeholder text color | color of example text that appears inside a text box or drop-down menu before the user starts typing |
Field error text color | color of the error label text when a user attempt to submit the form without completing all required fields |
Field background | color that appears behind the text in a drop-down menu or text box |
Field inner shadow | color of the shadow next to the field border |
Field border | color of the border around drop down menus, text boxes and rectangle multiple-choice buttons |
Checkbox button background | color of checkboxes and payment method indicator |
Form checklist
Background color | color of the background for payment methods |
Form background | color of the active/selected payment method |
Form header text color | color of payment method name text (if not a logo) |
Form border color | color of the borders around payment methods |
Loading toaster
Toaster background | color of behind the text on the loading notification |
Toaster text color | color of the text on the loading notification |