Вміст МаркетингЕлектронна комерція та роздрібна торгівляЕлектронний маркетинг і автоматизація

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

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

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

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

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

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

Мені вдалося знайти статтю з прикладом коду для створення a спеціальний канал у Shopify та цінності Intuit 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 10241024px х 1024px
2048 X 20482048px х 2048px
майстерНайбільше зображення
  1. Ваш канал тепер доступний за адресою вашого блогу з доданим рядком запиту для його перегляду. У випадку нашого клієнта URL-адреса каналу:
https://yourshopifysite.com/blogs/fashion?view=klaviyo
  1. Тепер ваш канал готовий до використання! Якщо ви хочете, ви можете перейти до нього у вікні браузера, щоб переконатися, що немає помилок. Ми переконаємося, що він правильно аналізується на нашому наступному кроці:

Додайте канал свого блогу до Klaviyo

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

  1. перейдіть до Потоки даних
  2. Select Додати веб-канал
  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 оптимізація і

Клавіо реалізації, не соромтеся звертатися до DK New Media.

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

Douglas Karr

Douglas Karr є CMO компанії OpenINSIGHTS і засновник Martech Zone. Дуглас допоміг десяткам успішних стартапів MarTech, допоміг у належній перевірці понад 5 мільярдів доларів у придбання та інвестиції Martech, і продовжує допомагати компаніям у впровадженні та автоматизації їхніх продажів і маркетингових стратегій. Дуглас — міжнародно визнаний експерт і спікер з цифрової трансформації та MarTech. Дуглас також є опублікованим автором посібника для чайників і книги про лідерство в бізнесі.

Статті по темі

Догори кнопки
близько

Виявлено блокування реклами

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