Como publicar o teu blog de Shopify no teu modelo de correo electrónico Klaviyo

Como publicar o teu blog de Shopify no teu modelo de correo electrónico Klaviyo

Seguimos mellorando e optimizando o noso ShopifyPlus esforzos de marketing por correo electrónico do cliente de moda usando 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.

Sorprendentemente, inserindo o seu Publicacións do blog de Shopify nun correo electrónico NON é un deles, aínda que! Facendo as cousas aínda máis difíciles... a documentación para crear este correo electrónico non é completa e nin sequera documenta o seu editor máis recente. Entón, Highbridge tivemos que escavar un pouco e descubrir como facelo nós mesmos... e non foi fácil.

Aquí tes o desenvolvemento necesario para que isto suceda:

  1. Feed de blogs – O feed atom proporcionado por Shopify non ofrece ningunha personalización nin inclúe imaxes, polo que temos que crear un feed XML personalizado.
  2. Fonte de datos de Klaviyo – A fonte XML que creamos debe integrarse como fonte de datos en Klaviyo.
  3. Modelo de correo electrónico Klaviyo – A continuación, necesitamos analizar o feed nun modelo de correo electrónico onde as imaxes e o contido estean formateados correctamente.

Crea un feed de blog personalizado en Shopify

Puiden atopar un artigo con código de exemplo para crear un custom feed in Shopify para MailChimp and made quite a few edits to clean it up. Here are the steps to build a feed RSS personalizado en Shopify para o teu blog.

  1. Desprácese ata o seu Tenda Online e selecciona o tema no que queres colocar a fonte.
  2. No menú Accións, seleccione Editar código.
  3. No menú Ficheiros, vai a Modelos e fai clic Engade un novo modelo.
  4. Na xanela Engadir un novo modelo, seleccione Crea un novo modelo para blogue.

Engade un feed de blog líquido a Shopify para Klaviyo

  1. Seleccione o tipo de modelo líquido.
  2. Para o nome do ficheiro, introducimos klaviyo.
  3. No editor de código, coloque o seguinte 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. Actualiza as variables personalizadas segundo sexa necesario. Unha nota ao respecto é que establecemos o tamaño da imaxe ao ancho máximo dos nosos correos electrónicos, 600 píxeles de ancho. Aquí tes unha táboa de tamaños de imaxes de Shopify:

Nome da imaxe de Shopify dimensións
Pico 16px x 16px
icona 32px x 32px
polgar 50px x 50px
small 100px x 100px
compacto 160px x 160px
medio 240px x 240px
large 480px x 480px
gran 600px x 600px
1024 X 1024 1024px x 1024px
2048 X 2048 2048px x 2048px
mestre Imaxe máis grande dispoñible

  1. O teu feed agora está dispoñible no enderezo do teu blog coa cadea de consulta anexa para velo. No caso do noso cliente, o URL do feed é:

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

  1. O teu feed xa está listo para usar. Se queres, podes navegar ata el nunha xanela do navegador para asegurarte de que non haxa erros. Asegurarémonos de que se analice correctamente no seguinte paso:

Engade o teu blog a Klaviyo

Para utilizar o teu novo feed do blog Klaviyo, tes que engadilo como fonte de datos.

  1. desprácese ata Feeds de datos
  2. seleccionar Engadir fonte web
  3. Escriba un Nome do feed (non se permiten espazos)
  4. Escriba o URL do feed que acabas de crear.
  5. Introduza o método de solicitude como GET
  6. Introduza o tipo de contido como XML

Klaviyo Engade a fonte de blog XML de Shopify

  1. prema Actualizar a fonte de datos.
  2. prema Visualización para garantir que a fonte se enche correctamente.

Vista previa do feed do blog de Shopify en Klaviyo

Engade a túa fonte de blog ao teu modelo de correo electrónico Klaviyo

Agora queremos integrar o noso blog no noso modelo de correo electrónico Klaviyo. Na miña opinión, e a razón pola que necesitabamos un feed personalizado, gústame unha área de contido dividido onde a imaxe está á esquerda, o título e o fragmento están debaixo. Klaviyo tamén ten a opción de contraer isto nunha única columna nun dispositivo móbil.

  1. Arrastre a Bloque dividido no seu modelo de correo electrónico.
  2. Establece a túa columna esquerda como un Imaxe e a súa columna dereita a a Texto bloque.

Klaviyo Split Block para artigos de publicacións de blog de Shopify

  1. Para a imaxe, seleccione Imaxe Dinámica e establece o valor en:

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

  1. Establece o texto alternativo en:

{{item.title}}

  1. Establece o enderezo da ligazón para que, se o subscritor do correo electrónico fai clic na imaxe, o traerá ao teu artigo.

{{item.link}}

  1. Seleccione o columna da dereita para definir o contido da columna.

Título e descrición da publicación do blog de Klaviyo

  1. Engade o teu contido, asegúrate de engadir unha ligazón ao teu título e inserir o extracto da túa 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. Seleccione o Configuración dividida Tab
  2. Establecer a 40% / 60% distribución para proporcionar máis espazo para o texto.
  3. Permitir Apilar no móbil e set De dereita a esquerda.

Klaviyo Split Block para artigos de publicacións de blog de Shopify apilados no móbil

  1. Seleccione o Opcións de visualización Tab

Klaviyo Split Block para Shopify Blog Post artigos Opcións de visualización

  1. Seleccione Repetir contido e coloque a fonte que creaches en Klaviyo como fonte no ficheiro Repetir para campo:

feeds.Closet52_Blog.rss.channel.item

  1. Establece o Alias ​​do elemento as elemento.
  2. prema Vista previa e proba e agora podes ver as publicacións do teu blog. Asegúrate de probalo tanto no modo de escritorio como no móbil.

Klaviyo Split Block Vista previa e proba.

E, por suposto, se precisas axuda Shopify optimización e Klaviyo implementacións, non dubides en contactar Highbridge.

Divulgación: son socio de Highbridge e estou usando as miñas ligazóns de afiliados para Shopify Klaviyo neste artigo.