创建Shopify订单号查询(track order)页面

在shopify免费创建Track Order页面的方法

创建Shopify订单号查询(track order)页面

Shopify店铺如何设置Page让用户查询追踪订单?

从而实现用户输入卖家给的订单号,买家能够实时追踪订单,而不用跳转到第三方查询。

效果类似下方:

创建Shopify订单号查询(track order)页面

前言

设置shopify用户查询订单,都需要通过https://www.17track.net/en 网站,该网站支持查询全球 1500 多家承运商和 120 多家航空公司。

本文有两种创建shopify店铺订单号查询页面的方法:

一种是通过shopify的APP,需要付费。

另外一种是通过代码,免费的。

方法一:通过APP-收费

APP名字叫17TRACK Order Tracking,有14天的免费试用。

创建Shopify订单号查询(track order)页面

该APP收费如下:

创建Shopify订单号查询(track order)页面

安装好APP,只需要遵循APP的指导安装即可,不同的费用解锁不同的服务内容。

方法二:通过代码-收费

我更推荐通过代码自己创建,毕竟免费,难度也不大。

  1. 在shopify后台创建一个page: Track My order

创建Shopify订单号查询(track order)页面

  1. 按照下方点击,将编辑区转成html编辑格式:

创建Shopify订单号查询(track order)页面

  1. 将以下代码复制进“内容”中

创建Shopify订单号查询(track order)页面

复制以下代码:

<div style=”margin-top: 100px; margin-bottom: 100px;”><!–Tracking number input box.–> <input class=”Form__Input” type=”text” placeholder=”Enter your number” id=”YQNum” maxlength=”50″ style=”width: 100%; height: 57px;”> <!–The button is used to call script method.–> <input class=”Button” style=”background: #000; border-radius: 0; width: 100%; height: 50px; margin-left: 0px; color: #fff;” type=”button” value=”TRACK” onclick=”doTrack()”> <!–Container to display the tracking result.–>

<div id=”YQContainer”></div>

<!–Script code can be put in the bottom of the page, wait until the page is loaded then execute.–> <script type=”text/javascript” src=”//www.17track.net/externalcall.js”></script> <script type=”text/javascript”>// <![CDATA[function doTrack() {

var num = document.getElementById(“YQNum”).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></div>

  1. 最后保存,同时点击“查看页面”,效果如下,创建完成

创建Shopify订单号查询(track order)页面

最后

根据上面的操作,用户在框内输入订单号,就可以直接追踪到物流信息,而不用跳转到第三方。

赶快动手用起来吧!

给自己的shopify独立站也安装一个!

 

请勿转载,本文是否解决你的问题,没有的话请私信我(点击)

(0)
打赏 关注我们 关注我们
上一篇 2023年8月2日
下一篇 2024年2月23日

联系我们

邮件:yephannibal@gmail.com

关注微信