Checkout Button Style Guide

The Checkout button loads the Bolt Checkout modal when selected. Shoppers can manage their credentials, payment methods, and shipping options from the modal.

Merchants can either use Bolt’s default styling for greater cross-network shopper recognition or customize the Checkout button to fit their own brand requirements using the guidelines in this article.

Placement

There are four acceptable placements for displaying the Checkout button. Each is listed in the following sections.

1. Shopping Cart page
2. Mini-cart popover
3. Mini-cart sidepanel
4. Add-to-Cart confirmation modal

Size and Position

Default Style

Minimum Button Size

Height and Width

The Bolt Checkout button’s dimensions must be consistent with all other payment buttons displayed. If displayed alone, the Checkout button’s width must fill its container.

Vertical & Horizontal Layouts

• Vertical layouts are the most friendly across all devices. The Bolt Checkout button should be displayed first (on top). Bolt recommends displaying no more than 3 alternative payment options to your shoppers.

• Horizontal layouts should display the Bolt Checkout button on the far-right as the last payment option. Bolt recommends displaying no more than 3 alternative payment options to your shoppers.

Customization

Merchants can customize the following aspects of the Bolt Checkout button:

1. Display Local or Alternative payment methods
2. Bolt icon
3. Button text
4. Border radius
5. Text font
6. Button color

1. Display Local or Alternative payment methods

Merchants can display alternative payment methods as badges beneath the Checkout button.

Specs

2. Bolt icon

Merchants can choose to either hide the default Bolt icon or display a lock icon instead.

3. Button text

The Checkout button displays Checkout by default. Ensure any custom CTA clearly indicates to shoppers that the Checkout button initiates the checkout process.

4. Border radius

The Checkout button’s border-radius is 4px by default. Merchants can adjust this to match their storefront’s styling.

5. Text font

The Checkout button’s font-family is SF Pro Text by default. Merchants can update the font-family to match their storefront’s styling.

6. Button color

The Checkout button’s background-color is Bolt blue (#006CFF) by default. Merchants can update the background-color to be consistent with their brand. Bolt recommends verifying that your color choice passes accessibility requirements by visiting https://accessible-colors.com.

Options