Add Order Lookup Widget (Track Button) to BigCommerce Store

Plans: All plans Platforms: BigCommerce

Overview

Give your customers a seamless post-purchase experience with AfterShip Order Lookup widget designed to facilitate 1-click order tracking. Set up, customize, and add the widget (Track button) to your BigCommerce store to enable customers to find answers to their WISMO queries on their own by inputting their order number and email, or tracking number, or all three for quick whereabouts of their orders.

What you’ll learn

In this tutorial, we will show you:

Set up order lookup widget
Insert track button code in BigCommerce
Add Track Button to BigCommerce order history page

Start off by setting up your order lookup widget in your AfterShip Tracking admin. Find the complete guide for step-by-step instructions here > .

Copy the code

Once the order lookup widget is configured to your liking, copy the corresponding codes #1 and #2 from the side panel under Get code section and keep it aside for later use.

Insert track button code in BigCommerce

Add a new web page in BigCommerce or add the track button in any existing page you wish to.

Log in to your BigCommerce store > Channel manager > Storefronts. Select a storefront where you want to add the track button.
Click the {...} icon > Edit settings
Select Web pages on the side navigation
Click Create a Web Page. Contain content created using the WYSIWYG editor below will be selected by default

Enter Page Name (e.g. Track your order) and the URL path (default) will auto-generate. You can reset the path if you wish
Paste the code #1 and #2 you have set aside from AfterShip Tracking admin
On the Page content editor, open the HTML source editor, and insert the body tags. Paste the copied codes #1 and #2 between the body tags
Click Update > Save & Exit

Go to your BigCommerce store to see how the order lookup widget would look to your customers.

Add Track Button to BigCommerce order history page

1. Pre-input tracking number (Stencil theme)

Log in to your BigCommerce store > Channel manager > Storefronts. Select a storefront where you want to add the track button.
Click the {...} icon > Edit settings
Select Themes on the side navigation. The current theme your store is using will be listed there.
Select the Advanced option > Make a copy > Add theme name > Save a copy

Click on the action icon {...} of the copied theme and Edit theme files
Go to 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}}

data-domain is the website domain of the tracking page. Can be your_shortcode.aftership.com (default), track.aftership.com, or custom domain.

Customer experience

Pre-input Tracking Number (Non-Stencil theme)

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

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

data-domain is the website domain of the tracking page. Can be your_shortcode.aftership.com (default), track.aftership.com, or custom domain.

Updated on: 08/03/2024

Was this article helpful?

Thank you!