Add Track Button to Shopify Store

AfterShip track button can be easily inserted into the Shopify store with just a few clicks. Also, you can customize its placement in your store so that it is in sync with the store design.

🔧 Add a new page

Login to your Shopify store > Online store > Pages > Add pages

Add title > Save changes

🔧 Insert track button

Log in to your Shopify store > Online store > Pages

Select a web page to add track button > Change to HTML editor by clicking the “<>” button

Insert the below-mentioned track button code

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

You can also replace data-domain=”track.aftership.com” with AfterShip username or custom domain and apply your carrier settings.

🔧 Pre-input tracking number to Order History Page

Login to your Shopify store > Online Store > Themes > Actions > Edit code

Search for customers/order.liquid theme

Insert below-mentioned code after <tbody> tag

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

Search for  line_item.fulfillment.tracking_url . Look for the below-mentioned code

<a href="{{ line_item.fulfillment.tracking_url }}">{{ line_item.fulfillment.tracking_company }} #{{ line_item.fulfillment.tracking_number}}</a>

Replace it with the below code snippet

<div class="as-track-button" data-tracking-number="{{ line_item.fulfillment.tracking_number}}" data-domain="track.aftership.com" data-size="small"></div>

4.a) If your theme shows tbody and line_item, but not fulfillment.tracking_number

Search for below-mentioned code

<div {{line_item.fulfillment.tracking_company}} {%- if line_item.fulfillment.tracking_number -%} #{{line_item.fulfillment.tracking_number}}{%-endif-%}</div>

Replace it with the below code

<div class="as-track-button" data-tracking-number="{{ line_item.fulfillment.tracking_number}}" data-domain="track.aftership.com" data-size="small"></div>

4.b) If your theme is NOT showing tbody, line_item, or fulfillment.tracking_number

Insert the following code after <tbody> tag

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

You can also replace data-domain=”track.aftership.com” with AfterShip username or custom domain and apply your carrier settings.

🔧 Customize CSS settings

If you are unable to view Track Button after inserting the code, it may be due to incompatible CSS settings

Check your CSS elements using Chrome (Right-click > Inspect Element)
Find the elements that wrap the Track Button. Look for values of

overflow or/and visibility

(Note: check id= “body”, id= “page”)

Update the CSS codes as shown below (change value to Visible)

overflow: visible, visibility: visible

Log in to your Shopify store > Online store > Themes > go to style.css.liquid

Update CSS file > Save changes

Updated on: 07/10/2022