How can I add the "Track Order" option on the top nav menu or page?

How can I add the "Track Order" option on the top nav menu or page?

Log into Shopify admin>Online Store>Themes>Customize (on right).

Code to be used inside a page to enable tracking of orders:

  1. <div style="text-align: center;"></div>
  2. <div style="text-align: center;"></div>
  3. <div style="text-align: center;">Can't wait for your order to arrive? We've got you covered! Use the Tracking Code we have sent you in the shipment confirmation email (which you should receive a few days after placing your order) and find out exactly how close you are to receiving your new, awesome product!</div>
  4. <hr style="width: 100%; margin: 15px 0 15px 0;" />
  5. <div style="text-align: center;">Enter your tracking code below and press the "TRACK" button.</div>
  6. <br />
  7. <div style="text-align: center;"><!--Tracking number input box.--> <input style="width: 350px; margin-bottom: 10px;" type="text" id="YQNum" maxlength="30" /></div>
  8. <div style="text-align: center;"><!--The button is used to call script method.--></div>
  9. <div style="text-align: center;"></div>
  10. <div style="text-align: center;"><input type="button" style="text-align: center; width: 220px; height: 60px; background-color: #f2a345; color: white; border-radius: 10px;" value="TRACK" onclick="doTrack()" /> <!--Container to display the tracking result.--></div>
  11. <div id="YQContainer"></div>
  12. <!--Script code can be put in the bottom of the page, wait until the page is loaded then execute.-->
  13. <script type="text/javascript" src="//www.17track.net/externalcall.js"></script>
  14. <script type="text/javascript">// <![CDATA[
  15. function doTrack() {
  16.     var num = document.getElementById("YQNum").value;
  17.     if(num===""){
  18.         alert("Enter your number."); 
  19.         return;
  20.     }
  21.     YQV5.trackSingle({
  22.         //Required, Specify the container ID of the carrier content.
  23.         YQ_ContainerId:"YQContainer",
  24.         //Optional, specify tracking result height, max height 800px, default is 560px.
  25.         YQ_Height:560,
  26.         //Optional, select carrier, default to auto identify.
  27.         YQ_Fc:"0",
  28.         //Optional, specify UI language, default language is automatically detected based on the browser settings.
  29.         YQ_Lang:"en",
  30.         //Required, specify the number needed to be tracked.
  31.         YQ_Num:num
  32.     });
  33. }
  34. // ]]></script>
  35. <hr style="width: 100%; margin: 1px 0 15px 0;" />
  36. <div style="padding: 3%; text-align: center;">If you encounter any issue with your order do not hesitate to <a href="#contact-us"><stong style="color: #f2a345;">contact us</stong></a> and we will resolve any issue immediately.</div>
  37. <div style="padding: 3%; text-align: center;">Keep in mind that order tracking status may take up to 2 working days to update, so don't panic!</div>
---
To create the tracking page follow the below steps:
Online Store -> Pages -> Add Page -> Give a name like “Track Order” or similar -> click on “Show HTML” button and paste the Above code within content box as it is and finally Save the Page.



Once the page created successfully, now you have to create the navigation and connect the above page with the navigation. Follow the below steps to create navigation for “Track Order”:


Online Store -> Navigation ->  Main Menu -> Add Menu Item -> click within Link search box -> select Pages from drop-down list -> select “Track Order” page form the drop-down list, it will link the page and take the name automatically -> now, click on “Add” -> finally, save navigation changes. Now refresh the front-end of your store.


It will look like the below screenshot on front end.