Customize Bold Checkout Display Colors

• Bold Checkout
• All Versions
• N/A
• 15+ Minutes

Overview

Bold Checkout uses its own custom CSS section that allows you to adjust the display of the app's checkout. From here, you are able to make changes to button colors, text color, hover colors, background colors, and so much more!

The CSS input field can be found in Bold Checkout by following the steps below:

1. From within Bold Checkout, select Settings, then General Settings.
2. Navigate to "Appearance". 
3. The "Custom CSS" area within this page will allow you to insert CSS styling that will adjust the look and feel of the Bold Checkout app.

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

Please see the following guide for more information on changing common sections within the app; Such as accents, hovers, backgrounds, and errors:

Accents

This section of Bold Checkout allows you to adjust the colors located around currently selected entry boxes, and on clickable link. Here is an example of a few accents that can be adjusted:



To adjust the accent colors, paste the following code into the custom CSS section. You will have to adjust the hex code to your preferred color:

/* 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

Hovers are the colors that show when a user's cursor moves over a selectable button in your checkout. Please see the image below for examples of buttons with hover functions:

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

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

Backgrounds

Bold Checkout has two separate background areas; One located behind the customer's information section, and another behind their order summary:

To adjust the background, paste the following code into the custom CSS section and adjust the hex code to match your preferred color:

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

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

Errors

Error codes pop up in Bold Checkout when a field in the checkout is entered incorrectly. This is an example of one of these errors:

To adjust the error highlight color, paste the following code in the custom CSS section and adjust it to match your preferred color:

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

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