How to add an order tracking system on a Shopify store

We will see in this tutorial how to install a tracking system on Shopify allowing the customer to track his package. Indeed the tracking of your packages on Shopify is essential for your customers to be able to follow the status of their order in real time. In addition it will greatly reduce your after-sales service and that’s good to take 😀

The proposed service will be that of Trackingmore, it is the most efficient Free widget available today. If you need a more advanced tracking system you will have to turn to a paid application like Trakr or AfterShip.

How to install the Tracking service in a Shopify page

You can see the result on this demo page: Order tracking page

Password : Speedecom

Start by creating a page that you will name “Order tracking” (or anything else you’d prefer). Then switch to code mode by clicking on </> (the icon at the top right of your editor) and copy/paste the code below:

Tracking code with auto-detection of the transport service

<p style="text-align: left;">You want to see where your order is ? Just add the tracking number you have received in the field below.</p>
<p style="text-align: left;">If you need anything else, contact our support team and we will help you out !</p>
<script type="text/javascript" src="//s.trackingmore.com/plugins/v1/buttonCurrent.js"></script>
<div style="width: 100%; margin: 0 auto; text-align: center;"><form role="form" action="//track.trackingmore.com" method="get" onsubmit="return false">
<div class="TM_input-group"><input type="text" class="TM_my_search_input_style " id="button_tracking_number" placeholder="Tracking number" name="button_tracking_number" value="" autocomplete="off" maxlength="100" style="border-color: #ff4a00;" /> <span class="TM_input-group-btn"> <button class="TM_my_search_button_style " id="query" type="button" onclick="return doTrack()" style="background-color: #ff4a00;">Track your order</button> </span></div>
<input type="hidden" name="lang" value="en" /> <input id="button_express_code" type="hidden" name="lang" value="" /></form>
<div id="TRNum"></div>
</div>
<style><!--
#button_tracking_number { border-color:#333!important; }
.TM_my_search_button_style { background-color:#333!important; }
@media screen and (max-width: 600px) {
.TM_input-group { display:block; }
#button_tracking_number { border-radius:0;  }
.TM_my_search_button_style { margin-top:15px; display:block; width:100%; border-radius:0;  }
}
--></style>

If you want to change the language of the tracking system and put it in French (as an example), you just need to modify the following code : change name=”lang” value=”en” by name=”lang” value=”fr”

After that, you also need to change the texts in the code as well as any content you will add into the page.

And in terms of design, is there anything we can do?

Of course 😉 if you want to change the color of the border and the background of the button you can change the hexadecimal colors of the code portion at the very bottom!

For the border

#button_tracking_number { border-color:#333!important; }

For the bottom of the button

.TM_my_search_button_style { background-color:#333!important; }

All you have to do now is test run the system to see if everything works properly!

This tutorial is also available in video format

Hope you found this tutorial helpful ! You have any ideas for new tutorials ?

Any questions about this one ? Leave me a comment 😉

Share this article

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp
Share on email

Leave a Reply

Your email address will not be published. Required fields are marked *