定制shopify后台邮件模板

Eric
34
文章
0
评论
2020年7月12日22:09:02 评论 52 1505字阅读5分1秒

本文中,我将介绍如何定制shopify后台自带的邮件模板,比如弃单邮件、订单确认邮件,发货邮件等等。

文末有福利

在你使用shopify的时候,系统后台有统一的邮件模板,用于订单,运输,客户支持和其他通知。虽然shopify提供的默认邮件模板看起来不错。但是出于各种原因,你可能仍然需要进行定制化的处理。

  1. 品牌统一性
  2. 改善邮件模板的设计和UX
  3. 想要添加一些内容在电子邮件中
  4. 利用电子邮件进行营销或者增加转化

定制邮件模板步骤

  1. 选择你要编辑的邮件模板

 

  • 打开 settings > notifications
  • 打开你要修改的邮件模板,比如Order Confirmation
  • 将模板文件复制到编辑器中,可以在浏览器中直接编辑,但是我建议在编辑器中编辑

1

2

2. 上传需要的文件

Shopify提供了文件上传功能,你可以上传所需要的的文件。

  • 上传你的logo
  • 上传你的社媒图标
  • 上传需要包含在邮件中的图片文件
  •  然后将图片链接放入邮件模板之中

3

4

3. 自定义邮件模板

这是关键的一步。在原有模板的基础上,你可以添加各种liquid变量到模板之中
比如:

  • 更改标题
  • 删除退订链接
  • 更新社媒图片及链接
  • 添加新内容

5

以下是一些代码示例。

{% for line in line_items %}
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top; border-bottom: 1px solid #eee; margin: 0; padding: 5px;" valign="top">{{ line.product.title }}</td>
<td class="receipt-figure" style="font-family: sans-serif; font-size: 14px; vertical-align: top; border-bottom: 1px solid #eee; margin: 0; padding: 5px; text-align: right;" valign="top" align="right">{{ line.line_price | money }}</td></tr>
{% endfor %}

 

{% for line in tax_lines %}
<tr class="receipt-subtle" style="color: #aaa;">
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top; border-bottom: 1px solid #eee; margin: 0; padding: 5px;" valign="top">{{ line.title }}</td>
<td class="receipt-figure" style="font-family: sans-serif; font-size: 14px; vertical-align: top; border-bottom: 1px solid #eee; margin: 0; padding: 5px; text-align: right;" valign="top" align="right">{{ line.price | money }}</td></tr>
{% endfor %}

 

你可能需要的一些liquid变量

4. 复制修改好的模板到后台

将修改好的邮件模板直接复制并覆盖掉之前的内容。

6

5. 测试你的邮件模板

shopify提供了两种方法进行测试,一种是浏览器中直接预览,另一种是发送测试邮件。在测试的时候尽量全部测试没有问题再上线。

7

福利时间

在公众号后台回复邮件模板,可以免费获取一套shopify邮件模板,下载后可直接替换原始模板,效果如下:
7

  • 版权声明: 发表于 2020年7月12日22:09:02
  • 转载注明:https://www.shopifyfans.com/email-templates-shopify.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: