Shopify店铺发货确认邮件Order Confirmation修改优化

最近同事反馈说，有不少售后邮件是询问订单发货状态的，尽管我们这边只要完成发货就会把所有的运单号同步到Shopify店铺的后台和PayPal的后台，随后Shopify店铺也会自动给客户发一封订单已经发货的通知邮件。如果说只是一两个订单出现这个情况，可能是这一两个客户没有看到Shopify系统发送通知邮件，我们这边也可以直接帮他查询订单的运输状态。但是，这类邮件不在少数，所以，肯定是其中某个环节出现了问题的。

最近 Shopify 在国内不太稳定，如果打不开 Shopify 官网, 或者打开速度很慢，无法注册或者登录 Shopify 账户，请使用“魔法”重试，你懂的。

在自己的Shopify店铺下单寻找其中出现的问题

解决这个问题的最好办法，就是从一个真实用户的角度，去自己的Shopify网站上下一个订单，然后，看看自己能不能通过顺利的查询到该订单的运输状态。那么以下，就是发现问题和解决问题的全过程。

首先，在自己的网站上下一个订单。

因为要解决的问题在订单完成后的发货流程上，所以我们就直接在网站上新建一个售价为0美金的Test产品，产品创建好之后，直接打开产品页面，点击Buy Now按钮，进入到付款流程。像一个真实用户一样，在你的网站上下单，填写收单信息，点击Pay Now，完成订单。

点击BUY IT NOW在Checkout页面填写收件信息，点击Continue to Shipping进入到下一个页面

直接点击Continue to Payment进入到下一页，点击Pay Now完成订单，进入到Thank you页面

订单完成之后，在你的网站后台就有这个订单信息了

然后我们再对这个订单进行发货处理。运单号我这边随意填写一个之前的运单号，LS005448780CN

可以看到，当运单号填写进去之后，Shopify系统会自动识别运单号，将对应的运单号查询地址显示在后面，因为这个运单号是E邮宝的，所以系统就直接显示了China Post作为提供运单查询服务的网站。当然这个地方是可以修改的。这个订单我就先使用默认的China Post，稍后再下几个订单，测试下选择USPS，或者Other，手动填写17Track，会是什么样子的结果。

填写运单号，勾选上Send shipment details to your customer now这个选项，点击确认发货之后，该订单就会自动标记为已发货。稍等几秒钟就收到了订单确认邮件，以及订单发货通知邮件。邮件内容如下。提示说可以点击下面的View your order按钮查询订单的发货状态。

点击按钮之后页面就会跳转到我们网站的Thank you页面，在这里，就可以看到运单号了 – “China Post tracking number: LS005448780CN”

emmmm, 在这个页面中，运单号下没有该订单的最新状态。点击运单号之后，页面跳转到了Track China Post网站的首页。

要在这个网站上查询订单需要怎么做呢？需要客户重新回到Thank you页面，把运单号复制下来，然后再粘贴进China Post的搜索框中去查询运输状态

为了测试，我又额外的下了3个订单#1009，#1010和#1011，1009和1010使用同样的单号，发货的时候分别选择了USPS和Other并填写了17track的网站地址，1011发货的时候随意选了一个澳大利亚的运单号，并选择了Australia Post

测试发现，当我们选择other并且填写17Track.net/en的时候，和我们选择China Post一样，点击Thank you页面的运单号之后页面会直接跳转到17Track网站的首页。而当我们选择USPS和AUSTRALIA POST的时候，体验要好一些，页面会直接跳转到该运单的运输状态页面。

就上面的测试结果来看，发货使用E邮宝，在填写运单号信息的时候，如果选择默认的China Post或者手动填写17Track，客户体验都要差很多。 而选择USPS和AUSTRALIA POST的时候，体验则要好很多。

不过，选择USPS的话，有一点不太好的地方在，当订单还没有到达美国USPS，完成扫码入库之前，运单状态会一直显示Pre-Shipment，下面的进度条一直都是灰色的，需要点击Tracking History按钮之后才能查看到该订单在国内的运输过程。而Australia Post则可以完整显示订单从中国到澳大利亚的整个物流信息，并且只要运单号在国内上网，Australia Post会直接在进度条上显示出物流进度。

那么就上面的整个下单，查询物流信息的流程里面，我们在哪几方面可以提高用户体验呢？

1. 在发货通知邮件里面，直接把运单号和运单查询网址填写进去，方便客户直接在邮件里面看到相关信息
2. 点击邮件里面的查询运单信息的按钮之后，可以直接跳转到有物流信息的页面
3. 在网站的FAQ页面里面写明订单查询的流程

问题找到了，解决问题的方向也找到了，下一步，就是要真正的着手去解决问题了。

修改Shopify默认订单发货确认通知邮件

修改Shipping Confirmation的邮件内容。一堆代码，怎么办？找谷歌和Shopify官方的相关说明文档啊。我会直接谷歌搜索how to insert tracking number into shopify order confirmation email。然后去找答案

通过搜索结果，至少我已经了解到，这个不是我一个人的需求，蛮多人都在找相关的解决方案。其中Shopify论坛里面的Todd19的回答为我提供了方向，顺藤摸瓜，在翻看了Shopify官方相关内容的说明文档，我感觉用我学到的那一丢丢HTML，应该是可以解决这个问题的。

直接把解决方案写在下面:

Setting 页面打开Notifications

在Shipping板块找到Shipping confirmation打开。

在Shipping confirmation页面中，找到如下代码片段。你可以直接键盘快捷键“Ctrl+F”调出搜索框搜索“<td class=”button__cell”>”，第一个搜索结果的位置就是我们需要修改的部分。建议直接复制橙色字体部分代码内容，替换你的Shopify Shipping confirmation页面对应代码部分内容。请不要全部复制粘贴以防出现错误。

修改Shopify邮件内容的代码

 <h2>{{ email_title }}</h2>
            <p>{{ email_body }}</p>
            {% if fulfillment.estimated_delivery_at %}
              <p>{{ email_emphasis }}</p>
            {% endif %}
            {% if order_status_url %}
              <table class="row actions">
  <tr>
    <td class="empty-line"> </td>
  </tr>
  <tr>
    <td class="actions__cell">
      <table class="button main-action-cell">
        <tr>
          <td class="button__cell"><a href="https://t.17track.net/en#nums={{ fulfillment.tracking_numbers }}" class="button__text">Track your order now</a>
        </td>
        </tr>
      </table>
      {% if shop.url %}
    <table class="link secondary-action-cell">
      <tr>
        <td class="link__cell">Your tracking number is {{ fulfillment.tracking_numbers }}. <br>You can also <a href="{{ order_status_url }}">view your order</a> or <a href="{{ shop.url }}">visit our store</a></td>
      </tr>
    </table>
{% endif %}
    </td>
  </tr>
</table>

在上面的代码里面，我把17Track的网站地址放到了按钮里面，该链接分两部分，前半部分是17track的物流信息页面，后半部分是订单对应的物流运单号  https://t.17track.net/en#nums={{ fulfillment.tracking_numbers }}

我这里选用17Track是因为17Track的页面相比较China Post要好看一些，页面广告也要相对合理一些。当然，如果你要使用China Post或者其他物流跟踪网站，只需要把17track的链接部分改掉就可以了，例如China Post的链接地址为

http://track-chinapost.com/result_china.php?order_no={{ fulfillment.tracking_numbers }}

预览邮件内容确认邮件没有问题

修改好点击页面右下角的保存按钮，然后点击页面上面的Preview预览按钮，查看邮件预览。强烈建议，在自己的Shopify店铺上下一个测试订单，然后填写一个单号，让自己的邮箱收至少一封发货确认邮件，来确保你所做的修改是没有任何问题的，因为在修改代码的操作中，有可能会因为多一个少一个标点符号就让你的整个邮件内容变成乱码。

弹窗显示如下图，点击Track your order now，则显示17track的页面。

此时再去下一个订单 #1012，填写运单号LS005448780CN之后还是自动识别为China Post，不管他，直接点击发货

稍等几秒钟收到发货确认邮件，邮件内容如下，点击Track your order now，则直接跳转到

点击Track your order now按钮，则页面直接跳转到17Track上该订单的物流信息页面。如下图

然后再把查询订单的方法，写到FAQ里面，相信后面客户关于订单物流信息的查询邮件会少很多吧。

邮件出现乱码的解决办法

如果修改了邮件代码，然后在测试邮件的时候发现邮件排版出了问题，或者直接变成了乱码，那么你可以回到 Notification – Shipping Confirmation 页面，在页面的底部左下角有 Revert to default 按钮，可以直接帮你一键还原邮件内容为Shopify系统默认的模板。