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: 16 / 02 / 2021