How to Embed Track Button Widget to Shopify?

Embedding Track Button widget on Shopify provides your customers checking the status of their shipment and seeing the real-time updates on the package. Here, I will show you how to add Track Button on Shopify.

Firstly, you can go to Shopify Admin > Online Store > Pages, and add a Track Your Order page. You can introduce how to track and click Show HTML.

Then you can go to Trackdog, there are three Track Button Styles, you can select one and copy the Embed Code.

Back to Shopify Admin and paste the Embed Code here, save this page.

You can copy this code and paste to your Shopify page directly:

<div style="max-width: 680px; margin: 0 auto; text-align: center;"> <div style="margin-bottom: 20px;">Enter your tracking number to see the tracking details</div> <div style="display: flex; margin-bottom: 20px; height:40px;"> <input id="trackNum" maxlength="50" type="text" style="box-sizing:content-box; flex: 1; margin-right: 10px; padding: 0; padding-left: 10px; padding-right: 10px; border: 1px solid #9e9e9e; height: calc(100% - 2px);" /> <input onclick="inputTrack()" type="button" value="TRACK" style=" border: 1px solid #ec640c; border-radius: 2px; padding: 8px 0; width: 80px; height: 100%; color: #fff; font-size: 14px; background-color: #f74b16;"/> </div> <div id="trackContainer"></div> </div> <script src="//static.trackdog.com/static/externalcall.min.js"></script> <script> // <![CDATA[ function inputTrack() { var num = document.getElementById("trackNum").value; if (num === "") { alert("Please enter tracking number"); return; } TDTrackJs.trackAppend({ TD_ContainerId: "trackContainer", TD_Num: num, TD_Code: "", TD_Lang: "", TD_Width: 680, TD_Height: 560 }); } // ]]> </script>

After that, you can preview this page on Shopify.

Then you can add this page to your Shopify store’s Navigation, for example, I add it to the Footer menu.

Finished, the Trackdog Track Button has been embedded to your Shopify store. You can go to your store and try this feature.

If you want your buyers to check shipments without entering the tracking number manually, you can enter your own tracking URL, for example: https://www.websitename.com/pages/track-your-order?tn=
And you can copy this code and paste to your Shopify page:

<div style="max-width: 680px; margin: 0 auto; text-align: center;"> <div style="margin-bottom: 20px;">Enter your tracking number to see the tracking details</div> <div style="display: flex; margin-bottom: 20px; height:40px;"> <input id="trackNum" maxlength="50" type="text" style="box-sizing:content-box; flex: 1; margin-right: 10px; padding: 0; padding-left: 10px; padding-right: 10px; border: 1px solid #9e9e9e; height: calc(100% - 2px);" /> <input onclick="inputTrack()" type="button" value="TRACK" style=" border: 1px solid #ec640c; border-radius: 2px; padding: 8px 0; width: 80px; height: 100%; color: #fff; font-size: 14px; background-color: #f74b16;"/> </div> <div id="trackContainer"></div> </div> <script src="//static.trackdog.com/static/externalcall.min.js"></script> <script> // <![CDATA[ var getQueryString = function (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"), strArr = window.location.search.substr(1).match(reg); return strArr ? strArr[2] : null; }; var trackNum = getQueryString("tn"), trackCode = getQueryString("code"); function inputTrack() { var num = document.getElementById("trackNum").value; if (num === "") { alert("Please enter tracking number"); return; } TDTrackJs.trackAppend({ TD_ContainerId: "trackContainer", TD_Num: num, TD_Code: trackCode || "", TD_Lang: "", TD_Width: 680, TD_Height: 560 }); } if(trackNum){ document.getElementById("trackNum").value = trackNum; inputTrack(); } // ]]> </script>

In this way, when your buyer click the tracking number, it will direct to your tracking page and check the shipment details.