📍 Bolt Help / Operations / Checkout Settings / Checkout Buttons / Checkout Button Style Guide

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.

standard checkout button

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

checkout button placements map

Size and Position

Default Style

checkout button default style

Minimum Button Size

minimum checkout 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.

checkout button height and width

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.

vertical and horizontal checkout button layouts

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.

display payment methods

Specs

payment method display specs

specs dos and donts

2. Bolt icon

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

standard checkout button

icon dos and donts

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.

checkout button text

4. Border radius

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

checkout button border radius

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.

font dos and donts

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.

checkout button color

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)
📖On This Page
Filter by Section
Filter by Topic