Enable 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’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-->
- Refresh the page and preview the theme through BigCommerce’s preview feature to ensure the element added above is present.
- Publish the theme.
- Navigate to your home page and append
?transactionReference=123&trackingNumber=123&carrier=abc
to your homepage’s url. For example, if your store iswww.mystore.mybigcommerce.com
, navigate towww.mystore.mybigcommerce.com?transactionReference=123&trackingNumber=123&carrier=abc
. - Verify that the order tracking modal appears.
Magento Commerce
- Log in to the Magento Commerce console.
- Navigate to Stores > Configurations > Payment Options > Bolt.
- Enable Bolt order management.
- Navigate to the store’s home page. (e.g.,
www.mystore.com
) - 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). - Navigate to Marketing > Communications > Email Templates.
- 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. - 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:
-
Whitelist Bolt Whitelist the provided Bolt IP addresses on your production site. You can retrieve this from your Merchant dashboard or your Bolt representative.
-
Install Bolt Production Keys on Your Production Site Retrieve the Publishable Key, Secret Key, and API Key from your Bolt Merchant Dashboard in Administration > API to use where needed in your WooCommerce production site.
The publishable key is a long string of lower and upper case letters and numbers that consists of three sections.
NOTE
Be sure to use production keys — not staging keys — on your production site.
- Configure Webhook URLs in the Bolt Merchant Dashboard
Go to your Bolt Merchant Dashboard. Then, go to Developers and scroll to Merchant Callback API and set up the three following URL Configurations:
- Webhook
- Shipping and Tax
- Create Order
NOTE
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.
- 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. |
- 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
- Gather the order tracking number and carrier information used for the shipment.
- Submit a
POST
request to the Bolt API Track Shipment endpoint/v1/merchants/track_shipment
. - 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
NOTE
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;)