Button Style Guide
Guidelines for displaying and customizing the Always Available button in your storefront.

The Always Available button is a floating express checkout that displays only when a shopper’s cart has items. This button includes an on-hover mini-cart and immediately launches the checkout modal when they click Buy Now.

always available button

Placement

The Always Available button will appear and float on the bottom right of the merchant’s site after the user has added an item to their cart. Hovering with reveal their shopping cart.

always available placement

Size and Position

Default Style

always available button default style

dos and donts

Popover Default Style

popover default style

Popover Placement

popover placement

Customization

Merchants can customize the following aspects of the Always Available button:

  1. Bolt icon
  2. Border radius
  3. Text font
  4. Button color

Step 1: 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

Step 2: Border radius

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

border radius pt1

border radius pt 2

Step 3: Text font

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

font dos donts

Step 4: Button color

The Always Available 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.

button color pt1

button color pt2