# BigCommerce configuration reference

> Configure additional BigCommerce checkout entry points, product modes, analytics, and account migrations.

Source: https://help.boltapp.com/platforms/bigcommerce-full

Use the [BigCommerce Quickstart](/platforms/bigcommerce) for one verified sandbox purchase. This reference covers additional theme entry points, product modes, analytics and re-platforming.

<span id="prerequisites" />

<span id="step-1-install-plugin" />

<span id="step-2-add-a-bolt-user-to-bigcommerce" />

## App installation and access [#app-installation-and-access]

Follow [Install app](/platforms/bigcommerce#1-install-app) for the sandbox app and required user permissions. For a live store, use [Install for production](#install-for-production).

## Install for production [#install-for-production]

Complete the [BigCommerce test plan](/platforms/bigcommerce-test-plan) and [production readiness](https://help.boltapp.com/developers/production-readiness-guides/) with Bolt before your live rollout. If changing an existing Bolt account, read [Re-platforming](#re-platforming) first.

1. On your live BigCommerce store, install the [Bolt production app](https://apps.bigcommerce.com/details/13488). Select **Get This App > Install > Confirm**.
2. Configure the [required support-user permissions](/platforms/bigcommerce#1-install-app). In **Store Setup > Payments > Online Payment Methods > Bolt > Setup**, enter the keys from your [production division](https://merchant.boltapp.com/administration/api-keys#apiKeys).
3. Apply the [production scripts and checkout entry points](#step-6-add-scripts--buttons) 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.

<span id="step-3-verify-webhook-endpoints-in-merchant-dashboard" />

<span id="step-4-add-bolt-as-payment-method-in-bigcommerce" />

## Keys and webhook destination [#keys-and-webhook-destination]

Follow [Connect Bolt](/platforms/bigcommerce#2-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.

<span id="step-5-choose-a-bolt-product" />

## Product modes [#product-modes]

The quickstart uses **Full Bolt Checkout with Fraud Protection**. To retain native checkout, follow the separate [fraud protection only guide](/platforms/bigcommerce/bigcommerce-setup-guide/fraud-only/). 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 [#step-6-add-scripts--buttons]

Bolt delivers checkout and [SSO Commerce](/products/add-ons/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-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.

<img alt="Where to insert the scripts in the theme file" src="__img0" />

Load the connect script. Replace `{PUBLISHABLE_KEY}` with your publishable key. Replace `{ROUTE_PUBLIC_TOKEN}` if you use [Route shipping insurance](https://route.com/), or remove that attribute.

```html title="HTML"
<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](/platforms/bigcommerce#4-refresh-cart).

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

```html title="HTML"
<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.

```html title="HTML"
<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 [#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.

```html title="HTML"
<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.

```html title="HTML"
<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 [#optional-configuration]

### Embeddable account editing [#embeddable-account-editing]

Let shoppers edit their Bolt account details on your site with the [component setup guides](/add-ons/embedded-shopper-accounts-editing/).

### Set up Google Analytics [#set-up-google-analytics]

1. Link your Google Analytics account under **Settings > Data Solutions > Web Analytics** in the [BigCommerce dashboard](https://support.bigcommerce.com/articles/Public/Data-Solutions).
2. Use [Script Manager](https://support.bigcommerce.com/s/article/Using-Script-Manager?language=en_US) to add the GA4 tag. Replace `<Measurement ID>` with your GA4 measurement ID.

```html title="HTML"
<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 [#re-platforming]

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

* Issue [refunds](/dashboard/refunds) from the Merchant Dashboard. Do not use a platform back-office flow connected to the deprecated account division.
* Disable the old [webhooks](/developers/webhooks) for the deprecated account division.

## Update plugin [#update-plugin]

Update the Bolt app when BigCommerce prompts you [in the control panel](https://support.bigcommerce.com/s/article/How-do-I-access-and-install-the-new-single-click-apps-within-my-Bigcommerce-store-control-panel?language=en_US#updating) so checkout keeps working as intended.