Style the Checkout with CSS

Using Bold Checkout, you can style your store's checkout experience using CSS rules. How this works depends on what you want to customize:

• For everything except the payment interface, use the Bold Checkout admin.
• For the payment interface, use the API.

This page outlines how to perform both these styling methods.

note

CSS settings apply across all Bold-hosted checkout flows that exist on your store. You cannot apply different CSS rules to different Bold-hosted checkout flows. To have full control over the look and feel of a flow, create a custom checkout flow.

Prerequisites

• Complete the instructions outlined in the Checkout Getting Started guide.

note

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

Identify CSS changes

Bold accepts standard-formatted CSS rules. Identify the classes you want to change by visiting the checkout page with Bold Checkout enabled and inspecting the page.

Some common CSS changes can be divided into several groups, outlined in the following table:

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 examples of common CSS changes, refer to the Help Center.

Style the full checkout

Use the Bold Checkout admin to style everything in the checkout experience other than the payment interface, including the thank you page.

Once you have determined the CSS changes you would like to make, apply them to your store with the following steps:

1. Navigate to the Bold Checkout admin.
2. In the left-hand menu, navigate to Settings > General settings.
3. Scroll down until you find the Appearance section. In the Custom CSS field, paste your CSS code. Click Save.
4. Navigate to your storefront and refresh the page. The changes take effect immediately.

Style the Payment Isolation Gateway Interface (PIGI)

The Payment Isolation Gateway Interface (PIGI) is the interface a customer uses to input their payment information and add the payment method to an order. You cannot style this user interface using the Bold Checkout admin.

To edit the look and feel of this interface with CSS rules, use the Create CSS Styling for PIGI endpoint.

note

You must call this endpoint every time the checkout is initialized. It is authenticated with the JWT that is retrieved from the Initialize Order endpoint.

You can apply both CSS rules and media rules using this endpoint. Include the rules in JSON format, as shown in the following example call:

curl --request POST 'https://api.boldcommerce.com/checkout/storefront/{shop_identifier}/{public_order_id}/payments/styles' \
     --header 'Authorization: Bearer {JWT}' \
     --header 'Bold-API-Version-Date: 2022-05-01' \
     --header 'Content-Type: application/json' \
     --data '{
         "css_rules": [
             {
                 "cssText": ".ToggleField { color:red; }"
             }
         ],
         "media_rules": [
             {
                 "conditionText": "screen and (max-height: 600px)",
                 "cssRules": [
                     {
                         "cssText": ".ToggleField__Text { color:blue; }"
                     }
                 ]
             }
         ]
     }'

Navigate to your storefront and refresh the page. The changes take effect immediately.