Bold Checkout accepts standard-formatted CSS rules. This allows you to style your store's checkout experience to match your brand.
Note: CSS settings apply across all Bold-hosted checkout flows that exist on your store.
This article outlines some common CSS changes and shows you where you can add your custom CSS in Bold Checkout.
Identify CSS changes
Identify the classes you want to change by inspecting the checkout page.
Some common CSS changes can be divided into several groups, outlined in the table below.
|
Type |
Description |
Sample Class Values |
|---|---|---|
|
Accents |
Adjust color and style of the clickable links and form fields. |
Button, a, InputField, ToggleField__Input, AppliedDiscount_Code |
|
Hovers |
Adjust the colors that appear when hovering over a button or link. |
Button, a |
|
Backgrounds |
Adjust the color of the background in one of two locations: behind the form fields, or behind the order summary. |
Checkout__Main, Checkout__Summary |
|
Errors |
Adjust the color of the error that appears when a customer's input is invalid. |
Field__Message |
For example, to change the color of selected radio buttons to purple, you can use the following CSS:
.stx-radio-field .stx-radio--is-checked input {
box-shadow: 0 0 0 6px #7a5af5 inset;
}
Outcome:
Secure Payments Interface
The Secure Payments Interface (SPI) is the interface that your customer uses to input their payment information. It is rendered using an iframe in order to keep the payment information secure. You can make minor CSS changes to this interface as well.
CSS changes that impact the SPI interface must use the identifier #iframe-payment-gateway.
For example, to apply the CSS rule from the previous section to SPI, add the following to your CSS rules:
#iframe-payment-gateway .stx-radio-field .stx-radio--is-checked input {
box-shadow: 0 0 0 6px #7a5af5 inset;
}
Outcome:
Setup
To add your custom CSS to Bold Checkout, please follow the steps below.
- In Bold Checkout, navigate to Settings > General settings.
- Scroll down to the Appearance section.
- Enter your custom CSS into the Custom CSS field.
- Click Save.