Cum să vă publicați fluxul de blog Shopify în șablonul dvs. de e-mail Klaviyo

Continuăm să îmbunătățim și să ne optimizăm ShopifyPlus eforturile de marketing prin e-mail ale clientului de modă folosind Klaviyo. Klaviyo are o integrare solidă cu Shopify, care permite o mulțime de comunicări legate de comerțul electronic, care sunt pre-construite și gata de funcționare.

În mod surprinzător, introducerea dvs Postări pe blog Shopify într-un e-mail NU este unul dintre ele, totuși! Facand lucrurile și mai dificile... documentația pentru construirea acestui e-mail nu este amănunțită și nici măcar nu documentează cel mai nou editor al lor. Asa de, Highbridge a trebuit să sapă și să ne dăm seama cum să o facem noi înșine... și nu a fost ușor.

Iată dezvoltarea necesară pentru ca acest lucru să se întâmple:

1. Feed blog – Fluxul atom furnizat de Shopify nu oferă nicio personalizare și nici nu include imagini, așa că trebuie să construim un flux XML personalizat.
2. Flux de date Klaviyo – Fluxul XML pe care l-am construit trebuie să fie integrat ca flux de date în Klaviyo.
3. Șablon de e-mail Klaviyo – Apoi trebuie să analizăm feedul într-un șablon de e-mail în care imaginile și conținutul sunt formatate corespunzător.

Creați un flux personalizat de blog în Shopify

Am reușit să găsesc un articol cu ​​exemplu de cod pentru a construi un feed personalizat în Shopify pentru MailChimp și a făcut destul de multe modificări pentru a-l curăța. Iată pașii pentru a construi un flux RSS personalizat în Shopify pentru blogul tău.

1. Navigați la dvs. Magazin Online și selectați tema în care doriți să plasați fluxul.
2. În meniul Acțiuni, selectați Editați codul.
3. În meniul Fișiere, navigați la Șabloane și faceți clic Adăugați un șablon nou.
4. În fereastra Adăugați un nou șablon, selectați Creați un șablon nou pentru blogul.

5. Selectați tipul șablonului lichid.
6. Pentru Numele fișierului, am introdus klaviyo.
7. În editorul de cod, plasați următorul cod:

{%- 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>

8. Actualizați variabilele personalizate după cum este necesar. O notă în acest sens este că am setat dimensiunea imaginii la lățimea maximă a e-mailurilor noastre, 600px lățime. Iată un tabel cu dimensiunile imaginilor Shopify:

Numele imaginii Shopify	Dimensiuni
pico	16 px x 16 px
icoană	32 px x 32 px
deget mare	50 px x 50 px
mic	100 px x 100 px
compact	160 px x 160 px
mediu	240 px x 240 px
mare	480 px x 480 px
mare	600 px x 600 px
X 1024 1024	1024 px x 1024 px
X 2048 2048	2048 px x 2048 px
maestru	Cea mai mare imagine disponibilă

9. Feedul dvs. este acum disponibil la adresa blogului dvs. cu șirul de interogări atașat pentru a-l vizualiza. În cazul clientului nostru, adresa URL a feedului este:

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

10. Feedul dvs. este acum gata de utilizare! Dacă doriți, puteți naviga la acesta într-o fereastră de browser pentru a vă asigura că nu există erori. Ne vom asigura că se analizează corect în următorul pas:

Adăugați fluxul dvs. de blog în Klaviyo

Pentru a utiliza noul dvs. feed de blog în Klaviyo, trebuie să-l adăugați ca flux de date.

1. Navigheaza catre Fluxuri de date
2. Selectați Adăugați flux web
3. Introduceţi un Nume feed (nu sunt permise spatii)
4. Introduceţi Adresa URL a feedului pe care tocmai l-ai creat.
5. Introduceți metoda de solicitare ca GET
6. Introduceți tipul de conținut ca XML

7. Clic Actualizați fluxul de date.
8. Clic Anunţ pentru a vă asigura că hrana se populează corect.

Adăugați fluxul dvs. de blog la șablonul dvs. de e-mail Klaviyo

Acum dorim să construim blogul nostru în șablonul nostru de e-mail în Klaviyo. În opinia mea, și motivul pentru care aveam nevoie de un feed personalizat, îmi place o zonă de conținut divizată în care imaginea este în stânga, titlul și fragmentul sunt dedesubt. Klaviyo are, de asemenea, opțiunea de a restrânge acest lucru într-o singură coloană pe un dispozitiv mobil.

1. Trageți o Split Block în șablonul dvs. de e-mail.
2. Setați coloana din stânga la un Imagine iar coloana din dreapta la a Text bloc.

3. Pentru imagine, selectați Imagine dinamică și setați valoarea la:

{{ item|lookup:'media:content'|lookup:'@url' }}

4. Setați Alt Text la:

{{item.title}}

5. Setați adresa linkului astfel încât, dacă abonatul de e-mail face clic pe imagine, acesta îl va aduce la articolul dvs.

{{item.link}}

6. selectaţi coloana din dreapta pentru a seta conținutul coloanei.

7. Adăugați-vă conţinut, asigurați-vă că adăugați un link la titlu și introduceți fragmentul postării.

<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>

8. selectaţi Setări împărțite tab.
9. Setați la a 40% / 60% aspect pentru a oferi mai mult spațiu pentru text.
10. Permite Stack on Mobile și stabilit De la dreapta la stanga.

11. selectaţi Optiuni de afisare tab.

12. Selectați Repetare conținut și introduceți feedul pe care l-ați creat în Klaviyo ca sursă în Repetați pentru camp:

feeds.Closet52_Blog.rss.channel.item

13. Seteaza Alias ​​de articol as articol.
14. Clic Previzualizare și testare și acum puteți vedea postările de pe blog. Asigurați-vă că îl testați atât în ​​modul desktop, cât și în modul mobil.

Și, desigur, dacă aveți nevoie de asistență Shopify optimizare şi Klaviyo implementări, nu ezitați să contactați Highbridge.

Divulgare: sunt partener în Highbridge și îmi folosesc linkurile de afiliat pentru Shopify și Klaviyo în acest articol.