设计电子邮件版面
使用可视化模块构建器或纯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 中使用**”卡片，其中包含需粘贴到Send Transactional Email操作中的精确变量（JSON），所有键名均已设置正确。将其复制并粘贴到 Shopify Flow 中，并替换所有 <pick a Flow variable> 占位符。
您可以在操作的配置页面上为每个 Shopify Flow 步骤选择布局，该页面会显示填充了测试变量的布局预览。清晰的名称和贴近实际的测试变量，能让您轻松在此识别出合适的布局。
完整操作指南：从Shopify Flow传递数据。
使用测试变量进行预览
测试变量选项卡列出了应用检测到的所有{{ variables.x }}，您可以填写示例值，并查看设计是否正确渲染。
要将数组传入循环模块，请在此选项卡中以 JSON 数组的形式输入该数组。
发送一封测试邮件
在布局编辑器中使用发送测试邮件功能。该功能会实际渲染布局，并通过您选择的发件人发送邮件，邮件主题前缀为[TEST]。这是确认 Liquid 代码能否正确解析的唯一方法，因为页面预览功能不会对其进行评估。
发布后，请检查历史记录 - 如果某个占位符未生成任何内容，该发送记录会被标记为空变量。请参阅历史与故障排除。
重复使用一个设计
- 更多 → 另存为模板可将该设计保存下来，以便您下次以此为基础继续设计。已保存的设计保存在我的模板中，该处仅包含您自己保存的设计。
- 更多 → 复制会在原位置复制该布局。
- 更多 → 导出功能可下载文件，而列表页面上的导入功能支持导入此前从应用中导出的
.zip或.json文件 - 这在将设计在不同商店之间迁移时非常方便。
删除布局
您可以随时删除一个布局。如果某个Shopify Flow步骤仍指向该布局，该布局会显示在Shopify Flow中使用的标记，删除确认提示中也会说明这一点 - 但这不会阻止您进行删除。
删除后，任何仍引用该模板的Shopify Flow步骤都会因Email template not found而失败，该错误会显示在历史记录中。请将这些步骤指向另一个布局以解决问题。
相关
- 内容模块：产品、折扣、倒计时、追踪等 - 产品、折扣、倒计时、跟踪及其他内容块。
- 从Shopify Flow传递数据 - 提供值。
- 变量与液体 - 完整的变量参考。
- 附件和图片 - 文件、图片及大小限制。
- 页眉和页脚预设 - 可复用的品牌样式。
- 营销邮件与退订 - 营销版面的独特之处。
- 设置 - 品牌颜色、自定义字体和全站邮件默认设置。