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.

5. Seleccione o tipo de modelo líquido.
6. Para o nome do ficheiro, introducimos klaviyo.
7. 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>

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

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

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

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

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.

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

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

4. Establece o texto alternativo en:

{{item.title}}

5. 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}}

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

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

8. Seleccione o Configuración dividida Tab
9. Establecer a 40% / 60% distribución para proporcionar máis espazo para o texto.
10. Permitir Apilar no móbil e set De dereita a esquerda.

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

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

feeds.Closet52_Blog.rss.channel.item

13. Establece o Alias ​​do elemento as elemento.
14. 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.

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.