如何在您的 Klaviyo 电子邮件模板中发布您的 Shopify 博客提要

如何在您的 Klaviyo 电子邮件模板中发布您的 Shopify 博客提要

我们不断加强和优化我们的 Shopify Plus 时尚客户的电子邮件营销工作使用 Klaviyo. Klaviyo 与 Shopify 进行了稳固的集成,可实现大量与电子商务相关的通信,这些通信是预先构建并准备就绪的。

令人惊讶的是,插入你的 Shopify 博客文章 但是,进入电子邮件不是其中之一! 让事情变得更加困难......构建此电子邮件的文档并不完整,甚至没有记录他们最新的编辑器。 所以, Highbridge 不得不做一些挖掘并弄清楚如何自己去做……这并不容易。

以下是实现这一目标所需的开发:

  1. 博客供稿 – Shopify 提供的 atom 提要不提供任何自定义,也不包含图像,因此我们必须构建自定义 XML 提要。
  2. Klaviyo 数据馈送 – 我们构建的 XML 提要需要集成为 Klaviyo 中的数据提要。
  3. Klaviyo 电子邮件模板 – 然后我们需要将提要解析为电子邮件模板,其中图像和内容格式正确。

在 Shopify 中构建自定义博客提要

我能够找到一篇带有示例代码的文章来构建一个 Shopify 中的自定义提要 提供 Mailchimp 并进行了很多编辑以清理它。 以下是构建一个 自定义 RSS 提要 在 Shopify 中为您的博客。

  1. 导航到你的 网上商店 并选择您希望放置提要的主题。
  2. 在“操作”菜单中,选择 编辑代码.
  3. 在文件菜单中,导航到模板并单击 添加新模板.
  4. 在添加新模板窗口中,选择 创建新模板 提供 新闻.

将液体博客提要添加到 Shopify for Klaviyo

  1. 选择模板类型 液体.
  2. 对于文件名,我们输入 克拉维约.
  3. 在代码编辑器中,放置以下代码:

{%- 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>

  1. 根据需要更新自定义变量。 关于这一点的一个注意事项是,我们已将图像大小设置为电子邮件的最大宽度,即 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
可用的最大图像

  1. 您的提要现在可以在您的博客地址获得,并附加了查询字符串以供查看。 在我们客户的案例中,Feed URL 是:

https://closet52.com/blogs/fashion?view=klaviyo

  1. 您的 Feed 现在可以使用了! 如果您愿意,可以在浏览器窗口中导航到它以确保没有错误。 我们将确保它在下一步中正确解析:

将您的博客供稿添加到 Klaviyo

为了利用您的新博客提要 Klaviyo,您必须将其添加为数据馈送。

  1. 导航 数据馈送
  2. 选择 添加网络提要
  3. 输入 提要名称 (不允许有空格)
  4. 输入 资讯提供网址 你刚刚创建的。
  5. 输入请求方法为 的GET
  6. 输入内容类型为 XML

Klaviyo 添加 Shopify XML 博客提要

  1. 单击 更新数据馈送.
  2. 单击 预览 以确保提要正确填充。

在 Klaviyo 中预览 Shopify 博客提要

将您的博客提要添加到您的 Klaviyo 电子邮件模板

现在我们想将我们的博客构建到我们的电子邮件模板中 Klaviyo. 在我看来,以及我们需要自定义提要的原因,我喜欢分割内容区域,其中图像在左侧,标题和摘录在下方。 Klaviyo 还可以选择将其折叠成移动设备上的单个列。

  1. 拖一个 拆分块 进入您的电子邮件模板。
  2. 将左列设置为 图片 和你的右栏 文本 块。

Shopify 博客文章文章的 Klaviyo 拆分块

  1. 对于图像,选择 动态图像 并将值设置为:

{{ item|lookup:'media:content'|lookup:'@url' }}

  1. 将替代文本设置为:

{{item.title}}

  1. 设置链接地址,以便如果电子邮件订阅者单击图像,它将把它们带到您的文章中。

{{item.link}}

  1. 点击 右栏 设置列内容。

Klaviyo 博客文章标题和描述

  1. 添加你的 内容,请务必添加指向您的标题的链接并插入您的帖子摘录。

<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>

  1. 点击 拆分设置 标签。
  2. 设置为 40% / 60% 布局 为文本提供更多空间。
  3. 启用 在移动设备上堆叠 并设置 右到左.

用于 Shopify 博客文章的 Klaviyo 拆分块 堆叠在移动设备上的文章

  1. 点击 显示选项 标签。

Shopify 博客文章文章显示选项的 Klaviyo 拆分块

  1. 选择内容重复并将您在 Klaviyo 中创建的提要作为源放在 重复 领域:

feeds.Closet52_Blog.rss.channel.item

  1. 设置 项目别名 as 项目.
  2. 单击 预览和测试 你现在可以看到你的博客文章了。 请务必在桌面和移动模式下对其进行测试。

Klaviyo 拆分块预览和测试。

当然,如果您需要帮助 Shopify 优化和 Klaviyo 实施,请随时联系 Highbridge.

披露:我是 Highbridge 我正在使用我的附属链接 ShopifyKlaviyo 在这篇文章中。