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 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-->

2. Refresh the page.
3. Preview the theme and review.
4. Publish the theme.
5. Navigate to the account_hostpage_url.
6. Append ?transactionReference=123&trackingNumber=123&carrier=abc.
7. Verify that the signing modal appears.
8. Navigate to Storefront > Email Templates.
9. Edit Invoice.html.
10. Add the following tracking link beneath %%GLOBAL_PendingPaymentDetails%%:

%%GLOBAL_PendingPaymentDetails%% %%GLOBAL_OrderCommentBlock%%

Order Tracking Link %%GLOBAL_ShopPathSSL%%?orderNumber=%%GLOBAL_OrderNumber%%

11. 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}}

Custom API

1. Gather the order tracking number and carrier information used for the shipment.
2. Submit a POST request to the Bolt API’s 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

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;)