Make a selection

Style Bold Checkout with CSS

  • Updated

Bold Checkout accepts standard-formatted CSS rules. This allows you to style your store's checkout experience to match your brand.

This article shows you where you can add your custom CSS in Bold Checkout and outlines some common CSS changes.



Important considerations

  • Checkout fields cannot be reordered.
  • CSS settings apply across all Bold-hosted checkout flows that exist on your store. 
  • Styling the payment interface requires the use of Bold Checkout’s API. For more information, please refer to our Developer Docs



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.



Sample Class Values


Adjust color and style of the clickable links and form fields.

Button, a, InputField, ToggleField__Input, AppliedDiscount_Code


Adjust the colors that appear when hovering over a button or link.

Button, a


Adjust the color of the background in one of two locations: behind the form fields, or behind the order summary.

Checkout__Main, Checkout__Summary


Adjust the color of the error that appears when a customer's input is invalid.





Note: Bold recommends first completing these steps on a local or development store to avoid undesired changes on your production store.

To add your custom CSS to Bold Checkout, please follow the steps below.

  1. In Bold Checkout, navigate to Settings > General settings.
  2. Scroll down to the Appearance section.
  3. Enter your custom CSS into the Custom CSS field.

    Custom CSS field

  4. Click Save.