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.