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

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

2. Add title > Save changes

🔧 Insert track button

1. Log in to your Shopify store > Online store > Pages 

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

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

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

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

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

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

<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 

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

overflow or/and visibility

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

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

overflow: visible, visibility: visible 

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

5. Update CSS file > Save changes