透過 Shopify Flow 並使用自訂 SMTP 伺服器發送電子郵件

透過 Shopify Flow 並使用自訂 SMTP 伺服器發送電子郵件

複製頁面

附影片的逐步指南:將 Gmail、SendGrid、Mailgun、Amazon SES 或任何自訂 SMTP 伺服器連接到 Shopify Flow,並發送帶有品牌標識的 VIP 歡迎電子郵件。

概覽

Workflow Transactional Email可讓您透過自己的 SMTP 伺服器,從 Shopify Flow 發送交易電子郵件。在此範例中,當客戶獲得 VIP 標籤時,Shopify Flow 便會執行,而工作流程會使用您儲存的 SMTP 伺服器和電子郵件版面配置,發送一封帶有品牌標識的電子郵件。

此設定包含三個部分:

  1. 在「**電子郵件寄件者」**下建立 SMTP 連線
  2. 在「**電子郵件版面配置」**下設計電子郵件
  3. 在 Shopify Flow 中使用Send Transactional Email動作,並將客戶資料傳入版面配置

任何支援 SMTP 的郵件服務供應商皆可使用,包括 Gmail、SendGrid、Mailgun、Amazon SES 以及您自己的郵件伺服器。

影片指南

完整的設定流程 - 包含 SMTP 伺服器、電子郵件版面配置,以及 Shopify Flow 工作流程。這段影片沒有聲音,請根據您的需求調整播放速度。

開始之前

  • 在您的 Shopify 商店中安裝Workflow Transactional Email。
  • 請備妥您的 SMTP 服務供應商所提供的主機名稱、埠號、使用者名稱及密碼。
  • 請決定 VIP 電子郵件應由哪個寄件者地址發送。

情境:一封 VIP 歡迎電子郵件

此工作流程的功能如下:

  1. 一位客戶被標記為 VIP
  2. Shopify Flow 啟動工作流程
  3. 此工作流程會執行Send Transactional Email動作
  4. 此動作會使用您儲存的 SMTP 伺服器
  5. 此操作會發送您已儲存的電子郵件版面配置,並自動填入客戶的詳細資料

步驟 1:設定您的 SMTP 伺服器

在應用程式中,開啟「電子郵件寄件者」,然後前往「SMTP」區段。此處是用來儲存將用於發送交易電子郵件的郵件伺服器。

Workflow Transactional Email 中的「電子郵件寄件者」頁面

請輸入您的服務供應商提供的 SMTP 主機、埠號、使用者名稱和密碼,然後按下「測試連線」。

輸入 SMTP 主機、埠號、使用者名稱和密碼

SMTP 伺服器表單中填入了名稱、主機名稱和埠號,緊鄰著載有我們發送 IP 位址的資料卡
SMTP 伺服器設定表單。此圖中的數值均為虛構。若您的郵件伺服器會根據 IP 位址限制寄件者,請將「我們的寄件 IP 位址」下方顯示的地址加入白名單。
SMTP 伺服器表單的下半部,包含使用者名稱、密碼及寄件者地址
往下看:您的郵件伺服器登入資訊,以及您寄送電子郵件所使用的寄件地址。

如果憑證有效,您將會看到一則成功訊息。

SMTP 連線測試成功

選擇訊息應顯示的寄件地址。同時設定顯示名稱,這樣收件者看到的就是您的店名,而非原始地址。

設定寄件者地址與顯示名稱

儲存此設定,以便日後可透過您的 Shopify Flow 動作選取該設定。

儲存 SMTP 設定

步驟 2:設計電子郵件

前往「電子郵件版面配置」。您可以在這裡建立 Shopify Flow 將發送的電子郵件內容。

「電子郵件版面配置」頁面

為您的 VIP 情境建立一個佈局,包含主旨和內文。主旨可使用從 Shopify Flow 傳入的變數。此範例使用 firstName,並以 Liquid 的 default 濾鏡 作為備用方案:

Hi {{ variables.firstName | default: "Customer" }} Welcome to VIP Club

加入區塊,打造符合您品牌風格的設計。

在電子郵件設計器中選擇區塊

此範例使用了標題區塊、圖片區塊和文字區塊。文字區塊引用了 firstName 變數,該變數將由 Shopify Flow 提供。

由標題、圖片和文字區塊組成的版面配置

請使用「測試變數」區段輸入範例值,並確認設計的呈現效果是否符合您的預期。

使用範例變數測試版面配置

儲存此佈局,以便日後能在Shopify Flow動作中選取它。

儲存電子郵件版面配置

如需完整的區塊參考資料,請參閱 建立電子郵件版面配置。

步驟 3:在 Shopify Flow 中建立工作流程

開啟 Shopify Flow,並為您的 VIP 流程建立一個工作流程。請使用「客戶標籤」觸發器,如此一來,當客戶被標記為 VIP 時,工作流程便會執行。

一個使用客戶標籤觸發器的 Shopify Flow 工作流程

按下「記錄事件」,然後在新分頁中為客戶新增標籤。選取左側的觸發器,您將看到實際的觸發器資料 - 這能讓您更輕鬆地挑選正確的變數。

記錄事件以擷取真實的觸發資料

新增Send Transactional Email動作。在**「收件電子郵件」欄位中,使用客戶的電子郵件變數。接著按下「設定電子郵件**」。

新增Send Transactional Email動作

在設定畫面中,請於**「發送自**」下方選擇這封電子郵件應透過的 SMTP 伺服器,並於「版面配置」下方選擇您所建立的電子郵件版面配置。在這些選項下方,「預覽」會顯示該版面配置及其主旨欄,並填入版面配置中的測試變數,以便您確認是否為正確的版本。 按下「儲存」後,頁面底部會顯示「設定已成功儲存」。接著按下「**退出」**即可返回工作流程。

回到操作畫面,請在**「變數 (JSON)」**欄位中傳入佈局所需的数据:

{
  "firstName": "{{ customer.firstName }}"
}

將客戶資料作為 JSON 變數傳遞

確認觸發條件、條件、佈局和變數均無誤後,請啟用此工作流程。

啟用工作流程

Shopify Flow
每個工作流程都始於一個觸發器。此範例使用的是我們的「工作流程觸發器擴充功能」(Workflow Trigger Extensions)之一;任何 Shopify 觸發器皆以相同方式運作。
Shopify Flow
新增一個動作,開啟Workflow Transactional Email,然後選擇Send Transactional Email。
Send Transactional Email動作及其「收件者」、「副本」、「密件副本」和「變數」欄位
請填寫電子郵件的收件人。每個欄位皆可接受 Shopify Flow 變數。
「電子郵件」動作的設定頁面,其中已選取寄件者與電子郵件版面配置,下方則顯示該版面的預覽
「設定電子郵件」會開啟此頁面:選擇寄件者與版面配置,查看下方預覽,然後點擊「儲存」。

各部分如何相互銜接

當客戶獲得 VIP 標籤時,Shopify Flow 會執行工作流程並觸發電子郵件動作。該動作會整合:

  • 您從「**電子郵件寄件者」**中儲存的伺服器設定
  • 您從「**電子郵件版面配置」**中儲存的設計
  • 從 Shopify Flow 步驟傳入的客戶屬性值,以 JSON 變數的形式傳遞

將這兩者分開,正是讓版面配置能夠重複使用的關鍵 - 您無需每次都編輯 HTML,即可將相同的設計發送給每位客戶。

進行端到端的測試

  1. 將VIP標籤套用至測試客戶
  2. 確認工作流程在 Shopify Flow 中執行
  3. 請確認客戶是否已收到該電子郵件
  4. 確認主旨行和 HTML 是否顯示正確
  5. 請確保寄件人名稱與地址與您的品牌相符

如果訊息未送達,請在應用程式中開啟「**歷史紀錄」**以查看執行結果和確切的錯誤訊息。請參閱 歷史與疑難排解。

以下是使用本指南中的 SMTP 伺服器及設計所發送的電子郵件:

已發送的 VIP 歡迎電子郵件

相關