How can I add Track Button to Bigcommerce store?

1. Add a new Web Page

a. Login to your Bigcommerce admin panel 
b. Click Storefront Content --> Web Pages --> Create a Web Page
c. Select  Contain content created using the WYSIWYG editor below
d. Edit Page Name e.g. Track Your Order, and Page URL
e. Edit HTML Source

2. Insert Track Button Code

a. Insert the following code or copy from your  AfterShip account (for specific couriers and custom style):

<div class="as-track-button" data-domain="track.aftership.com" data-size="large"></div>
<div id="as-root"></div>
<script>
(function(e,t,n){var r,i=e.getElementsByTagName(t)[0];if(e.getElementById(n))return;r=e.createElement(t);r.id=n;r.src="//button.aftership.com/all.js";i.parentNode.insertBefore(r,i)})(document,"script","aftership-jssdk")
</script>

 b. Remember to login to your AfterShip account >  apps > Track Button for custom style. You can also replace data-domain="track.aftership.com" with your AfterShip username or custom domain to display tracking results, and apply your carrier settings. 

3. Pre-input Tracking Number at Order History Page (Stencil themes)

Follow these instructions if your theme is a BigCommerce stencil theme

a. Login to your Bigcommerce admin panel
b. Follow "Accessing Edit Theme Files" in this guide:  https://support.bigcommerce.com/articles/Public/Editing-Stencil-Theme-Files
c. Navigate to details.html in the left-hand menu

d. Replace the original code:

{{#if shipping_track.url}}
    <a href="{{shipping_track.url}}">
{{/if}}

{{#if show_shipping_method}}
    {{shipping_track.number}} &mdash; {{shipping_method}}
{{else}}
    {{shipping_track.number}}
{{/if}}

{{#if shipping_track.url}}
    </a>
{{/if}}

 with the following code:

{{#if shipping_track.number}}
    <div id="as-root"></div>
    <script>    
    (function(e,t,n){var r,i=e.getElementsByTagName(t)   [0];if(e.getElementById(n))return;r=e.createElement(t);r.id=n;r.src="//button.aftership.com/all.js";i.parentNode.insertBefore(r,i)})(document,"script","aftership-jssdk")
    </script><br>
    <div class="as-track-button" data-domain="track.aftership.com" data-size="small" data-tracking-number="{{shipping_track.number}}" data-slug="{{shipping_track.asdf}}" >
{{/if}}

e. Save your changes: The track button should now appear on the "order details" page for your customers:

4. Pre-input Tracking Number at Order History Page (non-Stencil themes)

Follow these instructions if your theme is not a BigCommerce stencil theme

a. Login to your Bigcommerce admin panel 
b. Click Store Setup --> Design 
c. Click Edit HTML/CSS for the Current Theme
d. Look for Other Template Files --> Snippets --> AccountOrderShipmentRow.html
 
e. Replace the original code:

<tr>
  <td class="DateShipped">%%GLOBAL_DateShipped%%</td>
  <td class="ShippingMethod">%%GLOBAL_ShippingProvider%% <span style="%%GLOBAL_HideShippingMethod%%"> (%%GLOBAL_ShippingMethod%%)</span></td>
  <td class="TrackingNumber">%%GLOBAL_TrackingLink%%</td>
</tr>

 with the following code:

<div id="as-root"></div>
<script>    
(function(e,t,n){var r,i=e.getElementsByTagName(t)[0];if(e.getElementById(n))return;r=e.createElement(t);r.id=n;r.src="//button.aftership.com/all.js";i.parentNode.insertBefore(r,i)})(document,"script","aftership-jssdk")
</script><br>
<tr><br>      
  <td class="DateShipped">%%GLOBAL_DateShipped%%</td><br>      
  <td class="ShippingMethod">%%GLOBAL_ShippingProvider%%<span style="%%GLOBAL_HideShippingMethod%%"> %%GLOBAL_ShippingMethod%%</span></td><br>
  <td class="TrackingNumber">
  <div class="as-track-button" data-domain="track.aftership.com" data-size="small"data-tracking-number="%%GLOBAL_TrackingNumber%%" ></div>
</td><br>
</tr>


Bug Fix - if showing  <a href= instead of tracking number

Just make sure you use the parameter  %%GLOBAL_TrackingNumber%% instead of %%GLOBAL_TrackingLink%%  for the tracking number in Bigcommerce when using Track button. 

Still need help? Contact Us Contact Us