How can I add Track Button to Shopify?

IN THIS ARTICLE

1. Insert Track Button to a New Page

a. Add a new  page .
b. Change to HTML editor by clicking  < > 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)

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)

If you successfully insert the Track Button code, but the Track Button or Tracking Results are not showing, it is most likely caused by your CSS settings of the theme.

a. Check your CSS elements using Chrome:  Right clickInspect Element   
b. Find the elements that wrap the Track Button, and see if you can find:  
overflow: hidden; or/and  
visibility: hidden   
(Notes: check  id="body"id="page" as many users found the css elements)   

c. Update the CSS codes and see if the Track Button or Tracking results are showing:
overflow: visible
visibility: visible 

d. Login to your Shopify store, update the CSS file at  themesstyle.css.liquid .

Still need help? Contact Us Contact Us