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.
- Shopping Cart page
- Mini-cart popover
- Mini-cart sidepanel
- 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:
- Display Local or Alternative payment methods
- Bolt icon
- Button text
- Border radius
- Text font
- 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
Name | Type | Example |
---|---|---|
background | String; accepts hex, rgba | #FFFFFF rgba(255,255,255,0) |
background-hover | String; accepts hex, rgba | |
letter-spacing | em or px | 0.1em |
font-color | String; accepts hex, rgba | |
font-family | String; accepts list of fonts | Roboto , sans-serif |
font-size | String | 16px |
font-weight | String | bold |
height | String; can be pixels or percentage for dynamic | 100px , 100% |
width | String; can be pixels or percentage for dynamic | 100px , 100% |
border-color | String; accepts hex, rgba | #fff |
border-color-hover | String; accepts hex, rgba | #fff |
border-width | int | 2 NOT 2em or 2px (svg can’t support) |
border-width-hover | int | 2 NOT 2em or 2px (svg can’t support) |
border-radius | int | 2 NOT 2em or 2px (svg can’t support) |