Blog

You are currently viewing Add FREE order tracking page in Shopify store
Add FREE order tracking page in Shopify store

Add FREE order tracking page in Shopify store

1. Go to Dashboard click on pages and create new page.

2. Toggle the editor to HTML Code and paste below code:

    <style>
      .order-tacking {
        /* text-align: center; */
        margin-bottom: 20px;
      }
      .order-tacking #orderID {
        border-radius: 5px;
        padding: 12px;
        font-size: 20px;
        border: 1.5px solid #a5a5a5;
        font-family: sans-serif;
        margin-bottom: 30px;
      }

      .order-tacking input[type="button"]:hover {
        background: white;
        color: black;
        border: 1.5px solid #a5a5a5;
      }
      .order-tacking .trigger-tack {
        display: flex;
        justify-content: center;
      }
      .order-tacking .order-title {
        font-size: 26px;
        font-family: sans-serif;
      }
    </style>
    <div class="order-tacking">
      <!-- <h2>Track Your Order Status</h2> -->
      <div>
        <input
          placeholder="Enter tracking number."
          type="text"
          id="orderID"
          maxlength="50"
          class="field"
        />
        <input
          class="button"
          type="button"
          value="TRACK"
          onclick="doTrackOrder()"
        />
      </div>
    </div>
    <div id="YQContainer"></div>
    <script
      src="https://www.17track.net/externalcall.js"
      type="text/javascript"
    ></script>
    <script type="text/javascript">
      // <![CDATA[
      function doTrackOrder() {
        var num = document.getElementById("orderID").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>

Add a FREE Order Tracking Page in Shopify Store

Want to give your customers an easy way to track their orders without spending money on a paid Shopify app? In this tutorial, you’ll learn how to add a free order tracking page to your Shopify store and make it easier for customers to check their order status.

An order tracking page is an important feature for any online store. After placing an order, customers naturally want to know where their package is and when it will arrive. Instead of contacting your support team every time they need an update, they can visit your tracking page and find the information themselves.

In this step-by-step tutorial, I’ll show you how to create and add an order tracking page to your Shopify store using free options. You’ll learn how to create the page, add it to your store navigation, and make it accessible to customers.

You’ll also see how to ensure your tracking page works properly on mobile devices, so customers can use it from any screen.

The best part? You don’t need an expensive subscription or complicated coding to get started. Just follow the steps, customize the page to match your store, and give your customers a better shopping experience.

Keep in mind that Shopify already provides secure order status pages with tracking information when you add valid tracking details to fulfilled orders. Order tracking at Shopify+1

For more details, check the official Shopify order tracking guide.

Ready to become a better coder? Don’t miss this tutorial!   Animation Direction in CSS