Як апублікаваць сваю стужку блога Shopify у вашым шаблоне электроннай пошты Klaviyo

Як апублікаваць сваю стужку блога Shopify у вашым шаблоне электроннай пошты Klaviyo

Мы працягваем удасканальваць і аптымізаваць нашы Shopify Plus маркетынгавыя намаганні кліента моды з выкарыстаннем Klaviyo. Klaviyo мае надзейную інтэграцыю з Shopify, што дазваляе выкарыстоўваць масу камунікацый, звязаных з электроннай камерцыяй, якія папярэдне створаны і гатовы да працы.

Дзіўна, устаўляючы свой Паведамленні ў блогу Shopify у электронную пошту НЕ з'яўляецца адным з іх, аднак! Усё яшчэ больш складана... дакументацыя для стварэння гэтага ліста не з'яўляецца дбайнай і нават не дакументуе іх найноўшы рэдактар. Такім чынам, Highbridge трэба было крыху пакапацца і прыдумаць, як гэта зрабіць самім... і гэта было няпроста.

Вось распрацоўка, неабходная, каб гэта адбылося:

  1. Стужка блога – Канал атама, які прадстаўляецца Shopify, не дае ніякіх налад і не ўключае выявы, таму мы павінны стварыць уласны XML-канал.
  2. Стужка дадзеных Klaviyo – XML-канал, які мы стварылі, павінен быць інтэграваны як стужка даных у Klaviyo.
  3. Шаблон электроннай пошты Klaviyo – Затым нам трэба разабраць стужку ў шаблон электроннай пошты, дзе выявы і змесціва належным чынам адфарматаваны.

Стварыце карыстальніцкую стужку блога ў Shopify

Мне ўдалося знайсці артыкул з прыкладам кода для стварэння файла карыстальніцкі канал у 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 х 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

Для таго, каб выкарыстоўваць вашу новую стужку блога Klaviyo, вы павінны дадаць яго ў якасці стужкі дадзеных.

  1. перайдзіце да Стужкі дадзеных
  2. выбраць Дадаць вэб-стужку
  3. Калі ласка, увядзіце Назва канала (прабелы не дапускаюцца)
  4. Калі ласка, увядзіце URL канала што вы толькі што стварылі.
  5. Увядзіце метад запыту як GET
  6. Увядзіце тып кантэнту як XML

Klaviyo Дадаць стужку блога Shopify XML

  1. націсніце Абнавіць стужку дадзеных.
  2. націсніце Папярэдні прагляд каб гарантаваць, што корм правільна запаўняецца.

Папярэдні прагляд Shopify Blog Feed у Klaviyo

Дадайце стужку блога ў свой шаблон электроннай пошты Klaviyo

Цяпер мы хочам пабудаваць наш блог у шаблон электроннай пошты Klaviyo. На мой погляд, а таксама прычына, па якой нам спатрэбілася карыстальніцкая стужка, мне падабаецца падзеленая вобласць змесціва, дзе малюнак знаходзіцца злева, а загаловак і ўрывак - унізе. Klaviyo таксама мае магчымасць згарнуць гэта ў адзін слупок на мабільнай прыладзе.

  1. Перацягнуць a Раздзяленне блока у свой шаблон электроннай пошты.
  2. Усталюйце левы слупок на малюнак і ваш правы слупок да 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. Устанавіць а 40% / 60% макет каб забяспечыць больш месца для тэксту.
  3. Уключыць Стэк на мабільны і ўсталяваць Справа налева.

Klaviyo Split Block для артыкулаў Shopify Blog Post на мабільным тэлефоне

  1. Выберыце Параметры адлюстравання ўкладкі.

Параметры адлюстравання артыкулаў Klaviyo Split Block для Shopify

  1. Выберыце Паўтараць змесціва і пастаўце стужку, якую вы стварылі ў Klaviyo, у якасці крыніцы ў Паўтарыце для поле:

feeds.Closet52_Blog.rss.channel.item

  1. ўсталяваць Псеўданім элемента as пункт.
  2. націсніце Папярэдні прагляд і тэст і цяпер вы можаце бачыць свае паведамленні ў блогу. Абавязкова праверце яго як у настольным, так і ў мабільным рэжыме.

Папярэдні прагляд і тэст Klaviyo Split Block.

І, вядома, калі вам патрэбна дапамога ў Shopify аптымізацыя і Klaviyo рэалізацыі, не саромейцеся звяртацца да Highbridge.

Раскрыццё інфармацыі: Я партнёр у Highbridge і я выкарыстоўваю свае партнёрскія спасылкі для Shopify і Klaviyo у гэтым артыкуле.