如何设计并配置品牌化邮件通知
17TRACK 提供可视化邮件编辑器，无需编码即可快速创建与您的品牌风格一致的精美邮件。您可以通过拖拽组件、插入动态变量、推广商品等方式，轻松完成邮件模板的设计与配置，提升买家体验与品牌形象。
一、准备工作
在开始编辑邮件前，请确保您已完成以下设计素材准备：
- 设计邮件页面整体结构、店铺 Logo 及营销活动图片；
- 将宽度为 600px 的店铺邮件专用图片下载到本地（此为邮件标准显示尺寸）。
二、进入邮件模板编辑页面
操作路径：
17TRACK 后台 > 通知管理 > 在邮件模板列表中找到您想要修改的模板 > 点击右侧的 ···（三个点）图标 > 选择 「编辑模板」。
您可以选择编辑以下两类模板：
- 状态变更邮件：由订单物流状态变化自动触发（如“运输中”、“成功签收”、“异常延误”等）；
- 自定义规则邮件：按您设定的条件和规则触发（如“超过7天未送达”、“客户打开邮件”等）。
三、可视化编辑器的核心操作
编辑器采用“所见即所得”的拖拽式界面，左侧为组件库，右侧为实时预览区。
1. 拖拽内容块，构建邮件布局
左侧组件库提供丰富的内容块，您可以直接拖拽至中间画布区域使用：
- 组件包括：列、产品推荐、按钮、分隔线、标题、文字、图片、视频、社交、菜单、HTML、表格。
2. 选中内容块，右侧调整样式与间距
点击画布中的任意内容块，右侧面板将弹出该块的样式编辑选项，您可根据需要自由调整：
- 文字：设置颜色、对齐方式、行高、字间距等；
- 链接：设置链接颜色、下划线样式等；
- 一般：调整内容边距（上/右/下/左）；
- 响应式设置：您可以选择在桌面版中隐藏该内容块，实现不同设备的精准内容适配；
- 撤销与重做：面板底部支持撤销（
Ctrl+Z）与重做（Ctrl+Y）操作，编辑更灵活。 - 删除与复制：选中内容块后，可点击删除或复制图标对当前块进行操作。
3. 插入合并标签，实现个性化内容
通过插入合并标签（Merge Tags），您可以在邮件中动态显示每个客户的专属信息，例如：
- 客户姓名、邮箱、订单号；
- 运单号、运输商名称、预计送达时间；
- 店铺名称、邮箱等。
4. 多语言邮件内容配置（可选）
若您的客户遍布全球，您可以为同一邮件模板配置多种语言版本：
- 切换语言：编辑器左上角提供语言下拉菜单，您可在此切换当前编辑的语言环境（如英语、中文、日语、法语等）。
- 添加语言：点击 「管理语言」，可添加更多支持的语言，并为每种语言独立编辑邮件内容。
- 发送匹配逻辑：系统会根据客户的订单语言自动发送对应语言版本的邮件。若订单语言信息为空或未匹配到您已配置的语言，则将使用默认语言（英语）发送。
5. 推广店铺商品（两种模式）
您可在邮件中嵌入商品推荐版块，提升复购与转化：
- 自动推荐
直接将“商品推荐”组件拖入邮件，系统会根据收件人的浏览及购买历史，自动推送相关商品。无需手动上传图片和链接，且推荐逻辑由 Shopify 智能算法持续优化。
- 手动自定义推广
自行上传商品图片、填写商品名称、价格及购买链接，适合推广特定活动、新品或品牌故事。
6. 编辑邮件页脚及社交媒体链接
邮件底部通常放置品牌社交媒体图标及退订提示。我们提供可直接复用的 HTML 代码块，您只需：
- 将代码中的示例社媒链接
https://twitter.com/YOUR_TWITTER替换为您自己的品牌社媒地址； - 可根据需要调整图标样式、大小或排列方式。
📎 页脚社媒 HTML 代码（可直接复制使用）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
<title></title>
<style type="text/css">
@media only screen and (min-width: 620px) {
.u-row { width: 600px !important; }
.u-row .u-col { vertical-align: top; }
.u-row .u-col-100 { width: 600px !important; }
}
@media (max-width: 620px) {
.u-row-container { max-width: 100% !important; padding-left: 0px !important; padding-right: 0px !important; }
.u-row .u-col { min-width: 320px !important; max-width: 100% !important; display: block !important; }
.u-row { width: 100% !important; }
.u-col { width: 100% !important; }
.u-col > div { margin: 0 auto; }
}
a[x-apple-data-detectors='true'] { color: inherit !important; text-decoration: none !important; }
@media (max-width: 480px) { .hide-mobile { max-height: 0px; overflow: hidden; display: none !important; } }
@media (max-width: 480px) { #u_content_menu_1 .v-padding { padding: 5px 10px !important; } #u_content_text_deprecated_2 .v-container-padding-padding { padding: 10px 10px 40px !important; } }
</style>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
</head>
<body class="clean-body u_body" style="margin: 0;padding: 0;-webkit-text-size-adjust: 100%;background-color: #ecf0f1;color: #000000">
<table style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;min-width: 320px;Margin: 0 auto;background-color: #ecf0f1;width:100%" cellpadding="0" cellspacing="0">
<tbody><tr style="vertical-align: top"><td style="word-break: break-word;border-collapse: collapse !important;vertical-align: top">
<div class="u-row-container" style="padding: 0px;background-color: transparent">
<div class="u-row" style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;">
<div style="border-collapse: collapse;display: table;width: 100%;height: 100%;background-color: transparent;">
<div class="u-col u-col-100" style="max-width: 320px;min-width: 600px;display: table-cell;vertical-align: top;">
<div style="background-color: #ffffff;height: 100%;width: 100% !important;border-radius: 0px;">
<div style="box-sizing: border-box; height: 100%; padding: 0px;">
<table style="font-family:'Open Sans',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:'Open Sans',sans-serif;" align="left">
<div align="center">
<div style="line-height: 160%; text-align: center; word-wrap: break-word;">
<p style="font-size: 24px; line-height: 160%;margin-bottom: 20px; font-weight: 600;">Follow us on</p>
</div>
<div style="display: table; max-width:100%;">
<table align="left" border="0" cellspacing="0" cellpadding="0" width="32" height="32" style="width: 32px !important;height: 32px !important;display: inline-block;margin-right: 35px">
<tbody><tr><td align="left" valign="middle">
<a href="https://www.facebook.com/YOUR_FACEBOOK" target="_blank">
<img src="https://cdn.tools.unlayer.com/social/icons/rounded/facebook.png" alt="Facebook" width="32" style="outline: none;border: none;height: auto;max-width: 32px !important;">
</a>
</td></tr>
</tbody></table>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="32" height="32" style="width: 32px !important;height: 32px !important;display: inline-block;margin-right: 35px">
<tbody><tr><td align="left" valign="middle">
<a href="https://twitter.com/YOUR_TWITTER" target="_blank">
<img src="https://cdn.tools.unlayer.com/social/icons/rounded/twitter.png" alt="Twitter" width="32" style="outline: none;border: none;height: auto;max-width: 32px !important;">
</a>
</td></tr>
</tbody></table>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="32" height="32" style="width: 32px !important;height: 32px !important;display: inline-block;margin-right: 35px">
<tbody><tr><td align="left" valign="middle">
<a href="https://www.linkedin.com/company/YOUR_LINKEDIN" target="_blank">
<img src="https://cdn.tools.unlayer.com/social/icons/rounded/linkedin.png" alt="LinkedIn" width="32" style="outline: none;border: none;height: auto;max-width: 32px !important;">
</a>
</td></tr>
</tbody></table>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="32" height="32" style="width: 32px !important;height: 32px !important;display: inline-block;margin-right: 0px">
<tbody><tr><td align="left" valign="middle">
<a href="https://www.instagram.com/YOUR_INSTAGRAM" target="_blank">
<img src="https://cdn.tools.unlayer.com/social/icons/rounded/instagram.png" alt="Instagram" width="32" style="outline: none;border: none;height: auto;max-width: 32px !important;">
</a>
</td></tr>
</tbody></table>
</div>
</div>
</td></tr>
</tbody></table>
<table style="font-family:'Open Sans',sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:30px 10px 20px;font-family:'Open Sans',sans-serif;" align="left">
<div style="line-height: 160%; text-align: center; word-wrap: break-word;">
<p style="font-size: 12px; line-height: 160%;">This email has been generated automatically and is sent from a notification-only address. Kindly refrain from replying to this message. To stop receiving all emails, you may unsubscribe.</p>
</div>
</td></tr>
</tbody></table>
</div>
</div>
</div>
</div>
</div>
</div>
</td></tr></tbody></table>
</body>
</html>
四、预览与测试
1. 多终端实时预览
编辑器内置 桌面版与移动版预览 切换功能，您可随时查看邮件在不同屏幕尺寸下的显示效果，及时发现并调整布局错位、字体过小等问题。
2. 发送测试邮件
点击编辑器右上角的 「发送测试邮件」，输入您的测试邮箱地址，系统将立即发送一封采用当前设计的真实邮件。
五、保存与生效
编辑完成后，点击 「保存」 按钮。已关联该模板的所有通知邮件将即时生效，此后触发发送的邮件均会采用您刚刚设计好的品牌化版本。
通过以上步骤，您可以快速打造风格统一、内容专业、高度个性化的品牌邮件通知，不仅能提升买家的物流追踪体验，更能强化品牌认知与客户忠诚度。如有任何疑问，欢迎随时联系 17TRACK 客服团队。
更新于： 15/04/2026
谢谢！