建立電子郵件版面配置
使用視覺化區塊建構器或原始 HTML 為 Shopify Flow 設計品牌化交易電子郵件，並設定主旨與預覽文字。
電子郵件版面配置即為電子郵件本身：包含主旨、設計以及任何附件。Shopify Flow 動作會選取一個版面配置和一位寄件者，然後進行寄送。由於版面配置與工作流程是分開的，因此無需再次觸碰 HTML 程式碼，單一設計即可適用於所有客戶。
此清單有兩個分頁：「交易型」和「行銷型」，每個分頁都會顯示其包含的版面配置數量。預設開啟於**「交易型」分頁，而您在電子郵件類型功能推出前所建立的所有版面配置，均屬於交易型。 切換分頁時，您的搜尋、排序及分頁設定會自動沿用。行銷版面配置的名稱旁會標示「行銷」標籤，而在「行銷」分頁中點選「建立電子郵件版面配置**」時，新建立的版面配置將預設為行銷類型。
建立版面配置
前往「電子郵件版面配置」，然後點擊「建立電子郵件版面配置」。您將設定：
- 名稱 - - 您用來辨識它的名稱。只有您能看到這項內容。
- 主旨 - 支援
{{ variables.xxx }}和{{ secrets.xxx }}。 - 預覽文字 - 非必填。多數收件匣會在主旨旁顯示的簡短文字。建議長度為 40 至 100 個字元；此處支援與主旨相同的變數。若留空，郵件客戶端將自動選用電子郵件中的首段文字作為預覽文字。
- 說明 - 此為可選欄位，供您自行參考。
- 電子郵件類型 - 交易型：適用於客戶預期的電子郵件，例如訂單和運送更新；此類郵件必定會發送，即使對已取消訂閱行銷郵件的客戶亦然。 行銷類：用於電子報、促銷活動及客戶回流郵件；每位收件者都會收到一封專屬郵件，其中包含「取消訂閱」連結以及您在「設定」中填寫的公司資訊，且系統會跳過已取消訂閱的客戶。與編輯器不同，此類別可在佈局編輯器中於後續階段進行變更。詳情請參閱 行銷電子郵件與取消訂閱。
接著選擇一個編輯器：
| 編輯 | 最適合 |
|---|---|
| 視覺化建構器 | 透過拖放式模組所設計的、帶有品牌標識的電子郵件 |
| 富文本／HTML | 簡單的交易通知，或是您貼入的完全自訂 HTML 電子郵件 |
視覺化建構器
此建構器採用雙面板式佈局：左側為設定區，右側為畫布即時預覽。您可以透過「新增區段」按鈕，或在現有區塊之間的「+」標記處，來新增區塊。
左側面板有四個分頁：
| Tab | 內容為何 |
|---|---|
| 概述 | 名稱、主題、預覽文字、說明 |
| 品牌塑造 | 整封電子郵件的色彩、字體設計與版面間距 |
| 區塊 | 您在畫布上選取的任何區塊的設定 |
| 測試變數 | Shopify Flow 的 JSON 程式碼片段、系統變數參考，以及用於預覽的範例值 |
畫布上的每個區塊都設有控制項，可透過這些控制項將其拖曳、複製、刪除，或隱藏而不刪除。
區塊參照
元素
| 區塊 | 設定 |
|---|---|
| 文字 | 富文本、對齊方式、字體大小（12/14/16/18）、顏色 |
| 標題 | 標題文字、字號（特大 H1 至 小 H4）、對齊方式、顏色 |
| 圖片 | 圖片（上傳或連結）、替代文字、寬度 10-100%、對齊方式 |
| 按鈕 | 標籤、網址、樣式（主要／次要／大綱）、對齊方式、邊框半徑 0-24px |
| 分隔線 | 顏色、樣式（實線／虛線／點線）、線寬 1-8 |
| 字距 | 高度 4-80 像素 |
| 附件 | 檔案選擇器、一個連結，或是該步驟的訂單或客戶的元資料欄位，以及一個標題。請參閱 附件與圖片 |
| 迴圈 | 針對一個陣列變數，重複執行一組 Liquid + HTML 程式碼塊 |
| HTML / 程式碼 | 包含 Liquid 的原始 HTML，其中包含 {% if %} 條件語法 |
| QR 碼 | 資料（URL 或文字，支援變數）、大小 80-300px、對齊方式 |
| 明細表 | 訂單項目來自一個清單變數，其中包含圖片、數量、價格及總計等資料列 |
商務與內容模組（1.17 版新增，詳情請參閱 內容區塊：產品、折扣、倒數計時、追蹤等）
| 區塊 | 功能說明 |
|---|---|
| 產品 | 一個產品卡片：圖片、標題、描述、價格（含參考價）以及一個按鈕。每個欄位都會接受一個變數 |
| 產品網格 | 從清單變數中，每行取兩到三張卡片，例如明細表 |
| 折扣代碼 | 一個附有按鈕的優惠碼輸入框，可在結帳時套用該優惠碼。該優惠碼可以是您手動輸入的代碼，或是您的商店針對每封電子郵件所生成的獨一無二的一次性代碼。 |
| 倒數計時 | 針對特定日期的即時倒數計時，當電子郵件被開啟時會以動畫圖像呈現。可選風格包括方框、翻頁卡、極簡風格或純文字風格 |
| 訂單追蹤 | 承運商、追蹤編號、一個「追蹤」按鈕，以及根據貨件狀態動態更新的進度條 |
| 星級評分 | 由數字組成的星級評分，附有標籤及可選的連結至您的評論頁面 |
| 客戶見證 | 包含姓名、職稱及照片的引言，可製作成卡片、帶有重音符號，或保持原樣 |
| 社群連結 | 一排網路圖示 |
| 影片 | 一個附有播放按鈕的縮圖，可連結至該影片 |
| 簽名 | 姓名、職稱、公司名稱、電話、電子郵件、網站及照片 |
| 表格 | 一個小型資料表，每個儲存格都對應一個變數 |
| 在瀏覽器中檢視 | 常見的「在瀏覽器中檢視此電子郵件」這行文字 |
| 價格 | 獨立的價格行：價格、可選的（已劃線）比較價格、尺寸、顏色及對齊方式 |
版面配置
| 區塊 | 設定 |
|---|---|
| 圖片 + 文字 | 圖片位置（左／右）、圖片寬度 20-70%、垂直對齊方式、間距、背景色，以及圖片／文字／按鈕等子元件 |
| 兩欄 | 欄位分割（50/50、33/67、67/33、40/60、60/40）、間距 0-40、垂直對齊、內距，以及左右欄位內容分開顯示 |
| 專欄 | 兩、三或四欄，每欄皆為等寬，且各含獨立的區塊 |
| 顯示若 | 當變數的條件為真時才會傳送的區段，例如 variables.total > 100 或 language == "de" |
品牌塑造
「品牌標識」分頁適用於整個版面配置：
- 顏色 - 主色、次色、文字色、正文背景色、內容背景色
- 排版 - 標題字型、正文字型、行高
- 版面配置 - 下方為間距控制項
| 控制 | 有哪些變動 | 範圍 |
|---|---|---|
| 最大寬度 | 電子郵件內容最多能擴展到多寬 | 400-800 像素 |
| 貨櫃緩衝墊 | 整個內容區塊周圍的間距 | 0-40px |
| 區塊填充（側面） | 內容與左右邊緣之間的間距 | 0-40px |
| 區塊填充（頂部與底部） | 每個區塊內容上方的間距與下方的間距 | 0-40px |
| 區塊間距 | 相鄰兩個區塊之間的垂直間距 | 0-40px |
請將「**區塊填充」（頂部與底部）設為較小值。由於「區塊間距」**已能將各區塊分隔開來，因此若同時增加兩者的值，將會產生過大的空隙。
如果您在「設定 > 品牌與字型」中為品牌顏色命名，建構器中的每個選色器都會在輸入欄位下方顯示這些顏色的色塊，點擊色塊即可套用該顏色。目前輸入欄位中的顏色對應的色塊會被標示出來。請參閱 設定。
字型下拉選單提供系統字型（Arial、Georgia、Verdana、Times New Roman、Helvetica、Trebuchet MS）、一套 Google 字型（Inter、Roboto、Open Sans、Lato、Montserrat、Poppins、 Nunito、Raleway、Playfair Display、Merriweather、Source Sans 3、Oswald、Work Sans、DM Sans、Space Grotesk），以及您在「**設定」>「品牌與字型」**中上傳的任何自訂字型。
頁首與頁尾
頁首和頁尾是畫布頂部與底部的可點擊區域。兩者皆可使用已儲存的預設值，如此一來，當您變更品牌識別時，所有佈局將立即同步更新；若需進行一次性調整，則可選擇**「自訂（僅限此佈局）」**。詳見 頁首與頁尾預設值。
富文本／HTML 模式
在此模式下，正文區域是一個單一編輯器，具備「富文本／**HTML」**切換鈕，以及獨立的「**預覽」**切換鈕。
- **「富文本」**功能提供了一個您熟悉的格式設定工具列。
- HTML 提供了一個原始的文字輸入區 - - 若您已有設計好的電子郵件內容，請將其貼入此處。
- 「插入圖片」功能可新增一張託管圖片，圖片來源可以是您的媒體庫，也可以是連結。
預覽為唯讀模式，並直接顯示 Liquid 標籤的內容。若要查看實際值，請發送一封測試電子郵件。
將其連線至 Shopify Flow
版面配置僅是工作的一半 - - Shopify Flow 必須為您的佔位符提供數值。
每個版面配置都有一張**「在 Shopify Flow** 中使用」卡片，其中包含可直接貼入「傳送交易型電子郵件」動作中的精確變數（JSON），且所有鍵名均已設定正確。請將其複製，貼入 Shopify Flow，並替換所有 <pick a Flow variable> 佔位符。
完整攻略：從 Shopify Flow 傳遞資料。
使用測試變數預覽
「測試變數」分頁會列出應用程式偵測到的所有 {{ variables.x }}，讓您可以填入範例值，並確認設計能正確呈現。
若要將陣列傳入「**迴圈」**區塊，請在此分頁中以 JSON 陣列的形式輸入該陣列。
發送一封測試電子郵件
請在版面編輯器中使用**「傳送測試電子郵件」**功能。此功能會實際渲染版面，並透過您選擇的寄件者寄出郵件，郵件主旨前會加上「[TEST]」前綴。由於頁面預覽功能不會評估 Liquid 程式碼，因此這是確認 Liquid 程式碼確實能解析的唯一方法。
上線後，請檢查「歷史紀錄」 - - 若某次傳送中，佔位符未產生任何結果，該次傳送會標記為**「空變數」**。請參閱 歷史與疑難排解。
重複使用一個設計
- **更多 → 「儲存為範本」**會將該設計儲存起來，以便您日後能以此為基礎重新開始。已儲存的設計會存放在「**我的範本」**中，該處僅包含您自己儲存的設計。
- **更多 → 「複製」**會就地複製該佈局。
- **更多 → 「匯出」功能可將設計下載，而清單頁面的「匯入」**功能則可接受先前從應用程式匯出的
.zip或.json連結 - - 這對於在不同商店之間移動設計非常方便。
刪除佈局
您可以隨時刪除佈局。如果仍有「Shopify Flow」步驟指向該佈局，該佈局會顯示「用於 Shopify Flow」的標籤，且刪除確認訊息也會提示此情況 - - 但這並不會阻止您進行刪除。
刪除後，任何仍引用該佈局的「Shopify Flow」步驟都會因「Email template not found」而失敗，此錯誤會顯示在**「歷史紀錄**」中。請將這些步驟指向不同的佈局以解決此問題。
相關
- 內容區塊：產品、折扣、倒數計時、追蹤等 - 產品、折扣、倒數計時、追蹤及其他內容區塊。
- 從 Shopify Flow 傳遞資料 - 提供數值。
- 變量與液體 - 完整的變數參考。
- 附件與圖片 - 檔案、圖片及大小限制。
- 頁首與頁尾預設值 - 可重複使用的品牌形象。
- 行銷電子郵件與取消訂閱 - 行銷版面設計有何不同之處。
- 設定 - 品牌顏色、自訂字型及全店通用的電子郵件預設設定。