Як опублікувати стрічку блогу Shopify у своєму шаблоні електронної пошти Klaviyo

Як опублікувати стрічку блогу Shopify у своєму шаблоні електронної пошти Klaviyo

Ми продовжуємо вдосконалювати та оптимізувати наші ShopifyPlus використання електронних маркетингових зусиль клієнта моди Клавіо. Klaviyo має надійну інтеграцію з Shopify, що забезпечує масу зв’язків, пов’язаних з електронною комерцією, які вже попередньо створені та готові до роботи.

На диво, вставляючи свій Публікації в блозі Shopify в електронну пошту НЕ одна з них! Ще більш складно... документація для створення цього електронного листа не є ретельною і навіть не документує їх найновіший редактор. Так, Highbridge довелося трохи покопатися і зрозуміти, як це зробити самим… і це було нелегко.

Ось розробка, необхідна для цього:

  1. Блог стрічки – Канал atom, наданий Shopify, не надає жодних налаштувань і не містить зображень, тому ми повинні створити власний канал XML.
  2. Канал даних Klaviyo – XML-канал, який ми створили, потрібно інтегрувати як канал даних у Klaviyo.
  3. Шаблон електронної пошти Klaviyo – Потім нам потрібно розібрати канал у шаблон електронної пошти, у якому зображення та вміст правильно відформатовані.

Створіть власну стрічку блогу в Shopify

Мені вдалося знайти статтю з прикладом коду для створення a спеціальний канал у Shopify та цінності Mailchimp і вніс чимало змін, щоб очистити його. Ось кроки для створення a налаштований RSS-канал у Shopify для вашого блогу.

  1. Перейдіть до свого Інтернет-магазин і виберіть тему, в яку хочете розмістити стрічку.
  2. У меню Дії виберіть Редагувати код.
  3. У меню Файли перейдіть до Шаблони та натисніть Додайте новий шаблон.
  4. У вікні Додати новий шаблон виберіть Створіть новий шаблон та цінності блог.

Додайте рідкий канал блогу до Shopify для 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 х 16px
іконка 32px х 32px
великий палець руки 50px х 50px
невеликий 100px х 100px
компактний 160px х 160px
середа 240px х 240px
великий 480px х 480px
великий 600px х 600px
1024 X 1024 1024px х 1024px
2048 X 2048 2048px х 2048px
майстер Найбільше зображення

  1. Ваш канал тепер доступний за адресою вашого блогу з доданим рядком запиту для його перегляду. У випадку нашого клієнта URL-адреса каналу:

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

  1. Тепер ваш канал готовий до використання! Якщо ви хочете, ви можете перейти до нього у вікні браузера, щоб переконатися, що немає помилок. Ми переконаємося, що він правильно аналізується на нашому наступному кроці:

Додайте стрічку свого блогу в Klaviyo

Щоб використовувати ваш новий канал блогу Клавіо, ви повинні додати його як канал даних.

  1. перейдіть до Потоки даних
  2. вибрати Додати веб-канал
  3. Введіть Назва каналу (пробіли не допускаються)
  4. Введіть URL-адреса каналу що ви щойно створили.
  5. Введіть метод запиту як GET
  6. Введіть тип вмісту як XML

Klaviyo Додайте Shopify XML-канал блогу

  1. Натисніть Оновити канал даних.
  2. Натисніть попередній перегляд щоб переконатися, що фід заповнюється правильно.

Попередній перегляд Shopify Blog Feed у Klaviyo

Додайте стрічку свого блогу до свого шаблону електронної пошти Klaviyo

Тепер ми хочемо створити наш блог у шаблоні електронної пошти Клавіо. На мою думку, а також причина, чому нам потрібен користувацький канал, мені подобається розділена область вмісту, де зображення розташоване ліворуч, а заголовок та уривок внизу. Klaviyo також має можливість згорнути це в один стовпець на мобільному пристрої.

  1. Перетягніть a Розділений блок у ваш шаблон електронної пошти.
  2. Встановіть для лівого стовпця значення an зображення а ваш правий стовпець до a текст блок

Розділений блок Klaviyo для статей блогу Shopify

  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. Встановити на a 40% / 60% макет щоб надати більше місця для тексту.
  3. включити Стек на мобільному і встановити Праворуч наліво.

Розділений блок Klaviyo для статей блогу Shopify, складений на мобільному пристрої

  1. Виберіть Параметри відображення Вкладка.

Розділений блок Klaviyo для Shopify Параметри відображення статей у блозі

  1. Виберіть «Повторити вміст» і введіть канал, який ви створили в Klaviyo, як джерело в файлі Повторити для поле:

feeds.Closet52_Blog.rss.channel.item

  1. Встановіть Псевдонім елемента as пункт.
  2. Натисніть Попередній перегляд і тест і тепер ви можете переглядати свої дописи в блозі. Обов’язково перевірте його як у настільному, так і в мобільному режимі.

Klaviyo Split Block Попередній перегляд і тест.

І, звичайно, якщо вам потрібна допомога в Shopify оптимізація і Клавіо реалізації, не соромтеся звертатися до Highbridge.

Розкриття інформації: Я партнер у Highbridge і я використовую свої партнерські посилання для Shopify і Клавіо в цій статті.