Top

Customize Cashier's Display Colours

Bold Cashier has its own custom CSS section that allows you to adjust the display of the app's checkout.

This article uses "XXXXXX" to indicate hex colour coding for its examples. The app can take any type of CSS colour formatting.

Here's how to navigate to this area:

  1. From Shopify's Admin, select Apps.

    Select Apps

  2. Select Bold Cashier.

    Select Bold Cashier

  3. Select Settings, then General Settings.

    Settings/General Settings

  4. Navigate to "Appearance". The "Custom CSS" area allows you to insert CSS styling that will change the look and feel of the app.

    Note: Visit W3 Schools to get more information on how to use CSS.

    Custom CSS

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: