In the world of e-commerce, providing a seamless and transparent shopping experience for customers is crucial for the success of any online store. One important aspect of this experience is the ability for customers to track their orders easily and efficiently. As a Shopify store owner, it is important to offer your customers a way to track their orders without any hassle. In this article, we will walk you through the steps on how to add an order tracking page in your Shopify store, allowing your customers to stay informed and satisfied with their purchases.
So, let's dive in and learn how to add order tracking to Shopify.
Step 1:
After logging in to your Shopify Admin, click and open the "Online Store" tab from the left dashboard. Then select the "Themes" option just below.
Step 2:
Next find your current theme at the top and click Customize.
Step 3:
Now navigate to the page where you would like to add the order tracking form to, then click "Add Section" from the left dashboard. Then scroll to the bottom of the section options and add the Custom Liqud section.
Step 4:
Next type or Copy & Paste (Ctrl+C) the line of code below in the Liquid Code box of your new section.
<div style="text-align: center; font-weight: bold;">Enter your tracking number here to see your order status.</div>
<br>
<div style="text-align: center;"><input type="text" id="YQNum" maxlength="50"> <input id="trackbutton" type="button" value="TRACK" onclick="doTrack()"></div>
<div id="YQContainer"></div>
<!--CONTACT @BIZNAZZ101 FOR HELP WITH YOUR STORE.-->
<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>
<style>
#YQNum {
height: 36px;
width: 300px;
border-radius: 20px;
border: 1px solid;
}
#trackbutton {
margin: 5px;
margin-top: none;
height: 36px;
font-weight: bold;
border: 2px solid;
border-radius: 8px;
color: #4770db;
} </style>
Step 5:
Now you can adjust the text as needed at the top of your code. When you are happy with the results select Save.
(Note: You can use this method to add tracking to any page in your Shopify store.)
Step 6:
Finally, Preview your Shopify Store, and confirm the changes. You have now successfully added an order tracking page in your store!
Additional Steps:
Need help designing your Shopify store? Take advantage of our Shopify Small Tasks to quickly improve your store.
