Plans: All plans Platforms: All platforms
Overview
The 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.
Set up order lookup widget
Before adding the track button to your Shopify store, set up how it will work and look in the AfterShip Tracking admin and copy the subsequent code to insert in Shopify.
Find the complete guide here.
Add a new page
Log in 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
Paste the code you copied from the AfterShip admin in the HTML editor
For example:
<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=“https://button.aftership.com/all.js?username=aftershipdemo”;i.parentNode.insertBefore(r,i)})(document,“script”,“aftership-jssdk”)</script>
<div class=“as-track-button” data-size=“medium” data-domain=“aftershipdemo.aftership.com” data-look-up-option=“both” data-btn-label=“Track”></div>
You can also replace data-domain=”track.aftership.com” with an AfterShip username or a 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 the code mentioned below after the 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 code below:
<a href="{{ line_item.fulfillment.tracking_url }}">{{ line_item.fulfillment.tracking_company }} {{ line_item.fulfillment.tracking_number}}</a>
Replace it with the code snippet below
<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 the code mentioned below:
<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 the 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 an AfterShip username or a 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 the 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