Tickets - Login

Always Available Button Design Guidelines

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 “Buy Now” selected.

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

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

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

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

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

Related Articles