Customize Cashier's Display Colours

 Caution

This article is specific to Bold Cashier on Shopify. If your store is using Bold Checkout, please visit the articles relevant for BigCommerce, WooCommerce, or commercetools, here.

Overview

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

Making adjustments to the display colours within Cashier requires knowledge of CSS. If you are not comfortable with completing this on your theme, one of our partners could complete this for you as a paid customization on your store. Please request this through HeyCarson via this form.

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.

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