Top

Change Cashier's Display Colours

Pro Tip

Cashier's custom CSS section is located in the app's "General Settings".

Cashier allows you to change the colours in its checkout. Here's how to adjust these areas of the app:

Note: This article uses "XXXXXX" to indicate hex colour coding for its examples. The app can take any type of CSS colour formatting. Visit W3 Schools - Colour for more information on CSS colour styling.

Accents are the colours located around currently selected entry boxes and on clickable links. Here's an example of a few accents that can be changed:

Accent Examples

To adjust the accents, paste this code into the custom CSS section and change it to your preferred colour:

/* Accent Color */
.Button {
    background-color: #XXXXXX;
}
a {
   color: #XXXXXX;
}
.InputField:focus, .SelectField:focus, .CreditCardInputField:focus{
   Box-shadow: 0 0 0px 2px #XXXXXX inset !important;
}
.ToggleField__Input:checked {
    box-shadow: 0 0 0 10px #XXXXXX inset !important;
}
.ToggleField__Input--Radio:checked {
    box-shadow: 0 0 0 6px #XXXXXX inset !important;
}
.ToggleField__Input:focus {
    box-shadow: 0 0 0 2px #XXXXXX inset;
}
.AppliedDiscount__Code {
    background-color: #XXXXXX;
}

Hovers are the colours that show when a user's cursor moves over a button. These buttons have hover functions:

Note: If you don’t want a hover, change the colour code to the same one as the accent colours.

Hover Buttons

To adjust the hovers, paste this code into the custom CSS section and change it to your preferred colour:

/* Accent - Hover */
.Button:hover {
    background-color: #XXXXXX;
}
a:hover {
   color: #XXXXXX;
}

Cashier has two separate background areas; one behind the customer's information and another behind their order summary:

Backgrounds

To adjust the background, paste this code into the custom CSS section and change it to your preferred colour:

/* Customer Information Background */
.App {
    background-color: #XXXXXXX;
}

/* Summary Background Color */
.Summary::after {
Background-color: #XXXXXXX;
}

Error codes pop up in Cashier when a field is filled out incorrectly. This is an example of one of these errors:

Error Code

To adjust the error colour, paste this code into the custom CSS section and change it to your preferred colour:

/* Error Color */
.Field--HasError .InputField::placeholder, .Field--HasError .SelectField::placeholder, .Field--HasError .Field__Label, .Field--HasError .Field__Message {
    color: #XXXXXX;
}
.Field--HasError .InputField, .Field--HasError .SelectField {
    box-shadow: 0 0 0 2px #FF6D6D inset;
    color: #XXXXXX;
}

Next Steps:

Blog Posts: