Add 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 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="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>

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

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

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

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

 

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