Articles on: Tracking Page

Add Order Lookup Widget (Track Button) to BigCommerce Store

Tracking shipments correctly plays a very critical role in delivering a seamless online shopping experience.

💡 Do you know? Studies show 75% of shoppers rate order tracking as an important aspect of a delightful online purchase experience.

AfterShip track button apart from allowing shoppers to check order status with just a click is very easy to use.

🔧 Add a new Web Page

Login to your Bigcommerce store > Storefront > Web pages
Create a web page > Select “Contain content created using the WYSIWYG editor”
Enter page name (e.g. Track Your Order) and URL > Save

🔧 Insert Track Button

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

Paste it in HTML source editor > Update

You can also replace data-domain="track.aftership.com" with AfterShip username or custom domain and apply your carrier settings.

👉Add Track Button to BigCommerce Order History Page

🔧 Pre-input tracking number (Stencil theme)

Login to your Bigcommerce store > Storefront > My Themes > Advanced > Make a copy > Type a name and Save
Click on the action icon of copied theme and Edit theme files
Templates > Pages > Account > Orders > details.html
Search for the below-mentioned code in the HTML body

{{#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}}

Replace it with the below code snippet and Save changes

{{#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}}

🔧 Pre-input Tracking Number (Non-Stencil theme)

Login to your Bigcommerce store > Store setup > Design
Edit HTML/CSS for current theme
Search for Other Template Files > Snippets > AccountShipmentRow.html
Search for the below-mentioned 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>

Replace it with the below code snippet and Save changes

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

Note: If instead of tracking number you get <a href=, make sure to enter parameter %%GLOBAL_TrackingNumber%% and not %%GLOBAL_TrackingLink%%.

Updated on: 07/10/2022

Was this article helpful?