๐Ÿ‘‰ 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}} &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%%.
Was this article helpful?
Cancel
Thank you!