So veröffentlichen Sie Ihren Shopify-Blog-Feed in Ihrer Klaviyo-E-Mail-Vorlage

So veröffentlichen Sie Ihren Shopify-Blog-Feed in Ihrer Klaviyo-E-Mail-Vorlage

Wir entwickeln und optimieren unsere weiter Shopify Plus E-Mail-Marketing-Bemühungen des Modekunden mit Klaviyo. Klaviyo verfügt über eine solide Integration mit Shopify, die eine Menge E-Commerce-bezogener Kommunikation ermöglicht, die vorgefertigt und sofort einsatzbereit ist.

Überraschenderweise fügt Ihr ein Shopify-Blogbeiträge in eine E-Mail gehört jedoch NICHT dazu! Was die Sache noch schwieriger macht … die Dokumentation zum Erstellen dieser E-Mail ist nicht gründlich und dokumentiert nicht einmal ihren neuesten Editor. Damit, Highbridge mussten etwas graben und herausfinden, wie man es selbst macht ... und es war nicht einfach.

Hier ist die notwendige Entwicklung, um dies zu erreichen:

  1. Blog Feed – Der von Shopify bereitgestellte Atom-Feed bietet weder Anpassungen noch enthält er Bilder, daher müssen wir einen benutzerdefinierten XML-Feed erstellen.
  2. Klaviyo-Daten-Feed – Der von uns erstellte XML-Feed muss als Datenfeed in Klaviyo integriert werden.
  3. Klaviyo-E-Mail-Vorlage – Wir müssen den Feed dann in eine E-Mail-Vorlage parsen, in der die Bilder und Inhalte richtig formatiert sind.

Erstellen Sie einen benutzerdefinierten Blog-Feed in Shopify

Ich konnte einen Artikel mit Beispielcode zum Erstellen von a finden benutzerdefinierter Feed in Shopify für Mailchimp und einige Änderungen vorgenommen, um es zu bereinigen. Hier sind die Schritte zum Erstellen eines benutzerdefinierter RSS-Feed in Shopify für Ihren Blog.

  1. Navigieren Sie zu Ihrem Online-Shop und wählen Sie das Thema aus, in dem Sie den Feed platzieren möchten.
  2. Wählen Sie im Menü Aktionen aus Code bearbeiten.
  3. Navigieren Sie im Menü Dateien zu Vorlagen und klicken Sie auf Fügen Sie eine neue Vorlage hinzu.
  4. Wählen Sie im Fenster Neue Vorlage hinzufügen aus Erstellen Sie eine neue Vorlage für Blog.

Füge einen flüssigen Blog-Feed zu Shopify für Klaviyo hinzu

  1. Wählen Sie den Vorlagentyp von aus flüssige.
  2. Für den Dateinamen haben wir eingegeben klaviyo.
  3. Fügen Sie im Code-Editor den folgenden Code ein:

{%- 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. Aktualisieren Sie die benutzerdefinierten Variablen nach Bedarf. Eine Anmerkung dazu ist, dass wir die Bildgröße auf die maximale Breite unserer E-Mails eingestellt haben, 600 Pixel breit. Hier ist eine Tabelle mit den Bildgrößen von Shopify:

Shopify-Bildname Dimensionen-Maße
pico 16px x 16px
am linken Bildschirmrand. 32px x 32px
Daumen 50px x 50px
klein 100px x 100px
kompakt 160px x 160px
mittlere 240px x 240px
grosse 480px x 480px
groß 600px x 600px
1024 x 1024cm 1024px x 1024px
2048 x 2048cm 2048px x 2048px
Master Größtes verfügbares Bild

  1. Ihr Feed ist jetzt unter der Adresse Ihres Blogs verfügbar, wobei die Abfragezeichenfolge angehängt ist, um ihn anzuzeigen. Im Fall unseres Kunden lautet die Feed-URL:

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

  1. Ihr Feed ist jetzt einsatzbereit! Wenn Sie möchten, können Sie in einem Browserfenster dorthin navigieren, um sicherzustellen, dass keine Fehler vorliegen. Wir werden sicherstellen, dass es in unserem nächsten Schritt richtig analysiert wird:

Fügen Sie Ihren Blog-Feed in Klaviyo hinzu

Um Ihren neuen Blog-Feed zu nutzen Klaviyo, müssen Sie es als Datenfeed hinzufügen.

  1. Navigieren Sie zu Daten-Feeds
  2. Klicken Sie (sodass dort ein Haken erscheint) auf das Rechteck Webfeed hinzufügen
  3. Geben Sie ein Feedname (keine Leerzeichen erlaubt)
  4. Geben Sie die Feed-URL die du gerade erstellt hast.
  5. Geben Sie die Anforderungsmethode als ein GET
  6. Geben Sie den Inhaltstyp als ein XML

Klaviyo Shopify XML-Blog-Feed hinzufügen

  1. Klicken Sie Datenfeed aktualisieren.
  2. Klicken Sie Vorschau um sicherzustellen, dass der Feed korrekt ausgefüllt wird.

Vorschau des Shopify-Blog-Feeds in Klaviyo

Fügen Sie Ihren Blog-Feed zu Ihrer Klaviyo-E-Mail-Vorlage hinzu

Jetzt wollen wir unseren Blog in unsere E-Mail-Vorlage einbauen Klaviyo. Meiner Meinung nach und der Grund, warum wir einen benutzerdefinierten Feed brauchten, mag ich einen geteilten Inhaltsbereich, in dem sich das Bild links und der Titel und der Auszug darunter befinden. Klaviyo hat auch die Möglichkeit, dies auf einem mobilen Gerät in einer einzigen Spalte zusammenzufassen.

  1. Ziehen Sie eine Split-Block in Ihre E-Mail-Vorlage.
  2. Setzen Sie Ihre linke Spalte auf ein Bild und Ihre rechte Spalte zu a Text blockieren.

Klaviyo Split Block für Shopify-Blogpost-Artikel

  1. Wählen Sie für das Bild aus Dynamisches Bild und setze den Wert auf:

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

  1. Legen Sie den Alt-Text fest auf:

{{item.title}}

  1. Stellen Sie die Link-Adresse so ein, dass der E-Mail-Abonnent, wenn er auf das Bild klickt, zu Ihrem Artikel gelangt.

{{item.link}}

  1. Wähle aus rechte Spalte um den Spalteninhalt festzulegen.

Titel und Beschreibung des Klaviyo-Blogbeitrags

  1. Fügen Sie Ihre Inhalt, stellen Sie sicher, dass Sie einen Link zu Ihrem Titel hinzufügen und Ihren Beitragsauszug einfügen.

<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. Wähle aus Split-Einstellungen Tab.
  2. Auf a setzen 40 % / 60 % Layout um mehr Platz für Text zu schaffen.
  3. Ermöglichen Auf dem Handy stapeln und einstellen Rechts nach links.

Klaviyo Split Block für Shopify-Blogpost-Artikel, die auf Mobilgeräten gestapelt sind

  1. Wähle aus Anzeige-Eigenschaften Tab.

Klaviyo Split Block für Anzeigeoptionen für Artikel in Shopify-Blogposts

  1. Wählen Sie Inhaltswiederholung und legen Sie den Feed, den Sie in Klaviyo erstellt haben, als Quelle in der Wiederholen Sie für Feld:

feeds.Closet52_Blog.rss.channel.item

  1. Setze die Artikel-Alias as Artikel.
  2. Klicken Sie Vorschau und Test und Sie können jetzt Ihre Blogbeiträge sehen. Testen Sie es unbedingt sowohl im Desktop- als auch im Mobilmodus.

Klaviyo Split Block Vorschau und Test.

Und natürlich, wenn Sie Hilfe benötigen Shopify Optimierung u Klaviyo Implementierungen, zögern Sie nicht, sich an uns zu wenden Highbridge.

Offenlegung: Ich bin Partner in Highbridge und ich verwende meine Affiliate-Links für Shopify und Klaviyo In diesem Artikel.