Home » Blog » Create a Free Shopify Order Tracking Page (HTML Script)

Create a Free Shopify Order Tracking Page (HTML Script)

An order tracking page is an essential part of any Shopify store to increase conversion rates. However, implementing it with a tracking app is relatively expensive.

Therefore, we will guide you through the step-by-step process of creating a completely free Shopify order tracking page with an HTML tracking script/code.

Master Dropshipping

We partner with SaleHoo – the most popular online selling directory on the internet to bring you the best online courses dedicated to helping eCommerce & Dropshipping entrepreneurs start a successful store on Shopify, Amazon, and more.

Why do you need an order tracking page for your Shopify store?

By default, after your customers place orders in your store, you send them an order confirmation email with a tracking number. However, if they want to track their orders, they might have to go to a third-party website or ask you directly.

An order tracking page allows your customers to track their orders right on your Shopify store. Not only will this increase the user experience, but also create an opportunity to make them come back and potentially make another purchase. Furthermore, you reduce the number of customer inquiries and have more time to focus on building your business.

How to create a completely free Shopify order tracking page

For this guide, we use 17track – An all-in-one package tracking solution that allows you to track orders of hundreds of shipping carriers around the world.

To start creating a free order tracking page for your Shopify store, go to your Shopify dashboard, click on “Online Store,” and select “Pages.”

Shopify Pages tab

Click the “Add page” button on the top right corner to create a new store page.

Creating a new page in Shopify

Name it “Order Tracking” or whatever you think suitable.

Next, click on the “<>” icon to show the HTML editor of the “Content” section.

Show HTML in Shopify

Then, paste the Shopify order tracking HTML script & code below into the “Content” section.

<p>Looking to track your order? When your Order ships out, you will receive a<span> </span><strong>Shipping Confirmation</strong><span> </span>email from<span> </span><strong>sales@thecleverbusiness.com</strong><span> </span>with your tracking number included in it. Depending on the product ordered, the email could take up to 7 business days to be sent. Once you receive the email, enter your tracking number below to easily check on your delivery status.</p>
<!--Tracking number input box.--> <input type="text" id="YQNum" maxlength="50" /> <!--The button is used to call script method.--> <input type="button" value="TRACK" onclick="doTrack()" /> <!--Container to display the tracking result.-->
<div id="YQContainer"></div>
<!--Script code can be put in the bottom of the page, wait until the page is loaded then execute.-->
<script type="text/javascript" src="//www.17track.net/externalcall.js"></script>
<script type="text/javascript">// <![CDATA[
function doTrack() {
var num = document.getElementById("YQNum").value;
if(num===""){
alert("Enter your number.");
return;
}
YQV5.trackSingle({
//Required, Specify the container ID of the carrier content.
YQ_ContainerId:"YQContainer",
//Optional, specify tracking result height, max height 800px, default is 560px.
YQ_Height:560,
//Optional, select carrier, default to auto identify.
YQ_Fc:"0",
//Optional, specify UI language, default language is automatically detected based on the browser settings.
YQ_Lang:"en",
//Required, specify the number needed to be tracked.
YQ_Num:num
});
}
// ]]></script>
<h3>Things to Keep in Mind:</h3>
<p>Order Numbers don’t instantly update with available Delivery Status. If your tracking number entered shows that it is currently unavailable, do not be alarmed - Your order has been shipped out and is in transit to the local post office. Tracking should be updating within a few business days. Depending on the destination, the order may take 10 to 15 business days to be delivered.</p>
<p>If you see any irrelevant ads on the tracking popup, we are sincerely sorry. We use a third-party order tracking service to ensure the best tracking result so we have no way of controlling the ads shown on it. Thank you for your understanding.</p>
<p>Happy shopping!</p>

Remember to change “sales@thecleverbusiness.com” to your own business email.

If you know a little bit about HTML code, you can customize the line “<input type=”text” id=”YQNum” maxlength=”50″ />” and “<input type=”button” value=”TRACK” onclick=”doTrack()” />” to fit the style of your Shopify store better.

Everything should look like this:

Shopify order tracking page code

The result is a free custom Shopify order tracking page on your store with an embedded 17track field. Your customers can enter the tracking numbers in the blank field to see the status of their orders.

Free Shopify order tracking page

Remember to add this page to your store’s navigation so your customers can easily access and use it.

Alternative Shopify order tracking apps

If you want to implement a more versatile tracking page for your Shopify store, the fastest way is to install a third-party Shopify tracking app.

AfterShip

AfterShip Shopify order tracking app

AfterShip is one of the best Shopify apps that allows you to track shipments and parcels of more than 670 carriers worldwide in one place.

Furthermore, the app enables you to create your own branded tracking page and notify your customers about their orders’ status. Therefore, you can reduce the number of customer complaints and focus more on growing your business.

Aftership Shopify order tracking app pricing

The app is completely free to use up to 50 shipments/month.

Upgrading to the $9/month plan or higher gives you access to premium features like advanced search, post-purchase communications, in-depth analytics, and more shipment quotas per month.

TrackingMore

TrackingMore Shopify order tracking app

Another powerful order tracking app is TrackingMore. Similar to AfterShip, you can create your own Shopify tracking page with the ability to track more than 700 couriers worldwide. You can also set up automatic notifications to send delivery status changes to your customers.

Shipway Shopify order tracking app pricing

TrackingMore is free to use if your store has no more than 50 orders/month. A paid plan starts at $9/month.

Shipway

Shipway Shopify order tracking app

The final order tracking app we want to mention is Shipway. Besides allowing you to customize your tracking page and send notifications, the app lets you analyze carrier performance, so you know which carrier works best for your store.

On top of that, With the ability to measure customer satisfaction using the Net Promoter Score, you know what goes wrong and improve user experience.

Shipway Shopify order tracking app pricing

If your store has less than 100 orders/month, the app is free. A paid plan starts from $9/500 shipments.

Useful Resources

Share this:

Leave a Reply