使用Mailchimp给你的网站添加收集邮箱地址的弹窗

实话是说，Mailchimp是一个功能强大的邮件营销工具，但是在弹窗收集邮箱这一功能上，灵活性要差很多，个人建议使用Privy这个更加专业的弹窗工具收集邮箱，然后将收集到的邮箱地址自动同步到Mailchimp进行日常的邮件营销活动。不过为了方便全面了解Mailchimp的功能，这里还是给大家来说下如何使用Mailchimp自带的免费弹窗功能帮你的网站收集客户的邮箱地址。

将mailchimp账户成功绑定到Shopify账户之后，我们就可以使用Mailchimp帮我们的Shopify网站完成一些自动化的工作，这些自动化的工作包括：

1. 当客户打开我们的网站时，显示Mailchimp的弹窗。
2. 客户在弹窗中提交邮箱之后，自动将折扣码邮件发送给客户。
3. 当有人遗弃订单时自动发送挽救订单的邮件
4. 邮件再营销功能
5. 订单相关的通知邮件

本节内容我们要完成的工作是第1个自动化 – 也就是当客户打开我们网站的时候，使用Mailchimp显示弹窗，来收集客户的邮件地址。这里要说明一点的是，Mailchimp只是我们网站实现弹窗功能的工具之一，除了Mailchimp之外，Shopify上还有很多很多相关的应用可以替代Mailchimp来实现弹窗收集客户邮件地址，而且功能也比Mailchimp强大很多很多，大家可以根据自己的需要，以及在功能费用方面做一个综合的比较，然后选择一个适合自己的即可。

首先，需要我们登陆Mailchimp的后台，点击右上角的账户名称，在下拉菜单中选择Connected Sites

在打开的页面中，就是目前我们可以使用Mailchimp完成的一些自动化的邮件营销活动，从上到下依次为Pop-up Form，Abandoned Cart Email, Product Retargeting email以及Order Confirmation。不过默认状态下Pop-up Form和Product Retargeting Email的add按钮都是灰色不能的，因此，需要点击页面最上面黄色背景Additional Terms后面的Accept按钮，接受Mailchimp的条款之后，才能解锁所有的功能。如下图

点击Accept之后，所有的自动化功能就都可以添加了。如下图所示

我们首先来使用Mailchimp的Pop-up Form的功能来为我们的网站添加一个免费的弹窗。点击Pop-up Form右侧的Add按钮则页面就跳转到网站弹窗的设置页面，整个设置页面是所见即所得的，也就是在右侧设置的内容都会实时的反映在左侧，你在左侧看到的弹窗就是你在网站上看到的真实的弹窗效果了。

在左侧的视窗上方，有Desktop和Mobile两个按钮可以切换显示你的网站弹窗在电脑上和手机上不同的显示效果。考虑到独立站在移动端的流量占比很大，因此建议在设计弹窗时要优先照顾移动端的显示效果：

在页面的右侧则分别显示了样式设置（Design）表单设置（Field）以及内容设置（Content）。

我们先来说下Design的设计：

• Format 样式设置也就是弹窗的弹出方式, 建议选择Modal
• Pop-up Settings 设置的是弹窗的弹出时间，建议选择immediately。这里即使我们选择了客户打开我们的网站之后马上弹出弹窗，但是实际上是只有当网站完全打开，标签页上面的小圈圈不再转圈，才会展示出弹窗。因此，具体弹窗什么时候显示是基于网站的打开速度的。网站打开速度很快，仅耗时2秒，那你可以理解为弹窗是在2秒后才会打开。如果网站打开用时是20秒，那这个弹窗是在20秒之后才会显示出来的。
• Image Alignment 是弹窗上图片的位置，你可以随意调整，开心就好。
• Field Labels 设置的是“Email Address” 这两个单词的字体和颜色。
• Button Style 设置的则是提交按钮的文字，文字颜色，按钮颜色，鼠标移动到按钮上是显示的按钮颜色，按钮位置。
• Pop-up Style 项下的Overlay Opacity则是调整弹窗背景的透明度，填写0-100之间的数字。数字越大，透明度越低。

Fields 是管理表单功能的选项，默认的只有一个Email Address，你可以通过勾选的方式把你需要的内容添加到右侧的表单中。Required是可选项，用来控制该表单是否是必填项。点击右侧开关按钮开启，如下图First Name右侧开关已经打开，则说明First Name这一表单是必填项。如果不填写该数据，则表格是无法提交的。

Content 板块主要管理弹窗的图片，表单上面的文字内容，以及按钮下方的文字内容。Body内容，主要是要告诉客户，他们为什么要把自己的邮箱地址提交给你，提交之后可以得到什么样的好处。例如：Subscribe and get 20% off for your first order.

而Footer里面的内容，则是要告诉客户，他们把邮箱提交给我们是安全的，我们不会发垃圾邮件，更不会把相关数据发给别人。例如：“Don’t worry, we hate spam too. We won’t share your details with anyone.”

Footer下面还有一个Sign up success Message。当客户提交了邮箱之后，就会出现这个提醒页面，不过这个页面会展示2-3秒之后就会自动关闭。因此，不建议在这个地方输入优惠码，否则客户刚刚看到优惠码就会自动关闭，体验是极差的。

所有的内容都编辑完成之后，就可以直接点击右下角的Publish，完成弹窗的发布了。

点击Publish按钮之后，页面会有弹窗提示你再次确认Publish，点击左下角灰色按钮Publish按钮就可以了。

页面刷新出现如下图所示页面，则说明你的Shopify网站已经成功添加了Mailchimp免费的弹窗功能。

你可以打开在新的标签页中打开你的网站前台，来查看弹窗在你网站上的效果。

如果你后面想要重新编辑弹窗内容，可以回到Mailchimp的后台，点击用户名，在下拉菜单中点击Connected Sites，再点击Pop-up Form，就可以打开弹窗的编辑页面，进行弹窗内容的编辑即可。编辑完成之后点击Save按钮，网站前台就会显示最新的弹窗效果了。

要移除Mailchimp的免费弹窗，方法请查看《如何移除Mailchimp在Shopify上的免费弹窗》