Bold Checkout allows you to enter your own CSS code to further customize your customer's checkout experience.
You can find this field within the Bold Checkout admin by following the steps below:
- From within Bold Checkout, select Settings, then General Settings.
- Navigate to Appearance.
- 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: The CSS blocks below use XXXXXX to indicate example hex color codes.
The Accents section of Bold Checkout allows you to adjust the colors of your checkout's clickable links and form fields.
Example
To adjust the accent colors, copy and paste the following code into Bold Checkout's admin, then swap the example hex color codes (XXXXXX) with proper hex color codes:
/* 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;
}The Hovers section of Bold Checkout allows you to adjust the colors that appear when hovering over a button or link.
Example
To adjust the hover properties, copy and paste the following code into Bold Checkout's admin, then swap the example hex color codes (XXXXXX) with proper hex color codes:
/* Accent - Hover */
.Button:hover {
background-color: #XXXXXX;
}
a:hover {
color: #XXXXXX;
}The Backgrounds section of Bold Checkout allows you to adjust the background color of your checkout, for 2 different locations:
- The background behind the form fields.
- The background behind the cart summary.
Example
To adjust the background color, copy and paste the following code into Bold Checkout's admin, then swap the example hex color codes (XXXXXX) with proper hex color codes:
/* Customer Information Background */
.App {
background-color: #XXXXXXX;
}
/* Summary Background Color */
.Summary::after {
Background-color: #XXXXXXX;
}The Errors section of Bold Checkout allows you to adjust the color of the notice that appears when a customer hasn't entered valid information into the form fields.
Example
To adjust the error alert notice, copy and paste the following code into Bold Checkout's admin, then swap the example hex color codes (XXXXXX) with proper hex color codes:
/* Customer Information Background */
.App {
background-color: #XXXXXXX;
}
/* Summary Background Color */
.Summary::after {
Background-color: #XXXXXXX;
}