BigCommerce configuration reference

Use the BigCommerce Quickstart for one verified sandbox purchase. This reference covers additional theme entry points, product modes, analytics and re-platforming.

App installation and access

Follow Install app for the sandbox app and required user permissions. For a live store, use Install for production.

Install for production

Complete the BigCommerce test plan and production readiness with Bolt before your live rollout. If changing an existing Bolt account, read Re-platforming first.

1. On your live BigCommerce store, install the Bolt production app. Select Get This App > Install > Confirm.
2. Configure the required support-user permissions. In Store Setup > Payments > Online Payment Methods > Bolt > Setup, enter the keys from your production division.
3. Apply the production scripts and checkout entry points below using that division's publishable key. Confirm the payment settings, theme keys, and script hosts all belong to production before publishing your theme.

Expected result: the production app is installed and configured for the live store. Use your agreed launch checks to verify payment and store-order matching; sandbox acceptance alone does not verify the production configuration.

Keys and webhook destination

Follow Connect Bolt to configure matching keys and validate the app-created webhook destination. When changing Bolt accounts, update old publishable-key references in every theme template as well as the payment-method settings.

Product modes

The quickstart uses Full Bolt Checkout with Fraud Protection. To retain native checkout, follow the separate fraud protection only guide. Set the selected Configuration Mode under Store Setup > Payments > Bolt > Bolt Settings and save.

For manual orders using authorization before capture, the documented Manual Orders Transaction Type is Authorize Only. Confirm the supported capture workflow before changing this setting; the quickstart uses Immediate Capture.

Step 6: Add scripts & buttons

Bolt delivers checkout and SSO Commerce through two scripts, connect-bigcommerce.js and track.js. Add the scripts and the Bolt button to every template that shows the cart. In the Cornerstone theme these are:

• Cart page: templates/pages/cart.html or templates/components/cart/totals.html
• Fast cart: templates/components/cart/preview.html
• Mini cart: templates/components/common/cart-preview.html

To edit them, go to Store Front > My Themes > Advanced > Edit Theme Files. Copy your theme before making changes.

Add scripts

Add the following scripts above the first div tag in each template. The examples use production hosts; on a sandbox store, use https://connect-sandbox.boltapp.com/connect-bigcommerce.js and https://connect-sandbox.boltapp.com/track.js instead.

Load the connect script. Replace {PUBLISHABLE_KEY} with your publishable key. Replace {ROUTE_PUBLIC_TOKEN} if you use Route shipping insurance, or remove that attribute.

<script
  id="bolt-connect"
  type="text/javascript"
  src="https://connect.boltapp.com/connect-bigcommerce.js"
  data-publishable-key="{PUBLISHABLE_KEY}"
  data-storefront-api-token="{{settings.storefront_api.token}}"
  route-public-token="{ROUTE_PUBLIC_TOKEN}">
</script>

For the main cart page, use the tested cart refresh observer.

On the fast cart and mini cart templates, refresh the Bolt cart when the template renders.

<script>
  if (window.BoltCheckout && window.BoltCheckout.reloadBigCommerceCart) {
      window.BoltCheckout.reloadBigCommerceCart();
  } else {
      console.log("window.BoltCheckout.reloadBigCommerceCart is not defined");
  }
</script>

Include the tracking script on every page. BigCommerce's Footer Scripts section is a convenient place for it.

<script
  id="bolt-track"
  type="text/javascript"
  src="https://connect.boltapp.com/track.js"
  data-publishable-key="{PUBLISHABLE_KEY}"
  data-shopping-cart-id="BigCommerce">
</script>

Add buttons

1. In the same templates, add the Bolt button where your original checkout button appears. Replace PUBLISHABLE_KEY with your publishable key, and use the connect-sandbox.boltapp.com host on a sandbox store.

<div data-tid="instant-bolt-checkout-button">
<object data="https://connect.boltapp.com/v1/checkout_button?publishable_key=PUBLISHABLE_KEY">
</object>
</div>

2. Hide the original checkout button. Update the querySelector to match your theme's checkout button.

<script>
  var originalCheckoutButton = document.querySelector(".cart-actions .button--primary");
  var boltButtons = document.getElementsByClassName("bolt-button-wrapper");

  for (var i = 0; i < boltButtons.length; i++) {
    boltButtons[i].style.display = 'block';
    }

  // Keep the original action if the Bolt button has not rendered.
  if (originalCheckoutButton && boltButtons.length > 0) {
    originalCheckoutButton.style.display = 'none';
  }
</script>

Expected result: The Bolt button appears in place of the original checkout button on the cart, fast cart, and mini cart, and changing the cart total updates the Bolt cart.

Optional configuration

Embeddable account editing

Let shoppers edit their Bolt account details on your site with the component setup guides.

Set up Google Analytics

1. Link your Google Analytics account under Settings > Data Solutions > Web Analytics in the BigCommerce dashboard.
2. Use Script Manager to add the GA4 tag. Replace <Measurement ID> with your GA4 measurement ID.

<script async src="https://www.googletagmanager.com/gtag/js?id=<Measurement ID>"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '<Measurement ID>');
</script>

Re-platforming

When you move to BigCommerce from another platform or Bolt account division:

• Issue refunds from the Merchant Dashboard. Do not use a platform back-office flow connected to the deprecated account division.
• Disable the old webhooks for the deprecated account division.

Update plugin

Update the Bolt app when BigCommerce prompts you in the control panel so checkout keeps working as intended.