Bold Cashier has its own custom CSS section that allows you to adjust the display of its checkout.
Making adjustments to Cashier's display colours requires knowledge of CSS. If you are not comfortable with completing this yourself, one of our partners could complete this for you as a paid customization. Please request this through HeyCarson via this form.
The CSS section of Bold Cashier can be found through the steps below.
- From within Bold Cashier, select Settings > General Settings.
- Navigate to Appearance. The Custom CSS area allows you to insert CSS styling that will change the look and feel of the app.
This CSS blocks below uses XXXXXX to indicate hex colour coding for its examples. Bold Cashier can otherwise take any type of CSS colour formatting.
This article is relevant to Bold Cashier on Shopify. If your store is using Bold Checkout, please visit the articles relevant for BigCommerce or commercetools.
Accents are the colours located around currently selected text fields and clickable links.
Example
To adjust the accents, paste the following 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 display when a customer hovers over specific buttons in the checkout.
Example
If you don’t want a different colour on hover, feel free to change the colour code to the same one as the accent colours.
To adjust the hovers, paste the following code into the custom CSS section and change it to your preferred colour:
/* Accent - Hover */
.Button:hover {
background-color: #XXXXXX;
}
a:hover {
color: #XXXXXX;
}Bold Cashier has two separate background areas:
- One behind the customer's information.
- One behind the customer's order summary.
Example
To adjust the background, paste the following 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 appear in the checkout when a field is incorrectly filled out.
Example
To adjust the error colour, paste the following 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;
}