建立電子郵件版面配置
電子郵件版面配置即為電子郵件本身：包含主旨、設計以及任何附件。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-80px |
| 附件 | 檔案選擇器與標題。請參閱 附件與圖片 |
| 迴圈 | 將一組 Liquid + HTML 程式碼重複套用至陣列變數上 - - 此功能適用於明細項目 |
| HTML / 程式碼 | 包含 Liquid 的原始 HTML，其中包含 {% if %} 條件語句 |
| QR 碼 | 資料（URL 或文字，支援變數）、大小 80-300 像素、對齊方式 |
版面配置
| 區塊 | 設定 |
|---|---|
| 圖片 + 文字 | 圖片位置（左／右）、圖片寬度 20-70%、垂直對齊方式、間距、背景色，以及圖片／文字／按鈕等子元件 |
| 兩欄 | 欄位分割（50/50、33/67、67/33、40/60、60/40）、間距 0-40、垂直對齊、內距，以及左右欄位內容分開 |
品牌塑造
「品牌標識」分頁適用於整個版面配置：
- 顏色 - 主色、次色、文字色、正文背景色、內容背景色
- 排版 - 標題字型、正文字型、行高
- 版面配置 - 下方為間距控制選項
| 控制 | 有哪些變更 | 範圍 |
|---|---|---|
| 最大寬度 | 電子郵件內容最多能擴展到多寬 | 400-800 像素 |
| 容器填充物 | 整個內容區域周圍的空間 | 0-40px |
| 區塊墊片（側面） | 內容與左右邊緣之間的間距 | 0-40 像素 |
| 區塊填充（頂部與底部） | 每個區塊內容上方的間距與下方的間距 | 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 傳遞資料 - 提供數值。
- 變量與液體 - 完整的變數參考。
- 附件與圖片 - 檔案、圖片及大小限制。
- 頁首與頁尾預設值 - 可重複使用的品牌形象。
- 行銷電子郵件與取消訂閱 - 行銷版面設計有何不同之處。
- 設定 - 品牌顏色、自訂字型以及全店通用的電子郵件預設設定。