前段时间许多顾客有明确提出两个难题，有关Shopify店面使用者订货追踪的市场需求。那时许多商家有透过App去化解那个难题，无论使用者与否登入，都能透过输出Tracking Number来去查阅仓储重要信息。

那个技术细节能减少使用者对他们中文网站的信赖，让使用者真的下完单后是永古约省的，订货号是Bokaro的，能即时晓得他们订货的仓储重要信息。

新体验效用较为好的App都须要收费项目，那那时小贴士就教他们用标识符写两个单纯的Track Order网页，Lannemezan。效用如下表所示图：

我以Brooklyn主轴为例，给他们做两个完备的关键步骤模拟。

1.建立Page模版

点选 Online Store -> Theme -> Actions -> Edit Code，在templates产品目录下优先选择Add a new template，跳脱弹框后，下拉框优先选择page，template英文名字重新命名为track-order，点选Create Template。

2.加进网页表明文本

登出来才刚建立的新文档，找出{{ page.content }}，将下列标识符输出到{{ page.content }}上面第一行。

<input type="text" id="YQNum" maxlength="50" placeholder="Enter Tracking Number"/> <input type="button" value="Track Order" onclick="doTrack()" id="YQButton"/> <div id="YQContainer"></div>

如下表所示图：

3.加进tracking方法论

在现阶段文档的最结尾，加进下列标识符，加进顺利完成后点选Save，留存修正后的文档。

<script type="text/javascript" src="//www.17track.net/externalcall.js"></script> <script type="text/javascript"> function doTrack() { var num = document.getElementById("YQNum").value; if(num===""){ alert("Enter your number."); return; } YQV5.trackSingle({ YQ_ContainerId:"YQContainer", YQ_Height:560, YQ_Fc:"0", YQ_Lang:"en", YQ_Num:num }); } </script> <style> #YQContainer{ margin-top: 20px; } #YQNum{ margin-top: 10px; border: 1px solid #cccccc; padding: 6px 10px; width: 200px; vertical-align: middle; height: 36px; font-size: 14px; } #YQButton{ margin-top: 10px; width: 120px; color: #FFFFFF; background: #F58D17; border: none; padding: 6px 10px; vertical-align: middle; height: 36px; } </style>

4.建立page网页

回到店面后台，点选Online Store -> Pages -> Create Page，网页模版Template中优先选择page.track-order，填写page标题及文本，如下表所示图进行操作：

最终网页表明效用如下表所示，最后一步，将Track Order网页透过Navigation链接到顶部和尾部导航栏即可。

本篇文章就分享到这里了。如果对文中所涉及文本有疑问处，可联系小贴士QQ : 2790641050。欢迎加入免费Shopify技术交流qq群：632205694，如有疑问，也可在群中与小贴士实时交流。

如果真的小贴士的文章对你有价值，动动你的手指，帮忙关注并转发，谢谢！

除非注明，文章均为 SFS技术服务 原创，转载请注明来源，谢谢！

SFS为国内首家专注于Shopify技术服务的供应商，因为专注，所以专业。

他们的中文网站：https://app.shopifyfs.com

商务合作： bd@sfsup.com

▼往期精彩回顾▼

▼更多精彩推荐，请关注他们▼