Add Order Lookup Widget (Track Button) to BigCommerce store

 👉 Add Order Lookup Widget 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

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

🔧 Insert Track Button 

  1. Login to your Bigcommerce store > Web Pages > Select a web page to add track button 
  2. Copy the below-mentioned HTML code
<div class="as-track-button" data-domain="" data-size="large"></div>
<div id="as-root"></div>
(function(e,t,n){var r,i=e.getElementsByTagName(t)[0];if(e.getElementById(n))return;r=e.createElement(t);;r.src="//";i.parentNode.insertBefore(r,i)})(document,"script","aftership-jssdk")

   3. Paste it in HTML source editor > Update

You can also replace data-domain="" 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)

  1. Login to your Bigcommerce store > Storefront > My Themes > Advanced > Make a copy > Type a name and Save 
  2. Click on the action icon of copied theme and Edit theme files 
  3. Templates > Pages > Account > Orders > details.html
  4. Search for the below-mentioned code in the HTML body
{{#if shipping_track.url}}
    <a href="{{shipping_track.url}}">

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

{{#if shipping_track.url}}

Replace it with the below code snippet and Save changes

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

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

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

Replace it with the below code snippet and Save changes

<div id="as-root"></div>
(function(e,t,n){var r,i=e.getElementsByTagName(t)[0];if(e.getElementById(n))return;r=e.createElement(t);;r.src="//";i.parentNode.insertBefore(r,i)})(document,"script","aftership-jssdk")
  <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="" data-size="small"data-tracking-number="%%GLOBAL_TrackingNumber%%" ></div>

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


Was this article helpful?
0 out of 1 found this helpful