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”調出搜索框搜索“”，第一個搜索結果的位置就是我們需要修改的部分。建議直接複製橙色字體部分代碼內容，替換你的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>
 
{{ email_title }}
            
{{ email_body }}
            {% if fulfillment.estimated_delivery_at %}
              
{{ email_emphasis }}
            {% endif %}
            {% if order_status_url %}
              

  

    
 
  
  

    

      

        

          
Track your order now
        
        
      
      {% if shop.url %}
    

      

        
Your tracking number is {{ fulfillment.tracking_numbers }}. 
You can also view your order or visit our store
      
    
{% endif %}
    
  
 
{{ email_title }}
            
{{ email_body }}
            {% if fulfillment.estimated_delivery_at %}
              
{{ email_emphasis }}
            {% endif %}
            {% if order_status_url %}
              

  

    
 
  
  

    

      

        

          
Track your order now
        
        
      
      {% if shop.url %}
    

      

        
Your tracking number is {{ fulfillment.tracking_numbers }}. 
You can also view your order or visit our store
      
    
{% endif %}
    
  

在上面的代碼裏面，我把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系統默認的模板。