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.
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.
Merchant Admins and Developers can enable Abandoned Cart Emails from Settings > Checkout in the Bolt Merchant Dashboard. How to Enable Abandoned Cart Emails Log into the Bolt Merchant Dashboard. Navigate to Settings > Checkout. Scroll to Abandoned Cart Emails. Update the following fields: Scroll to Business Physical Address. Select Edit. Input your physical address. This is required for compliance purposes in order to use Abandoned Cart Emails.
Cart Groups enable merchants to group items in a shopper’s cart by labels.
You must update the create.order Merchant API call to include the itemGroup field.
{
"id": "9733761171175415",
"displayId": "5203939994859497",
"items": [
{
"reference": "2",
"image": "https://placeimg.com/30/30/animals/grayscale",
"name": "Item2",
"price": "$80.32",
"desc": "Item2 makes Item1 obsolete",
"sku": "SK-2",
"itemGroup": "group 1",
"quantity": 1
}
],
"currency": "USD"
Pixel tracking enables Bolt to send events to a merchant’s Google and Facebook analytics platform. Merchants can use this checkout data for metric monitoring. Read our Developer’s Checkout Analytics guide for more information.
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.
Merchants can customize Bolt Checkout by adding their store logo. This can be done through the Bolt Merchant Dashboard.
Checkout via Link enables shoppers to use Bolt Checkout through email.
Merchants can refer to the phone order placement guides for instructions on how to send shopper’s a checkout link from their specific platform.
Discount Codes enable merchants to run special deals their shoppers can take advantage of during certain seasons, events, or sign-up promotions. Discounts also work for accepting gift cards and store credit.
In-store Pickup enables shoppers to pick up their items from a nearby store instead of wait for a delivery. How to Enable In-Store Pickup In-Store Pickup requires responding to Bolt’s POST request for an order’s shipping details from your Merchant API. In addition to listing delivery options, the response can also contain pickup options. Ensure you have set up the Split Shipping and Tax endpoints. Update your shipping response to include the object pickup_options with an array of stores available, based on the shopper’s address.
Location-based Shipping Restrictions enable merchants to limit where shoppers can ship orders.
How to Set up Order Tracking 1. Bolt Initialization Reach out to your Customer Success Manager to enable this feature. Wait for confirmation before moving to the next step. 2. Update your Platform theme. BigCommerce Add the following script to your theme footer (typically found in templates/components/common.footer.html). <!--Bolt Addition--> <div> <div class="bolt-account-login"></div> <script id="bolt-account" type="text/javascript" src="https://account.bolt.com/account.js" data-publishable-key={publishable_key}> </script> </div> <!--End Bolt Addition--> Refresh the page. Preview the theme and review.
Product Add-ons & Upsells enable merchants to suggest items to their shoppers either during checkout or when they view an order tracking page. This can be set up through the Bolt Merchant Dashboard.
Merchants can enable the Product Quantity feature to allow shoppers to adjust product quantities before completing checkout.
Checkout Notifications enable merchants to keep shoppers informed about their order status, abandoned carts, and any additional actions they may need to take.
Bolt’s Single Sign-on (SSO) offering upgrades your existing shopper accounts for seamless login and access to all of Bolt’s account-based shopper features. Bolt Single Sign-on enables merchants to increase account adoption, reduce account friction, and leverage the Bolt Account Network. How to Set up SSO Planning Steps 1. Create a List of Login Buttons Bolt requires a list of all existing login buttons displayed across your storefront to ensure all login flows are accounted for and updated.
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.
Merchants can control the checkout and payment experience for shoppers using Checkout Settings in the Bolt Merchant Dashboard.