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
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
Login to your Bigcommerce store > Web Pages > Select a web page to add track button
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>
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}} — {{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
Thank you!