Com publicar el vostre blog de Shopify a la vostra plantilla de correu electrònic Klaviyo

Com publicar el vostre blog de Shopify a la vostra plantilla de correu electrònic Klaviyo

Continuem millorant i optimitzant el nostre Shopify Plus esforços de màrqueting per correu electrònic del client de moda utilitzant Klaviyo. Klaviyo has a solid integration with Shopify that enables a ton of e-commerce-related communications that are pre-built and ready to go.

Sorprenentment, inserint el vostre Publicacions de bloc de Shopify en un correu electrònic NO és un d'ells, però! Dificultant encara més les coses... la documentació per crear aquest correu electrònic no és exhaustiva i ni tan sols documenta el seu editor més recent. Tan, Highbridge havíem de fer una mica d'excavació i esbrinar com fer-ho nosaltres mateixos... i no va ser fàcil.

Aquí teniu el desenvolupament necessari perquè això passi:

  1. Feed de blocs – El feed d'àtom proporcionat per Shopify no ofereix cap personalització ni inclou imatges, de manera que hem de crear un canal XML personalitzat.
  2. Font de dades de Klaviyo – El canal XML que hem creat s'ha d'integrar com a font de dades a Klaviyo.
  3. Plantilla de correu electrònic de Klaviyo – Aleshores hem d'analitzar el feed en una plantilla de correu electrònic on les imatges i el contingut tinguin el format adequat.

Creeu un canal de bloc personalitzat a Shopify

Vaig poder trobar un article amb codi d'exemple per crear un feed personalitzat a Shopify for MailChimp i va fer moltes modificacions per netejar-lo. Aquests són els passos per construir un canal RSS personalitzat a Shopify per al teu bloc.

  1. Navegueu cap al vostre Botiga Online i seleccioneu el tema en què voleu col·locar el canal.
  2. Al menú Accions, seleccioneu Edita el codi.
  3. Al menú Fitxers, navegueu a Plantilles i feu clic Afegiu una plantilla nova.
  4. A la finestra Afegeix una plantilla nova, seleccioneu Creeu una plantilla nova for bloc.

Afegeix un feed de bloc líquid a Shopify per a Klaviyo

  1. Seleccioneu el tipus de plantilla de líquid.
  2. Per al nom del fitxer, hem introduït klaviyo.
  3. A l'editor de codi, col·loqueu el codi següent:

{%- 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. Actualitzeu les variables personalitzades segons sigui necessari. Una nota sobre això és que hem establert la mida de la imatge a l'amplada màxima dels nostres correus electrònics, 600 píxels d'ample. Aquí teniu una taula de mides d'imatge de Shopify:

Nom de la imatge de Shopify dimensions
pic 16 px x 16 px
icona 32 px x 32 px
polze 50 px x 50 px
petit 100 px x 100 px
compacte 160 px x 160 px
mitjà 240 px x 240 px
gran 480 px x 480 px
gran 600 px x 600 px
1024 1024 X 1024 px x 1024 px
2048 2048 X 2048 px x 2048 px
mestre Imatge més gran disponible

  1. El vostre feed ara està disponible a l'adreça del vostre bloc amb la cadena de consulta afegida per veure'l. En el cas del nostre client, l'URL del feed és:

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

  1. El vostre feed ja està llest per utilitzar-lo! Si voleu, podeu navegar-hi des d'una finestra del navegador per assegurar-vos que no hi hagi errors. Ens assegurarem que s'analitzi correctament en el següent pas:

Afegeix el teu feed del bloc a Klaviyo

Per tal d'utilitzar el vostre nou canal de blog Klaviyo, l'heu d'afegir com a font de dades.

  1. navegui fins Feeds de dades
  2. seleccionar Afegeix feed web
  3. Introduïu una Nom del feed (no es permeten espais)
  4. Escriviu el URL del feed que acabes de crear.
  5. Introduïu el Mètode de sol·licitud com a GET
  6. Introduïu el tipus de contingut com a XML

Klaviyo Afegeix un feed de blocs XML de Shopify

  1. feu clic Actualitza el feed de dades.
  2. feu clic Vista prèvia per garantir que el feed s'omple correctament.

Previsualitza el feed del bloc de Shopify a Klaviyo

Afegiu el vostre feed del bloc a la vostra plantilla de correu electrònic de Klaviyo

Ara volem incorporar el nostre bloc a la nostra plantilla de correu electrònic Klaviyo. Al meu entendre, i el motiu pel qual necessitàvem un feed personalitzat, m'agrada una àrea de contingut dividida on la imatge es troba a l'esquerra, el títol i el fragment a sota. Klaviyo també té l'opció de reduir-ho en una sola columna en un dispositiu mòbil.

  1. Arrossegueu a Bloc dividit a la vostra plantilla de correu electrònic.
  2. Estableix la columna de l'esquerra a un Imatge i la teva columna dreta a a Text bloc.

Klaviyo Split Block per a articles de publicació del bloc de Shopify

  1. Per a la imatge, seleccioneu Imatge dinàmica i estableix el valor a:

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

  1. Estableix el text alternatiu a:

{{item.title}}

  1. Establiu l'adreça d'enllaç de manera que si el subscriptor del correu electrònic fa clic a la imatge, els portarà al vostre article.

{{item.link}}

  1. Seleccioneu la columna dreta per definir el contingut de la columna.

Títol i descripció de la publicació del blog de Klaviyo

  1. Afegiu el vostre contingut, assegureu-vos d'afegir un enllaç al títol i inserir l'extracte de la publicació.

<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. Seleccioneu la Configuració dividida Tab.
  2. Estableix a a 40% / 60% maquetació per donar més espai al text.
  3. Enable Apilar al mòbil i set De dreta a esquerra.

Klaviyo Split Block per a articles de publicació del bloc de Shopify apilats al mòbil

  1. Seleccioneu la Opcions de visualització Tab.

Klaviyo Split Block per a Shopify Blog Post articles Opcions de visualització

  1. Seleccioneu Repetició de contingut i col·loqueu la font que heu creat a Klaviyo com a font Repetiu per camp:

feeds.Closet52_Blog.rss.channel.item

  1. Estableix el Àlies d'element as article.
  2. feu clic Vista prèvia i prova i ara pots veure les entrades del teu bloc. Assegureu-vos de provar-lo tant en mode d'escriptori com en mode mòbil.

Klaviyo Split Block Vista prèvia i prova.

I, per descomptat, si necessiteu ajuda Shopify optimització i Klaviyo implementacions, no dubteu en contactar-hi Highbridge.

Divulgació: sóc soci de Highbridge i estic utilitzant els meus enllaços d'afiliat per Shopify Klaviyo en aquest article.