Comment publier votre flux de blog Shopify dans votre modèle d'e-mail Klaviyo

Comment publier votre flux de blog Shopify dans votre modèle d'e-mail Klaviyo

Nous continuons d'améliorer et d'optimiser notre Shopify Plus les efforts de marketing par e-mail d'un client de mode utilisant Klaviyo. Klaviyo a une solide intégration avec Shopify qui permet une tonne de communications liées au commerce électronique qui sont pré-construites et prêtes à l'emploi.

Étonnamment, l'insertion de votre Articles de blog Shopify dans un e-mail n'en fait PAS partie ! Pour rendre les choses encore plus difficiles… la documentation pour la création de cet e-mail n'est pas complète et ne documente même pas leur nouvel éditeur. Alors, Highbridge avons dû creuser et trouver comment le faire nous-mêmes… et ce n'était pas facile.

Voici le développement nécessaire pour que cela se produise :

  1. Flux RSS du blog - Le flux atom fourni par Shopify ne fournit aucune personnalisation et n'inclut pas d'images, nous devons donc créer un flux XML personnalisé.
  2. Flux de données Klaviyo – Le flux XML que nous avons construit doit être intégré en tant que flux de données dans Klaviyo.
  3. Modèle d'e-mail Klaviyo – Nous devons ensuite analyser le flux dans un modèle d'e-mail où les images et le contenu sont correctement formatés.

Créer un flux de blog personnalisé dans Shopify

J'ai pu trouver un article avec un exemple de code pour créer un flux personnalisé dans Shopify pour la qualité Mailchimp et fait pas mal de modifications pour le nettoyer. Voici les étapes pour construire un flux RSS personnalisé dans Shopify pour votre blog.

  1. Naviguez vers votre Boutique en ligne et sélectionnez le thème dans lequel vous souhaitez placer le flux.
  2. Dans le menu Actions, sélectionnez Modifier le code.
  3. Dans le menu Fichiers, accédez à Modèles et cliquez sur Ajouter un nouveau modèle.
  4. Dans la fenêtre Ajouter un nouveau modèle, sélectionnez Créer un nouveau modèle pour la qualité blog.

Ajouter un flux de blog liquide à Shopify pour Klaviyo

  1. Sélectionnez le type de modèle de un liquide.
  2. Pour le nom du fichier, nous avons entré klaviyo.
  3. Dans l'éditeur de code, placez le code suivant :

{%- 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. Mettez à jour les variables personnalisées si nécessaire. Une note à ce sujet est que nous avons défini la taille de l'image sur la largeur maximale de nos e-mails, 600 pixels de large. Voici un tableau des tailles d'image de Shopify :

Nom de l'image Shopify Dimensions
pico 16px x 16px
icône (sur le bord gauche de l'écran) 32px x 32px
pouce 50px x 50px
petit 100px x 100px
compact 160px x 160px
moyen 240px x 240px
gros 480px x 480px
grand 600px x 600px
X 1024 1024 1024px x 1024px
X 2048 2048 2048px x 2048px
maître La plus grande image disponible

  1. Votre flux est maintenant disponible à l'adresse de votre blog avec la chaîne de requête ajoutée pour l'afficher. Dans le cas de notre client, l'URL du flux est :

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

  1. Votre flux est maintenant prêt à être utilisé ! Si vous le souhaitez, vous pouvez y accéder dans une fenêtre de navigateur pour vous assurer qu'il n'y a pas d'erreurs. Nous allons nous assurer qu'il analyse correctement dans notre prochaine étape :

Ajoutez votre flux de blog dans Klaviyo

Afin d'utiliser votre nouveau flux de blog dans Klaviyo, vous devez l'ajouter en tant que flux de données.

  1. Accédez à Flux de données
  2. Choisir Ajouter un flux Web
  3. Entrez Nom du flux (aucun espace n'est autorisé)
  4. Entrer le URL du flux que vous venez de créer.
  5. Entrez la méthode de demande comme ÉCONOMISEZ
  6. Entrez le type de contenu comme XML

Klaviyo Ajouter un flux de blog XML Shopify

  1. CLIQUEZ Mettre à jour le flux de données.
  2. CLIQUEZ Aperçu pour s'assurer que le flux se remplit correctement.

Aperçu du flux de blog Shopify dans Klaviyo

Ajoutez votre flux de blog à votre modèle d'e-mail Klaviyo

Maintenant, nous voulons intégrer notre blog dans notre modèle d'e-mail dans Klaviyo. À mon avis, et la raison pour laquelle nous avions besoin d'un flux personnalisé, j'aime une zone de contenu divisée où l'image est à gauche, le titre et l'extrait sont en dessous. Klaviyo a également la possibilité de le réduire en une seule colonne sur un appareil mobile.

  1. Faites glisser un Bloc divisé dans votre modèle d'e-mail.
  2. Définissez votre colonne de gauche sur un Image(s) et votre colonne de droite à un Texte bloque.

Klaviyo Split Block pour les articles du blog Shopify

  1. Pour l'image, sélectionnez Image dynamique et définissez la valeur sur :

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

  1. Définissez le texte alternatif sur :

{{item.title}}

  1. Définissez l'adresse du lien de sorte que si l'abonné au courrier électronique clique sur l'image, il l'amènera à votre article.

{{item.link}}

  1. Sélectionnez le colonne de droite pour définir le contenu de la colonne.

Titre et description de l'article du blog Klaviyo

  1. Ajoutez votre contenu, assurez-vous d'ajouter un lien vers votre titre et d'insérer votre extrait de message.

<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. Sélectionnez le Paramètres de fractionnement languette.
  2. Réglez sur un 40% / 60% mise en page pour donner plus de place au texte.
  3. Activer Pile sur mobile Et définir De droite à gauche.

Klaviyo Split Block pour Shopify Blog Post Articles empilés sur Mobile

  1. Sélectionnez le Options d'affichage languette.

Klaviyo Split Block pour les articles de blog Shopify Options d'affichage

  1. Sélectionnez Content Repeat et placez le flux que vous avez créé dans Klaviyo comme source dans le Répéter pour champ:

feeds.Closet52_Blog.rss.channel.item

  1. Met le Alias ​​de l'article as questions d'examen.
  2. CLIQUEZ Aperçu et test et vous pouvez maintenant voir les articles de votre blog. Assurez-vous de le tester en mode bureau et mobile.

Klaviyo Split Block Aperçu et test.

Et, bien sûr, si vous avez besoin d'aide pour Shopify optimisation et Klaviyo implémentations, n'hésitez pas à contacter Highbridge.

Divulgation: je suis partenaire dans Highbridge et j'utilise mes liens d'affiliation pour Shopify et Klaviyo dans cet article.