9) Checkout (Elevate) Print

  • 1

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

Was this answer helpful?

« Back