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

Nous continuons d'améliorer et d'optimiser notreShopifyPlusles efforts de marketing par e-mail d'un client de mode utilisantclaviyo . 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 votreArticles 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,Highbridgeavons 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 de 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 unflux personnalisé dans Shopify pour Mailchimp , et a apporté quelques modifications pour le nettoyer. Voici les étapes pour construire unflux RSS personnalisédans Shopify pour votre blog.

1. Accédez à votreBoutique en ligneet sélectionnez le thème dans lequel vous souhaitez placer le flux.
2. Dans le menu Actions, sélectionnezModifier le code.
3. Dans le menu Fichiers, accédez à Modèles et cliquez surAjouter un nouveau modèle.
4. Dans la fenêtre Ajouter un nouveau modèle, sélectionnezCréer un nouveau modèlepourBlog.

5. Sélectionnez le type de modèle deliquide.
6. Pour le nom du fichier, nous avons entréklaviyo.
7. 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 -%}

  
    
    {{ URL_canonique }}
     {{ page_description |  strip_newlines }}
     {{ blog.articles.first.created_at |  date : "%FT%TZ" }}{%- pour l'article dans blog.articles limit:articleLimit %}
      
      {{ boutique.url }}{{ article.url }}
       {{ article.created_at |  date : "%FT%TZ" }}
       {{ article.auteur |  par défaut : nom.boutique }}{%- si showTags et article.tags != vide -%} {{ article.tags |  rejoindre:',' }}{%- endif -%} {%- if article.excerpt != blank %} {{ article.extrait |  strip_html |  déshabiller }}{%- autre %} {{ article.contenu |  strip_html |  truncatewords : truncateAmount |  déshabiller }}{%- endif -%} {%- if article.image %}{%- fin si -%}{%- endfor -%}

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

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

10. 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 dansclaviyovous devez l'ajouter en tant que flux de données.

1. Aller versFlux de données
2. SélectionnerAjouter un flux Web
3. Entrez unNom du flux(aucun espace n'est autorisé)
4. Entrer leURL du fluxque vous venez de créer.
5. Entrez la méthode de demande commeAVOIR
6. Entrez le type de contenu commeXML

7. Cliquez surMettre à jour le flux de données.
8. Cliquez surAperçupour s'assurer que le flux se remplit correctement.

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 dansclaviyo . À 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 unBloc divisédans votre modèle d'e-mail.
2. Définissez votre colonne de gauche sur unImageet votre colonne de droite à unTextebloc.

3. Pour l'image, sélectionnezImage dynamiqueet définissez la valeur sur :

{{ élément|recherche :'media:content'|recherche :'@url' }}

4. Définissez le texte alternatif sur :

{{item.title}}

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

6. Sélectionnez lecolonne de droitepour définir le contenu de la colonne.

7. Ajoutez votreteneurassurez-vous d'ajouter un lien vers votre titre et d'insérer votre extrait de message.

{{item.title}}
{{item.description}}

8. Sélectionnez leParamètres de fractionnementlanguette.
9. Réglez sur un40% / 60% mise en pagepour donner plus de place au texte.
10. PermettrePile sur mobileEt mettreDe droite à gauche.

11. Sélectionnez leOption d'affichagelanguette.

12. Sélectionnez Content Repeat et placez le flux que vous avez créé dans Klaviyo comme source dans leRépéter pourdomaine:

feeds.Closet52_Blog.rss.channel.item

13. Met leAlias ​​de l'articlecommeObjet.
14. Cliquez surAperçu et test et vous pouvez maintenant voir les articles de votre blog. Assurez-vous de le tester en mode bureau et mobile.

Et, bien sûr, si vous avez besoin d'aide pourShopifyoptimisation etclaviyoimplémentations, n'hésitez pas à contacterHighbridge.

Divulgation : je suis partenaire deHighbridgeet j'utilise mes liens d'affiliation pourShopifyetclaviyodans cet article.