Як опублікувати стрічку блогу Shopify у своєму шаблоні електронної пошти Klaviyo
Ми продовжуємо вдосконалювати та оптимізувати наші ShopifyPlus використання електронних маркетингових зусиль клієнта моди Клавіо. Klaviyo має надійну інтеграцію з Shopify, що забезпечує масу зв’язків, пов’язаних з електронною комерцією, які вже попередньо створені та готові до роботи.
На диво, вставляючи свій Публікації в блозі Shopify в електронну пошту НЕ одна з них! Ще більш складно... документація для створення цього електронного листа не є ретельною і навіть не документує їх найновіший редактор. Так, DK New Media довелося трохи покопатися і зрозуміти, як це зробити самим… і це було нелегко.
Ось розробка, необхідна для цього:
- Блог стрічки – Канал atom, наданий Shopify, не надає жодних налаштувань і не містить зображень, тому ми повинні створити власний канал XML.
- Канал даних Klaviyo – XML-канал, який ми створили, потрібно інтегрувати як канал даних у Klaviyo.
- Шаблон електронної пошти Klaviyo – Потім нам потрібно розібрати канал у шаблон електронної пошти, у якому зображення та вміст правильно відформатовані.
Створіть власну стрічку блогу в Shopify
Мені вдалося знайти статтю з прикладом коду для створення a спеціальний канал у Shopify та цінності Intuit Mailchimp і вніс чимало змін, щоб очистити його. Ось кроки для створення a налаштований 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 х 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 |
майстер | Найбільше зображення |
- Ваш канал тепер доступний за адресою вашого блогу з доданим рядком запиту для його перегляду. У випадку нашого клієнта URL-адреса каналу:
https://yourshopifysite.com/blogs/fashion?view=klaviyo
- Тепер ваш канал готовий до використання! Якщо ви хочете, ви можете перейти до нього у вікні браузера, щоб переконатися, що немає помилок. Ми переконаємося, що він правильно аналізується на нашому наступному кроці:
Додайте канал свого блогу до Klaviyo
Щоб використовувати ваш новий канал блогу Клавіо, ви повинні додати його як канал даних.
- перейдіть до Потоки даних
- Select Додати веб-канал
- Введіть Назва каналу (пробіли не допускаються)
- Введіть URL-адреса каналу що ви щойно створили.
- Введіть метод запиту як GET
- Введіть тип вмісту як XML
- Натисніть Оновити канал даних.
- Натисніть попередній перегляд щоб переконатися, що фід заповнюється правильно.
Додайте стрічку свого блогу до свого шаблону електронної пошти Klaviyo
Тепер ми хочемо створити наш блог у шаблоні електронної пошти Клавіо. На мою думку, а також причина, чому нам потрібен користувацький канал, мені подобається розділена область вмісту, де зображення розташоване ліворуч, а заголовок та уривок внизу. Klaviyo також має можливість згорнути це в один стовпець на мобільному пристрої.
- Перетягніть a Розділений блок у ваш шаблон електронної пошти.
- Встановіть для лівого стовпця значення an зображення а ваш правий стовпець до a текст блок
- Для зображення виберіть Динамічне зображення і встановіть значення:
{{ 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>
- Виберіть Налаштування розділення Вкладка.
- Встановити на a 40% / 60% макет щоб надати більше місця для тексту.
- включити Стек на мобільному і встановити Праворуч наліво.
- Виберіть Параметри відображення Вкладка.
- Виберіть «Повторити вміст» і введіть канал, який ви створили в Klaviyo, як джерело в файлі Повторити для поле:
feeds.Closet52_Blog.rss.channel.item
- Встановіть Псевдонім елемента as пункт.
- Натисніть Попередній перегляд і тест і тепер ви можете переглядати свої дописи в блозі. Обов’язково перевірте його як у настільному, так і в мобільному режимі.
І, звичайно, якщо вам потрібна допомога в Shopify оптимізація і
Клавіо реалізації, не соромтеся звертатися до DK New Media.Розкриття інформації: Я партнер у DK New Media і я використовую свої партнерські посилання для Shopify та Клавіо в цій статті.