Customize Cashier's Display Colours

Overview

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

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

The CSS input field can be found in Bold Cashier through the following steps below: 

  1. From within Bold Cashier, select SettingsGeneral Settings.
  2. Navigate to "Appearance". The "Custom CSS" area allows you to insert CSS styling that will change the look and feel of the app.

We've put together a guide to help you with changing common sections in the app: accents, hovers, backgrounds, and errors.

For more information on styling Bold Cashier, please see each section below: 

Note: This CSS blocks below use "XXXXXX" to indicate hex colour coding for its examples. The app can take any type of CSS colour formatting.

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 Button Examples

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;
}

Backgrounds

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

Background Colors

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 Bold Cashier when a field is filled out incorrectly. This is an example of one of these errors:

Error Example

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;
}
Was this article helpful?
0 out of 0 found this helpful