Как да публикувате своя Shopify блог емисия във вашия имейл шаблон на Klaviyo

Как да публикувате своя Shopify блог емисия във вашия имейл шаблон на Klaviyo

Продължаваме да подобряваме и оптимизираме нашите ShopifyPlus използване на усилията за имейл маркетинг на модния клиент Klaviyo. Klaviyo има солидна интеграция с Shopify, която позволява множество комуникации, свързани с електронната търговия, които са предварително изградени и готови за работа.

Изненадващо, вмъкването на вашия Shopify Публикации в блога в имейл обаче НЕ е един от тях! Прави нещата още по-трудни... документацията за създаване на този имейл не е задълбочена и дори не документира най-новия им редактор. Така, Highbridge трябваше да се поразровим и да разберем как да го направим сами... и не беше лесно.

Ето необходимото развитие, за да се случи това:

  1. Емисия за блога – Атомната емисия, предоставена от Shopify, не предоставя никаква персонализация, нито включва изображения, така че трябва да изградим персонализиран XML канал.
  2. Klaviyo Data Feed – Изграденият от нас 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. Актуализирайте персонализираните променливи, ако е необходимо. Една забележка по този въпрос е, че сме задали размера на изображението на максималната ширина на нашите имейли, широка 600px. Ето таблица с размерите на изображенията на Shopify:

Shopify Име на изображението Размери
пико 16px х 16px
икона 32px х 32px
палец 50px х 50px
малък 100px х 100px
компактен 160px х 160px
среда 240px х 240px
голям 480px х 480px
голям 600px х 600px
X 1024 1024 1024px х 1024px
X 2048 2048 2048px х 2048px
майстор Най-голямото налично изображение

  1. Вашата емисия вече е достъпна на адреса на вашия блог с добавен низ за заявка, за да я видите. В случая на нашия клиент URL адресът на емисията е:

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

  1. Вашата емисия вече е готова за използване! Ако желаете, можете да отидете до него в прозорец на браузъра, за да сте сигурни, че няма грешки. Ще се уверим, че анализира правилно в следващата ни стъпка:

Добавете своя блог емисия в Klaviyo

За да използвате новия си блог емисия в Klaviyo, трябва да го добавите като информационна емисия.

  1. Отидете до Емисии за данни
  2. Изберете Добавете уеб емисия
  3. Въведете Име на емисия (не са разрешени интервали)
  4. Въведете URL адрес на емисия които току-що създадохте.
  5. Въведете метода на заявка като GET
  6. Въведете Тип съдържание като XML

Klaviyo Добавяне на Shopify XML блог Feed

  1. Кликнете Актуализиране на емисията за данни.
  2. Кликнете Предварителен преглед за да се уверите, че емисията се запълва правилно.

Визуализация на Shopify Blog Feed в Klaviyo

Добавете своя блог емисия към вашия имейл шаблон на Klaviyo

Сега искаме да вградим нашия блог в нашия имейл шаблон Klaviyo. Според мен и причината, поради която се нуждаехме от персонализирана емисия, харесвам разделно съдържание, където изображението е отляво, а заглавието и откъсът са отдолу. Klaviyo също има опцията да свие това в една колона на мобилно устройство.

  1. Плъзнете a Разделен блок във вашия имейл шаблон.
  2. Задайте лявата си колона на an Изображение и дясната ви колона към a Текст блок.

Klaviyo Split Block за Shopify Blog Post Articles

  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 Split Block за Shopify Blog Post Статии, подредени на мобилни устройства

  1. Изберете Опциите на дисплея раздела.

Klaviyo Split Block за Shopify Опции за показване на статии в блога

  1. Изберете Content Repeat и поставете канала, който сте създали в Klaviyo като източник в Повторете за поле:

feeds.Closet52_Blog.rss.channel.item

  1. Нагласи Псевдоним на артикула as точка.
  2. Кликнете Преглед и тест и вече можете да видите публикациите си в блога. Не забравяйте да го тествате както в настолен, така и в мобилен режим.

Klaviyo Split Block Преглед и тест.

И, разбира се, ако имате нужда от помощ Shopify оптимизация и Klaviyo реализации, не се колебайте да се обърнете към Highbridge.

Разкриване: Аз съм съдружник в Highbridge и използвам моите партньорски връзки за Shopify и Klaviyo в тази статия.