Como publicar seu feed de blog da Shopify em seu modelo de e-mail Klaviyo

Como publicar seu feed de blog da Shopify em seu modelo de e-mail Klaviyo

Continuamos a aprimorar e otimizar nossos Shopify Plus esforços de marketing por e-mail do cliente de moda usando Klaviyo. Klaviyo tem uma integração sólida com Shopify que permite uma tonelada de comunicações relacionadas ao comércio eletrônico que são pré-construídas e prontas para uso.

Surpreendentemente, inserindo seu Postagens do blog da Shopify em um e-mail NÃO é um deles, no entanto! Tornando as coisas ainda mais difíceis... a documentação para construir este e-mail não é completa e nem mesmo documenta seu editor mais recente. Então, Highbridge tivemos que fazer algumas escavações e descobrir como fazê-lo nós mesmos... e não foi fácil.

Aqui está o desenvolvimento necessário para que isso aconteça:

  1. Blog alimentação – O feed de átomos fornecido pelo Shopify não fornece nenhuma personalização nem inclui imagens, portanto, precisamos criar um feed XML personalizado.
  2. Feed de dados Klaviyo – O feed XML que construímos precisa ser integrado como um feed de dados no Klaviyo.
  3. Modelo de e-mail Klaviyo – Em seguida, precisamos analisar o feed em um modelo de e-mail onde as imagens e o conteúdo estejam formatados corretamente.

Crie um feed de blog personalizado na Shopify

Consegui encontrar um artigo com código de exemplo para construir um feed personalizado na Shopify por Mailchimp e fez algumas edições para limpá-lo. Aqui estão os passos para construir um feed RSS personalizado na Shopify para o seu blog.

  1. Navegue para o seu Loja Online e selecione o tema em que deseja colocar o feed.
  2. No menu Ações, selecione Editar Código.
  3. No menu Arquivos, navegue até Modelos e clique em Adicionar um novo modelo.
  4. Na janela Adicionar um novo modelo, selecione Criar um novo modelo por blog.

Adicionar feed de blog líquido ao Shopify para Klaviyo

  1. Selecione o tipo de modelo de líquido.
  2. Para o nome do arquivo, inserimos 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. Atualize as variáveis ​​personalizadas conforme necessário. Uma observação sobre isso é que definimos o tamanho da imagem para a largura máxima de nossos e-mails, 600px de largura. Aqui está uma tabela de tamanhos de imagem da Shopify:

Nome da imagem da Shopify Dimensões
Pico 16px x 16px
ícone 32px x 32px
polegar 50px x 50px
pequeno 100px x 100px
compacto 160px x 160px
médio 240px x 240px
grande 480px x 480px
grande 600px x 600px
1024 1024 X 1024px x 1024px
2048 2048 X 2048px x 2048px
dominar Maior imagem disponível

  1. Seu feed agora está disponível no endereço do seu blog com a querystring anexada para visualizá-lo. No caso do nosso cliente, o URL do feed é:

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

  1. Seu feed está pronto para ser usado! Se desejar, você pode navegar até ele em uma janela do navegador para garantir que não haja erros. Vamos garantir que ele seja analisado corretamente em nossa próxima etapa:

Adicione o feed do seu blog no Klaviyo

Para utilizar seu novo feed de blog em Klaviyo, você deve adicioná-lo como um feed de dados.

  1. Navegar para Feeds de dados
  2. Selecionar Adicionar feed da Web
  3. Digite um Nome do Feed (não são permitidos espaços)
  4. Introduzir o URL de alimentação que você acabou de criar.
  5. Insira o Método de solicitação como GET
  6. Digite o tipo de conteúdo como XML

Klaviyo Adicionar feed de blog XML da Shopify

  1. Clique Atualizar feed de dados.
  2. Clique visualização para garantir que o feed esteja sendo preenchido corretamente.

Visualizar o feed do blog da Shopify em Klaviyo

Adicione o feed do seu blog ao seu modelo de e-mail Klaviyo

Agora queremos construir nosso blog em nosso modelo de e-mail em Klaviyo. Na minha opinião, e a razão pela qual precisávamos de um feed personalizado, gosto de uma área de conteúdo dividida onde a imagem está à esquerda, o título e o trecho estão abaixo. Klaviyo também tem a opção de recolhê-lo em uma única coluna em um dispositivo móvel.

  1. Arraste um Bloco Dividido em seu modelo de e-mail.
  2. Defina sua coluna esquerda para um Imagem e sua coluna direita para um Texto bloquear.

Bloco dividido Klaviyo para artigos de postagem do blog da Shopify

  1. Para a imagem, selecione Imagem Dinâmica e defina o valor para:

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

  1. Defina o texto alternativo para:

{{item.title}}

  1. Defina o endereço do link para que, se o assinante do e-mail clicar na imagem, ele os leve ao seu artigo.

{{item.link}}

  1. Selecione os coluna direita para definir o conteúdo da coluna.

Título e descrição da postagem do blog Klaviyo

  1. Adicione o seu conteúdo, certifique-se de adicionar um link ao seu título e inserir o trecho da postagem.

<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. Selecione os Configurações de divisão aba.
  2. Definir para um 40% / 60% disposição para fornecer mais espaço para texto.
  3. permitir Empilhar no celular E definir Direita para esquerda.

Klaviyo Split Block for Shopify Blog Post Articles empilhados no celular

  1. Selecione os Opções de exibição aba.

Bloco de divisão Klaviyo para opções de exibição de artigos de postagem de blog da Shopify

  1. Selecione Content Repeat e coloque o feed que você criou no Klaviyo como a fonte no Repetir para campo:

feeds.Closet52_Blog.rss.channel.item

  1. Colocou o Alias ​​do item as item.
  2. Clique Visualizar e testar e agora você pode ver suas postagens no blog. Certifique-se de testá-lo no modo desktop e móvel.

Klaviyo Split Block Pré-visualização e teste.

E, claro, se você precisar de ajuda em Shopify otimização e Klaviyo implementações, não hesite em entrar em contato com Highbridge.

Divulgação: sou sócio em Highbridge e estou usando meus links de afiliado para Shopify e Klaviyo neste artigo.