1. Insert Track Button to a New Page
page
.
< >
button at content
.c. Insert the Track Button code below or get at AfterShip site:
<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>
<div class="as-track-button" data-size="large" data-domain="track.aftership.com"></div>
d. Remember to login to your AfterShip account > apps
> Track Button
for custom style. You can also replace data-domain="track.aftership.com"
with your AfterShip username or custom domain to display tracking results, and apply your carrier settings.
e. Name your URL accordingly, e.g. .../track-your-order.
f. Preview your track your order page.
2. Insert Track Button to Order History Page (Pre-input Tracking Number)
Online Store
> Themes
> Edit HTML/CSS
. 
customers/order.liquid
to a text editor, e.g. sublime text editor (FREE).
<tbody>
<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>
d. Edit Code (search for line_item.fulfillment.tracking_url
)
Replace the default tracking link that directs to the courier website with the track button code that displays tracking results within your store.
Find the code:
<a href="{{ line_item.fulfillment.tracking_url }}">{{ line_item.fulfillment.tracking_company }} #{{ line_item.fulfillment.tracking_number}}</a>
Change to: <div class="as-track-button" data-tracking-number="{{ line_item.fulfillment.tracking_number}}" data-domain="track.aftership.com" data-size="small"></div>
You can also replace data-domain="track.aftership.com"
with your AfterShip username or custom domain to display tracking results, and apply your carrier settings.
e. Note - If the order liquid page contain tbody
& line_item
but does not show fulfillment.tracking_number
, you can try to insert the follow code to your theme file customers/order.liquid
{% if line_item.fulfillment.tracking_number %}<div class="as-track-button" data-tracking-number="{{ line_item.fulfillment.tracking_number}}" data-domain="track.aftership.com" data-size="small"></div>
{% endif %}
f. Note - If your theme is NOT even showing tbody
,line_item
or fulfillment.tracking_number
, you can try to insert the follow code to your theme filecustomers/order.liquid
<div class="row">
<div class="span12">
<table id="order_details">
<thead>
<tr>
<th>Item</th>
<th>SKU</th>
<th>Price</th>
<th class="center">Quantity</th>
<th class="total">Total</th>
</tr>
</thead>
<tbody>
<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>
{% for line_item in order.line_items %}
<tr id="{{ line_item.id }}" class="{% cycle 'odd', 'even' %}">
<td class="">
{{ line_item.title | link_to: line_item.product.url }}
{% if line_item.fulfillment %}
<div class="note">
Fulfilled {{ line_item.fulfillment.created_at | date: "%b %d" }}
{% if line_item.fulfillment.tracking_number %}
<div class="as-track-button" data-tracking-number="{{ line_item.fulfillment.tracking_number}}" data-domain="track.aftership.com" data-size="small"></div>
{% endif %}
</div>
{% endif %}
</td>
<td class="sku note">{{ line_item.sku }}</td>
<td class="money">{{ line_item.price | money }}</td>
<td class="quantity cente">{{ line_item.quantity }}</td>
<td class="total money">{{ line_item.quantity | times: line_item.price | money }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
3. Bug Fix - Not displaying the Track Button or Tracking Results (i.e. Hidden)
a. Check your CSS elements using Chrome:
Right click
> Inspect Element
-
overflow: hidden
; or/and visibility: hidden
(Notes: check
id="body"
, id="page"
as many users found the css elements) overflow: visible
visibility: visible
themes
> style.css.liquid
.