我们不断加强和优化我们的 Shopify Plus 时尚客户的电子邮件营销工作使用 Klaviyo. Klaviyo 与 Shopify 进行了稳固的集成,可实现大量与电子商务相关的通信,这些通信是预先构建并准备就绪的。
令人惊讶的是,插入你的 Shopify 博客文章 但是,进入电子邮件不是其中之一! 让事情变得更加困难......构建此电子邮件的文档并不完整,甚至没有记录他们最新的编辑器。 所以, Highbridge 不得不做一些挖掘并弄清楚如何自己去做……这并不容易。
以下是实现这一目标所需的开发:
- 博客供稿 – Shopify 提供的 atom 提要不提供任何自定义,也不包含图像,因此我们必须构建自定义 XML 提要。
- Klaviyo 数据馈送 – 我们构建的 XML 提要需要集成为 Klaviyo 中的数据提要。
- Klaviyo 电子邮件模板 – 然后我们需要将提要解析为电子邮件模板,其中图像和内容格式正确。
在 Shopify 中构建自定义博客提要
我能够找到一篇带有示例代码的文章来构建一个 Shopify 中的自定义提要 提供 Mailchimp 并进行了很多编辑以清理它。 以下是构建一个 自定义 RSS 提要 在 Shopify 中为您的博客。
- 导航到你的 网上商店 并选择您希望放置提要的主题。
- 在“操作”菜单中,选择 编辑代码.
- 在文件菜单中,导航到模板并单击 添加新模板.
- 在添加新模板窗口中,选择 创建新模板 提供 新闻.
- 选择模板类型 液体.
- 对于文件名,我们输入 克拉维约.
- 在代码编辑器中,放置以下代码:
{%- layout none -%}
{%- capture feedSettings -%}
{% assign imageSize = 'grande' %}
{% assign articleLimit = 5 %}
{% assign showTags = false %}
{% assign truncateContent = true %}
{% assign truncateAmount = 30 %}
{% assign forceHtml = false %}
{% assign removeCdataTags = true %}
{%- endcapture -%}
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:media="http://search.yahoo.com/mrss/"
>
<channel>
<title>{{ blog.title }}</title>
<link>{{ canonical_url }}</link>
<description>{{ page_description | strip_newlines }}</description>
<lastBuildDate>{{ blog.articles.first.created_at | date: "%FT%TZ" }}</lastBuildDate>
{%- for article in blog.articles limit:articleLimit %}
<item>
<title>{{ article.title }}</title>
<link>{{ shop.url }}{{ article.url }}</link>
<pubDate>{{ article.created_at | date: "%FT%TZ" }}</pubDate>
<author>{{ article.author | default:shop.name }}</author>
{%- if showTags and article.tags != blank -%}<category>{{ article.tags | join:',' }}</category>{%- endif -%}
{%- if article.excerpt != blank %}
<description>{{ article.excerpt | strip_html | truncatewords: truncateAmount | strip }}</description>
{%- else %}
<description>{{ article.content | strip_html | truncatewords: truncateAmount | strip }}</description>
{%- endif -%}
{%- if article.image %}
<media:content type="image/*" url="https:{{ article.image | img_url: imageSize }}" />
{%- endif -%}
</item>
{%- endfor -%}
</channel>
</rss>
- 根据需要更新自定义变量。 关于这一点的一个注意事项是,我们已将图像大小设置为电子邮件的最大宽度,即 600 像素宽。 这是 Shopify 的图片尺寸表:
Shopify 图片名称 | 产品规格 |
微微 | 16px x 16px |
图标 | 32px x 32px |
拇指 | 50px x 50px |
小 | 100px x 100px |
紧凑 | 160px x 160px |
中等 | 240px x 240px |
大 | 480px x 480px |
大 | 600px x 600px |
1024 X 1024 | 1024px x 1024px |
2048 X 2048 | 2048px x 2048px |
主 | 可用的最大图像 |
- 您的提要现在可以在您的博客地址获得,并附加了查询字符串以供查看。 在我们客户的案例中,Feed URL 是:
https://closet52.com/blogs/fashion?view=klaviyo
- 您的 Feed 现在可以使用了! 如果您愿意,可以在浏览器窗口中导航到它以确保没有错误。 我们将确保它在下一步中正确解析:
将您的博客供稿添加到 Klaviyo
为了利用您的新博客提要 Klaviyo,您必须将其添加为数据馈送。
- 导航 数据馈送
- 选择 添加网络提要
- 输入 提要名称 (不允许有空格)
- 输入 资讯提供网址 你刚刚创建的。
- 输入请求方法为 的GET
- 输入内容类型为 XML
- 单击 更新数据馈送.
- 单击 预览 以确保提要正确填充。
将您的博客提要添加到您的 Klaviyo 电子邮件模板
现在我们想将我们的博客构建到我们的电子邮件模板中 Klaviyo. 在我看来,以及我们需要自定义提要的原因,我喜欢分割内容区域,其中图像在左侧,标题和摘录在下方。 Klaviyo 还可以选择将其折叠成移动设备上的单个列。
- 拖一个 拆分块 进入您的电子邮件模板。
- 将左列设置为 图片 和你的右栏 文本 块。
- 对于图像,选择 动态图像 并将值设置为:
{{ item|lookup:'media:content'|lookup:'@url' }}
- 将替代文本设置为:
{{item.title}}
- 设置链接地址,以便如果电子邮件订阅者单击图像,它将把它们带到您的文章中。
{{item.link}}
- 点击 右栏 设置列内容。
- 添加你的 内容,请务必添加指向您的标题的链接并插入您的帖子摘录。
<div>
<h3 style="line-height: 60%;"><a style="font-size: 14px;" href="{{ item.link }}">{{item.title}}</a></h3>
<p><span style="font-size: 12px;">{{item.description}}</span></p>
</div>
- 点击 拆分设置 标签。
- 设置为 40% / 60% 布局 为文本提供更多空间。
- 启用 在移动设备上堆叠 并设置 右到左.
- 点击 显示选项 标签。
- 选择内容重复并将您在 Klaviyo 中创建的提要作为源放在 重复 领域:
feeds.Closet52_Blog.rss.channel.item
- 设置 项目别名 as 项目.
- 单击 预览和测试 你现在可以看到你的博客文章了。 请务必在桌面和移动模式下对其进行测试。
当然,如果您需要帮助 Shopify 优化和 Klaviyo 实施,请随时联系 Highbridge.
披露:我是 Highbridge 我正在使用我的附属链接 Shopify 和 Klaviyo 在这篇文章中。