The Bolt Checkout Button initiates the shopper’s checkout experience and can be placed across multiple pages on your store.
Always Available Button Design Guidelines How to display and customize the Always Available Button in your storefront. Buy Now Button Design Guidelines How to display and customize the Buy Now Button in your storefront. Checkout Button Design Guidelines Guidelines for displaying and customizing the Checkout 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 “Buy Now” selected.
Merchants can create an express-checkout experience for their shoppers by enabling the Always Available Checkout Button. The Always Available Checkout Button displays when an item is initially added to a shopping cart and floats with the shopper’s movement on and across all supported pages. Read how to enable this feature
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.
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.
Enable Checkout via Link How to set up Checkout via Link for Shoppers. Enable the Always Available Checkout Button How to set up the Always Available Checkout Button. Enable the Product Page Checkout Button How to set up the Product Page Checkout Button. Enable the Standard Checkout Button Learn how to add scripts to your storefront and call Bolt Checkout.
Steps for enabling the Always Available Checkout Button vary depending on the cart platform used. Custom Cart Platform Custom carts must call BoltCheckout.configure() with parameters based on whether there are items in the cart and if an item was just added to cart. Option 1: Item is Added to Cart Use the following call to display the Always-Available Checkout Button when a Shopper adds the first item to their cart. This call also animates the mini-cart to signify an item was added.
Steps for enabling the Product Page Checkout Button vary depending on the cart platform used. BigCommerce Installation Log in to the BigCommerce Admin Console. Navigate to Manage > Edit theme. Open templates > components > products > add-to-cart.html. Add the following code: <script id="Bolt-connect" type="text/javascript" src="https://connect.Bolt.com/connect-bigcommerce.js" data-publishable-key="<publishable key>" data-shopping-cart-id="BigCommerce" data-storefront-api-token="{{settings.storefront_api.token}}"> </script> Add the following after the div.form-action element, along with any styling necessary. <div id="product-page-checkout-wrapper" "Bolt-button-wrapper" style="display:none"> <div "Bolt-product-checkout-button Bolt-multi-step-checkout"></div> </div> Since the element is automatically made visible on page load, it can be inconvenient for production testing.
The Bolt Checkout Button initiates the shopper’s checkout experience and can be placed across multiple pages on your store.
The Product Page Checkout button adds an express-checkout option to your product pages that forwards shoppers directly to Bolt Checkout to complete their purchase. Read how to enable the Product Page Checkout Button.