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>