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.




    • Related Articles

    • How to set up the Mega menu?

      Follow the steps below to add Mega menu: 1. From Shopify admin > Online store >Themes> Theme settings> Logos and Mega Menu. 2. You see the Mega Menu options to enable and save the changes. 3. Go back to Sections. 4.  Open any mega menu from sections ...

    • Discount code not working. Can you help?

      When the customer enters a discount code, the discount is not applied directly to the cart but it is applied in the checkout page automatically.   What you need to do is to enter the discount and continue to checkout. You will be able to see the ...

    • How to add custom content in tabs on Products Page for specific products

      In the theme Customiser -> select the  Product Page Here you scroll the option down and you will see checkboxes to enable disable tabs         The tabs will look like this: The content can be simple HTML formatting which you can use the code ...

    • How do I add a collection to my homepage? I would also like to showcase the products in home page.

      To Create collections, you can follow the instructions in this article: https://help.shopify.com/en/manual/products/collections/manual-shopify-collection#create-a-manual-collection --- Please follow the steps to showcase the products in home page:  ...

    • How do I add products from Rito's Vault to my store?

      Install "Oberlo - Aliexpress.com Product Importer"  (https://chrome.google.com/webstore/detail/oberlo-aliexpresscom-prod/hmanipjnbjnhoicdnooapcnfonebefel?hl=en) Google Chrome Extensions. Then follow the below steps to get products from AliExpress to ...