Tickets - Login

Buy Now Button Design Guidelines

The Buy Now button adds an item to the shopper’s cart and then immediately launches the Bolt Checkout modal.

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

buy now button

Placement

There are two acceptable placements for displaying the Buy Now button:

  1. Product page
  2. Category page

buy now button placements map

Size and Position

Default Style

checkout button default style

Minimum Button Size

minimum buy now button size

Height and Width

The Buy Now button’s dimensions must be consistent with all other buttons displayed.

buy now button height and width

Vertical & Horizontal Layouts

  • Vertical The Buy Now button should be displayed as the last option in a vertical stack.

  • Horizontal The Buy Now button should be secondary and be to the left of the last button.

vertical and horizontal buy now button layout

Customization

Merchants can customize the following aspects of the Buy Now button:

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

1. Display Local or Alternative payment methods

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

display payment methods

Specs

buy now button specs

dos and donts

2. Bolt icon

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

buy now button

icon dos and donts

3. Border radius

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

buy now button border radius

4. Text font

The Buy Now 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

5. Button color

The Buy Now 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.

buy now button color