Enable Order Tracking

How to Set up Order Tracking

1. Bolt Initialization

  1. Reach out to your Customer Success Manager to enable this feature.
  2. Wait for confirmation before moving to the next step.

2. Update Your Platform Theme

BigCommerce

  1. Add the following script to your theme’s footer file/page (typically found in templates/components/common/footer.html).
<!--Bolt Addition-->
<div>
    <div class="bolt-order-tracking"></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-->
  1. Refresh the page and preview the theme through BigCommerce’s preview feature to ensure the element added above is present.
  2. Publish the theme.
  3. Navigate to your home page and append ?transactionReference=123&trackingNumber=123&carrier=abc to your homepage’s url. For example, if your store is www.mystore.mybigcommerce.com, navigate to www.mystore.mybigcommerce.com?transactionReference=123&trackingNumber=123&carrier=abc.
  4. Verify that the order tracking modal appears.
  5. Navigate to Marketing, then Transactional Emails. Select Order Email. Then, add the following snippet to the HTML template in the Code section. A good place for this might be under the order number just below any “Thanks for your order” messaging or title.
<a href="{{store.ssl_path}}?orderNumber={{order.id}}" target="_blank">Track your order</a>

BigCommerce Snippet Placement 7. Save.

Magento Commerce

  1. Log in to the Magento Commerce console.
  2. Navigate to Stores > Configurations > Payment Options > Bolt.
  3. Enable Bolt order management.
  4. Navigate to the store’s home page. (e.g., www.mystore.com)
  5. Append ?transactionReference=123&trackingNumber=123&carrier=abc to the URL. At this stage, the sign-in modal should pop up automatically (but not bring up a tracking page).
  6. Navigate to Marketing > Communications > Email Templates.
  7. Edit or create the email template New Order. Look for the line with “Once your package ships” and remove it along with the tracking link beneath it.
  8. Add the following tracking link:
{{trans '<a href="%account_url">Track Your Order</a>.' account_url="$this.getUrl($store, '/', [_query:[orderNumber:$order.increment_id],_nosid:1])" |raw}}

WooCommerce

WooCommerce does not provide native functionality for order/shipment tracking. However, you can use a WooCommerce third-party add-on to enable shipment tracking.

If you are using the plugin to configure tracking, then you can continue enabling Order Tracking for Bolt:

  1. Whitelist Bolt
    Whitelist the provided Bolt IP addresses on your production site. You can retrieve this from your Merchant dashboard or your Bolt representative.

  2. Install Bolt Production Keys on Your Production Site
    Retrieve the Publishable Key, Secret Key, and API Key from your Bolt Merchant Dashboard in the Developer tab to use where needed in your WooCommerce production site. Make sure to use production keys, not staging keys, on your production site!

  3. Configure Webhook URLs in the Bolt Merchant Dashboard
    Go to your Bolt Merchant Dashboard. Then, go to Developers and scroll to Merchant API and set up the three following URL Configurations:

    • Webhook
    • Shipping and Tax
    • Create Order

Note that in WooCommerce, you should have three sets of keys - one for the Webstore, one for Back Office orders, and one for a Payment Only division.

  1. Configure Bolt Settings in Wordpress
    Configure the following Bolt settings in your Wordpress Admin Dashboard.
Setting Value
Enabled true
Sandbox Mode true
Keys (Including API Key, Signing Secret, Publishable Key - Multistep, Publishable Key - Backoffice Order.) Keys and URL Configurations can be found in the Bolt Merchant Dashboard, in the Developers tab.
Cart Page true
Mini Cart false
Native Checkout Page false
Pay for Order true
Hide default button true
Product Page Checkout true
Subscriptions false
Primary Color Leave empty.
Additional CSS .product-price{display:block !important;}
Title in Checkout Page Credit or Debit Card
Description in Checkout Page Pay via Bolt
Merchant Scope Account false
CSS class for Bolt button of checkout payment field. Leave empty.
CSS class for Bolt button of shopping cart. bolt-multi-step-checkout with-cards
CSS class for Bolt button of mini cart. bolt-multi-step-checkout with-cards
CSS class for Bolt button of product page checkout. bolt-multi-step-checkout with-cards
CSS class for Bolt button of subscription checkout. bolt-multi-step-checkout with-cards
Shipping to PO Box. true
Sync Abandoned Cart Emails with Woocommerce. None.
Login required message. “You must be registered and logged in to make this order.”
Session Lifetime (in hours). 72
State field validation false
Displace Notices Selector. .entry-content .woocommerce
Severity Level Info
Enable Bolt checkout analytics. false
Javascript event: check Leave empty.
Javascript event: success Leave empty.
Javascript event: close Leave empty.
Additional Javascript Leave empty.
Javascript event: onEmailEnter Leave empty.
Javascript event: onCheckoutStart Leave empty.
Javascript event: onShippingDetailsComplete Leave empty.
Javascript event: onShippingOptionsComplete Leave empty.
  1. Install your custom Bolt extension using the WooCommerce Extensions Guide.
    Your extension includes the following customizations:
    • Redirect to the cart page after successful addition.
    • Change the link of mini-cart widget to cart page.
    • The plugin “WooCommerce Checkout Field Editor” disables the shipping fields on checkout page, and it breaks Bolt checkout eventually, so we need to restore these fields.
    • Restore quantity field on the cart page.
    • Make Bolt PPC work on different templates of single product page.

Custom API

  1. Gather the order tracking number and carrier information used for the shipment.
  2. Submit a POST request to the Bolt API Track Shipment endpoint /v1/merchants/track_shipment.
  3. Display the order tracking dashboard to your shoppers using the following script:
<script> 
  id="bolt-account"
  type="text/javascript"
  src="https://connect.bolt.com/account.js"
  data-publishable-key=<publishable_key>
</script>

Customizations

Merchants have the option to customize the Track My Order button in the following ways:

  • Bolt Logo Color: --bolt-track-my-order-logo-color
  • Button Text Color: --bolt-track-my-order-text-color
  • Button Text Font: --bolt-track-my-order-font
  • Bolt Logo & Button Text Color: --bolt-track-my-order-color

Both the text (--bolt-track-my-order-text-color) and logo color (--bolt-track-my-order-logo-color) take precedence over --bolt-track-my-order-color.

Default Styling

  • Bolt Blue: $bolt-blue (#006cff)
  • Bolt Font: $system-font-family (-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;)
👎

How did we do?

📖On This Page