Optimized Checkout

Optimized Checkout

This tab only appears if Optimized One Page Checkout is enabled. To enable this feature to see Optimized One Page Checkout.

HEADER

Background Color — change the color that appears behind the logo

Use Custom Background  — check this box to upload an image to display behind the logo. 1000 x 400px is the recommended specifications.

LOGO

Use Custom Logo — Add an image for your logo. By default, it will inherit the settings from the Logo tab.

Position — moves the logo to the left, center or right side of the header.

CHECKOUT STEPS

Background Color — change the color of the circle behind the number of steps

Text Color — change the color of number of steps

ORDER SUMMARY

Background Color — change the color of the persistent cart

PRIMARY HEADINGS

Font family — change the font face for headings

Text Color — change the font face for the heading text

SECONDARY HEADINGS

Font family — change the font face for headings

Text Color — change the font face for the heading text

BODY

Background Color — change the color of the page

LINKS

Text Color — change the color of links

Font family — change the font face for links

PRIMARY BUTTON

Text Color — color of the text inside these buttons

Text Hover Color — the color of the text in the button when you hover a cursor over it

Text Active Color — the color of the text when the button is clicked. This usually displays very quickly, and may not appear in all browsers

Background Color — the color of the button behind the text

Background Hover Color — the color of the button behind the text when you hover a cursor over it

Background Active Color — the color of the button behind the text when you click on it

Border Color — the color of the line around the button

Border Hover Color — the color of the line around the button when you hover a cursor over it

Border Active Color — the color of the line around the button when you click on it

Font family — change the font face for buttons

SECONDARY BUTTON

Text Color — color of the text inside these buttons

Background Color — the color of the button behind the text

Border Color — the color of the line around the button

Font family — change the font face for buttons

FORM LABELS

Text Color — color of the text inside forms in checkout such as the payment method
 

FORM INPUTS

Text Color — color of the text typed into fields (Payment Method)

Background Color — the color of the field behind the input text

Shadow Color — the color of the slight shadowing on input fields

Placeholder Color — the color of the text example in an input field. 

Border Color — the color of the line around the input fields

Input Control Color — the color of the active selection indicator on forms

Error Color  — the color of the text that appears when incorrect or missing  information is put into an input field 
 

FORM CHECKLIST

Background Color — the color of the field behind the selection options. (Shipping Methods)

Selected Background  Color — the color of the text active selection option

Text Color — color of the text in the selection options

Border Color — the color of the border of the selection list

There is currently a section for our Google Amp beta. This is a closed beta and not yet available to the public.
 

LOADING TOASTER

Background Color — the color of behind the text on the loading notification.

Text  Color — the color of the text on the loading notification.

Was this helpful to you?