设计电子邮件版面
使用可视化模块构建器或纯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%、对齐方式 |
| 按钮 | 标签、URL、样式（主样式/次样式/轮廓样式）、对齐方式、边框半径 0-24px |
| 分隔符 | 颜色、样式（实线/虚线/点线）、线宽 1-8 |
| 间距 | 高度 4-80px |
| 附件 | 文件选择器、一个链接，或该步骤所属订单或客户的元字段，以及一个标题。参见 附件和图片 |
| 循环 | 对数组变量重复执行一段 Liquid + HTML 代码块 |
| HTML / 代码 | 包含 Liquid 的原始 HTML，包括 {% if %} 条件语句 |
| 二维码 | 数据（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 代码能否正确解析的唯一方法，因为页面预览功能不会对其进行评估。
上线后，请检查**“历史记录**” - - 如果某个发送中占位符未生成任何内容，该条目会标注为**“空变量**”。参见 历史与故障排除。
重复使用一个设计
- 更多 → “另存为模板”可将设计保存下来，以便您下次以此为基础继续设计。已保存的设计保存在**“我的模板**”中，该处仅包含您自己保存的设计。
- 更多 → “复制”会在原位置复制该布局。
- **更多 → “导出”功能可下载该文件，而列表页面上的“导入”**功能支持导入此前从应用中导出的
.zip或.json格式的文件 - - 这在将设计在不同商店间迁移时非常方便。
删除布局
您可以随时删除一个布局。如果某个Shopify Flow步骤仍指向该布局，该布局会显示**“在Shopify Flow中使用**”标记，且删除确认提示中也会说明这一点 - - 但这不会阻止您进行删除。
删除后，任何仍引用该布局的Shopify Flow步骤都会报错，提示Email template not found，该错误会显示在**“历史记录**”中。请将这些步骤指向另一个布局以解决问题。
相关
- 内容模块：产品、折扣、倒计时、追踪等 - 产品、折扣、倒计时、订单追踪及其他内容模块。
- 从Shopify Flow传递数据 - 提供数值。
- 变量与液体 - 完整的变量参考。
- 附件和图片 - 文件、图片及大小限制。
- 页眉和页脚预设 - 可重复使用的品牌标识。
- 营销邮件与退订 - 营销版式有何不同之处。
- 设置 - 品牌配色、自定义字体以及全店通用的电子邮件默认设置。