How can I add Track Button to Shopify?

1. Insert Track Button to a New Page

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

a. Click  Online Store > Themes >  Edit HTML/CSS .     

 

b. Copy and edit the code  customers/order.liquid to a text editor, e.g.  sublime text editor (FREE).

 

 

 

c. Insert code after  <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)