如何在您的 Klaviyo 電子郵件模板中發布您的 Shopify 博客提要

如何在您的 Klaviyo 電子郵件模板中發布您的 Shopify 博客提要

我們不斷加強和優化我們的 Shopify 加 時尚客戶的電子郵件營銷工作使用 Klaviyo. Klaviyo 與 Shopify 進行了穩固的集成,可實現大量與電子商務相關的通信,這些通信是預先構建並準備就緒的。

令人驚訝的是,插入你的 Shopify 博客文章 但是,進入電子郵件不是其中之一! 讓事情變得更加困難......構建這封電子郵件的文檔並不完整,甚至沒有記錄他們最新的編輯器。 所以, Highbridge 不得不做一些挖掘並弄清楚如何自己去做……這並不容易。

以下是實現這一目標所需的開發:

  1. 博客Feed – 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
Compact single 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 在這篇文章中。