Како да го објавите вашиот блог на Shopify во шаблонот за е-пошта Klaviyo

Како да го објавите вашиот блог на Shopify во шаблонот за е-пошта Klaviyo

Продолжуваме да ги подобруваме и оптимизираме нашите Shopify Плус напорите за е-пошта на модниот клиент за маркетинг користење Klaviyo. Klaviyo има солидна интеграција со Shopify што овозможува еден тон комуникации поврзани со е-трговија кои се претходно изградени и подготвени за работа.

Изненадувачки, вметнување на вашиот Shopify објави на блогови во е-пошта НЕ е еден од нив, иако! Нештата се уште потешки… документацијата за создавање на оваа е-пошта не е темелна и дури не го документира нивниот најнов уредник. Значи, Highbridge мораше да направиме малку копање и да дознаеме како да го направиме тоа сами... и не беше лесно.

Еве го развојот неопходен за да се случи ова:

  1. Напојување на блогови – Доводот на атом обезбеден од Shopify не обезбедува никакво прилагодување, ниту вклучува слики, па затоа мораме да изградиме прилагодено XML довод.
  2. Напојување со податоци на Klaviyo – XML доводот што го изградивме треба да се интегрира како извор на податоци во Klaviyo.
  3. Шаблон за е-пошта Klaviyo – Потоа треба да го анализираме доводот во шаблон за е-пошта каде што сликите и содржината се правилно форматирани.

Создадете прилагоден извор на блог во Shopify

Можев да најдам статија со пример код за да изградам a прилагодено снабдување во Shopify за MailChimp и направи неколку измени за да го исчисти. Еве ги чекорите за изградба на а прилагоден 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 x 16px
Иконата 32px x 32px
палецот 50px x 50px
мали 100px x 100px
компактен 160px x 160px
среден 240px x 240px
големи 480px x 480px
голема 600px x 600px
1024 Х 1024 1024px x 1024px
2048 Х 2048 2048px x 2048px
господар Најголемата достапна слика

  1. Вашата активност сега е достапна на адресата на вашиот блог со приложена низа за пребарување за да ја видите. Во случајот на нашиот клиент, URL-адресата на доводот е:

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

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

Додајте го вашиот извор на блог во Klaviyo

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

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

Klaviyo Додадете довод на блог на Shopify XML

  1. Кликнете Ажурирајте го подводот за податоци.
  2. Кликнете Преглед за да се осигурате дека доводот правилно се наполнува.

Прегледајте ја храната за блог на Shopify во Klaviyo

Додајте го вашиот блог довод на вашиот шаблон за е-пошта Klaviyo

Сега сакаме да го изградиме нашиот блог во нашиот шаблон за е-пошта Klaviyo. Според мое мислење, и причината зошто ни требаше прилагодено снабдување, ми се допаѓа поделена област за содржина каде што сликата е лево, насловот и извадокот се под. Klaviyo исто така има опција да го собере ова во една колона на мобилен уред.

  1. Повлечете а Сплит блок во вашиот шаблон за е-пошта.
  2. Поставете ја вашата лева колона на an Сликата а вашата десна колона до a Текст блок.

Klaviyo Split Block за статии за објавување на блогови на 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 Split Block за статии за објавување на блог на Shopify наредени на мобилен телефон

  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 во оваа статија.