Cómo publicar tu feed de blog de Shopify en tu plantilla de correo electrónico de Klaviyo

Cómo publicar tu feed de blog de Shopify en tu plantilla de correo electrónico de Klaviyo

Seguimos mejorando y optimizando nuestra Shopify Plus los esfuerzos de marketing por correo electrónico del cliente de moda utilizando Klaviyo. Klaviyo tiene una integración sólida con Shopify que permite una tonelada de comunicaciones relacionadas con el comercio electrónico que están preconstruidas y listas para funcionar.

Sorprendentemente, al insertar su Publicaciones de blog de Shopify Sin embargo, en un correo electrónico NO es uno de ellos. Haciendo las cosas aún más difíciles... la documentación para crear este correo electrónico no es exhaustiva y ni siquiera documenta su editor más nuevo. Asi que, Highbridge Tuvimos que investigar un poco y descubrir cómo hacerlo nosotros mismos... y no fue fácil.

Aquí está el desarrollo necesario para que esto suceda:

  1. Blog RSS – El feed atom proporcionado por Shopify no proporciona ninguna personalización ni incluye imágenes, por lo que tenemos que crear un feed XML personalizado.
  2. Alimentación de datos de Klaviyo – El feed XML que creamos debe integrarse como un feed de datos en Klaviyo.
  3. Plantilla de correo electrónico Klaviyo – Luego, debemos analizar el feed en una plantilla de correo electrónico donde las imágenes y el contenido tengan el formato adecuado.

Crea un feed de blog personalizado en Shopify

Pude encontrar un artículo con un código de ejemplo para construir un feed personalizado en Shopify por MailChimp e hizo bastantes ediciones para limpiarlo. Estos son los pasos para construir un fuente RSS personalizada en Shopify para tu blog.

  1. Vaya a su Tienda en línea y seleccione el tema en el que desea colocar el feed.
  2. En el menú Acciones, seleccione Editar código.
  3. En el menú Archivos, vaya a Plantillas y haga clic en Agregar una nueva plantilla.
  4. En la ventana Agregar una nueva plantilla, seleccione Crear una nueva plantilla por blog.

Agregar feed de blog líquido a Shopify para Klaviyo

  1. Seleccione el tipo de plantilla de líquido.
  2. Para el Nombre del archivo, ingresamos Klaviyo.
  3. En el editor de código, coloque el siguiente código:

{%- 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. Actualice las variables personalizadas según sea necesario. Una nota sobre esto es que hemos configurado el tamaño de la imagen al ancho máximo de nuestros correos electrónicos, 600 px de ancho. Aquí hay una tabla de tamaños de imagen de Shopify:

Nombre de imagen de Shopify Dimensiones
Pico 16px x 16px
ícono 32px x 32px
pulgar 50px x 50px
chica 100px x 100px
compacto 160px x 160px
mediano 240px x 240px
large 480px x 480px
gran 600px x 600px
1024 X 1024 1024px x 1024px
2048 X 2048 2048px x 2048px
dominar Imagen más grande disponible

  1. Tu feed ahora está disponible en la dirección de tu blog con la cadena de consulta adjunta para verlo. En el caso de nuestro cliente, la URL del feed es:

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

  1. ¡Tu feed ya está listo para usar! Si lo desea, puede navegar hasta él en una ventana del navegador para asegurarse de que no haya errores. Nos aseguraremos de que se analice correctamente en nuestro siguiente paso:

Agregue su blog en Klaviyo

Para utilizar su nuevo blog en Klaviyo, debe agregarlo como fuente de datos.

  1. Navegue hasta Fuentes de datos
  2. Selecciona Agregar fuente web
  3. Entrar a nombre de la alimentación (no se permiten espacios)
  4. Escriba el URL del feed que acabas de crear.
  5. Introduzca el método de solicitud como
  6. Introduzca el tipo de contenido como XML

Klaviyo Agregar Shopify XML Blog Feed

  1. Presione Actualizar fuente de datos.
  2. Presione Vista previa para asegurarse de que el feed se está completando correctamente.

Vista previa de Shopify Blog Feed en Klaviyo

Agregue su feed de blog a su plantilla de correo electrónico de Klaviyo

Ahora queremos construir nuestro blog en nuestra plantilla de correo electrónico en Klaviyo. En mi opinión, y la razón por la que necesitábamos un feed personalizado, me gusta un área de contenido dividida donde la imagen está a la izquierda, el título y el extracto están debajo. Klaviyo también tiene la opción de colapsar esto en una sola columna en un dispositivo móvil.

  1. Arrastrar un Bloque dividido en su plantilla de correo electrónico.
  2. Establezca su columna izquierda en un Imagen y su columna derecha a un Texto bloquear.

Klaviyo Split Block para artículos de publicación de blog de Shopify

  1. Para la imagen, seleccione Imagen dinámica y establezca el valor en:

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

  1. Establezca el texto alternativo en:

{{item.title}}

  1. Establezca la Dirección del enlace para que si el suscriptor de correo electrónico hace clic en la imagen, lo lleve a su artículo.

{{item.link}}

  1. Selecciona el botón columna derecha para establecer el contenido de la columna.

Título y descripción de la publicación en el blog

  1. Añada su contenido, asegúrese de agregar un enlace a su título e insertar el extracto de su publicación.

<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. Selecciona el botón Configuración dividida lengüeta.
  2. Establecer en un Diseño 40% / 60% para proporcionar más espacio para el texto.
  3. permitir Apilar en el móvil y establecer De derecha a izquierda.

Klaviyo Split Block para artículos de publicación de blog de Shopify apilados en dispositivos móviles

  1. Selecciona el botón Opciones de visualización lengüeta.

Opciones de visualización de artículos de publicación de blog de Klaviyo Split Block para Shopify

  1. Seleccione Repetir contenido y coloque el feed que creó en Klaviyo como fuente en el repetir para campo:

feeds.Closet52_Blog.rss.channel.item

  1. Seleccione las alias de artículo as ít.
  2. Presione Vista previa y prueba y ahora puedes ver las publicaciones de tu blog. Asegúrese de probarlo tanto en el modo de escritorio como en el móvil.

Vista previa y prueba de Klaviyo Split Block.

Y, por supuesto, si necesita ayuda en Shopify optimización y Klaviyo implementaciones, no dude en comunicarse con Highbridge.

Divulgación: soy socio en Highbridge y estoy usando mis enlaces de afiliado para Shopify y Klaviyo en este articulo.