Deine E-Mails zu Klaviyo hochladen

Emailify hat eine integrierte Anbindung an Klaviyo, mit der du HTML-E-Mails direkt aus dem Figma-Plugin in deine Klaviyo-Vorlagen hochlädst.

Video-Tutorial: Deine E-Mails zu Klaviyo hochladen

Dieses Video zeigt, wie du HTML-E-Mails aus dem Figma-Plugin Emailify zu Klaviyo hochlädst.

Wenn du in deinen Textabsätzen Links mit Klaviyo-Vorlagensyntax brauchst (zum Beispiel {{ event.url }}), blockiert das native Linkfeld von Figma sie als ungültige URLs. Um das zu umgehen, kannst du stattdessen das spezielle Klaviyo-Linkformat von Emailify verwenden, https://klaviyo.invalid/?{{ event.url }}. Emailify gibt dann im exportierten HTML die unveränderte Klaviyo-Vorlagensyntax aus.

Wähle im Export-Panel von Emailify die Option Klaviyo aus der Dropdown-Liste und füge dann einen gültigen privaten Klaviyo-API-Schlüssel ein (siehe die Schritte unten):

  1. Melde dich bei Klaviyo an und öffne die Einstellungsseite für Klaviyo-API-Schlüssel.
  2. Klick auf den Button Create Private API Key.
  3. Gib dem Schlüssel einen Namen (zum Beispiel „Emailify API Key“) und klick auf das Optionsfeld Custom Key.
  4. Setz das Optionsfeld für den API-Scope Templates auf Read/Write Access (alle anderen API-Scopes können auf No Access bleiben).
  5. Klick auf dem Bestätigungsbildschirm nach dem Anlegen des Schlüssels im Bereich Your Private Key auf den Icon-Button Copy.
  6. Füge den kopierten API-Schlüssel (er sieht ungefähr so aus: pk_b3338b071136f98817d2a0e0a9581137ee) in das Emailify-Plugin ein.

Wenn du so weit bist, klick auf den Button Upload To Klaviyo, um die in Figma ausgewählten E-Mails als HTML zu exportieren und automatisch auf deine Seite mit Klaviyo-Vorlagen hochzuladen.

Wenn deine HTML-E-Mail kleiner als 102kb ist, nach dem Versand über Klaviyo in Gmail aber trotzdem gekürzt wird, liegt das am aktivierten Link-Tracking in Klaviyo. Es ersetzt deine ursprünglichen Link-URLs automatisch durch viel längere „Tracking-URLs“ und vergrößert so das versendete HTML. Um das zu verhindern, kannst du optional die Einstellung für Link-Tracking/GA in deinem Klaviyo-Konto ausschalten.

Aus Emailify hochgeladene Klaviyo-Vorlagen aktualisieren ​

Wenn Emailify automatisch dieselbe Klaviyo-Vorlage aktualisieren soll, statt jedes Mal eine neue anzulegen, kannst du optional den Schalter Enable Updatable Templates in den Exporteinstellungen des Plugins aktivieren, wenn die Option Klaviyo ausgewählt ist.

Dann hängt Emailify nach dem ersten erfolgreichen Upload automatisch einen Wert klaviyoTemplateId an den Namen des Figma-Frames an und verwendet diese gespeicherte Vorlagen-ID wieder, wenn derselbe Frame das nächste Mal zu Klaviyo hochgeladen wird.

Achte darauf, dass der Schalter Enable Updatable Templates aktiviert ist, bevor du die Vorlage zum ersten Mal hochlädst. Erst dieser erste Upload speichert die ursprüngliche Klaviyo-Vorlagen-ID im Namen deines Figma-Frames für spätere Uploads.

Damit wird nur die gespeicherte Vorlage in deiner Klaviyo-Vorlagenbibliothek aktualisiert. Wurde diese Vorlage bereits in einer Klaviyo-Kampagne oder einem Flow verwendet, legt Klaviyo für diese Nachricht eine Kopie an. Ein erneuter Upload aus Emailify ersetzt diese verwendeten Kopien also nicht automatisch.

Hochgeladene Klaviyo-E-Mail-Vorlage in einer Kampagne verwenden ​

  1. Leg in Klaviyo eine neue E-Mail-Kampagne an
  2. Klick in der Liste auf der Seite Templates im Tab Email:saved auf den Namen deiner neuen Vorlage.
  3. Klick im Vorschau-Popup auf den Button Use template.
  4. Klick auf der Seite des Code-Editors auf den Button Save (dieser Schritt ist wichtig)
  5. Klick nach der Meldung „Your changes have been saved.“ auf den Button Back to Content.
  6. Plane deine E-Mail-Kampagne nach Bedarf.

A/B-Tests mit eigenen HTML-Vorlagen in Klaviyo ​

Klaviyo unterstützt A/B-Tests mit eigenen HTML-E-Mails, beim Anlegen des Tests wird Variation B aber automatisch als identische Kopie von Variation A erstellt. So testest du zwei verschiedene Emailify-Designs:

  1. Gib den beiden Emailify-Frames in Figma eindeutige Namen, zum Beispiel Summer Sale - Test A und Summer Sale - Test B. Emailify verwendet diese Frame-Namen als Namen der gespeicherten Vorlagen in Klaviyo.
  2. Lade beide Frames als separate gespeicherte Vorlagen zu Klaviyo hoch.
  3. Erstelle deine Klaviyo-Kampagne mit der Vorlage Test A und klick dann über der Betreffzeile auf Create A/B test. Klaviyo legt Variation B als Kopie von Variation A an.
  4. Öffne in einem anderen Browser-Tab die gespeicherte Vorlage Test B unter Content > Templates, öffne ihren Code-Editor und kopiere das gesamte HTML.
  5. Kehr zur Kampagne zurück, öffne Variation B, klick auf Edit, ersetze das kopierte HTML von Test A durch das HTML von Test B und speichere deine Änderungen.
  6. Gib beiden Variationen aussagekräftige Namen, sieh dir dann jede Version in der Vorschau an oder schick eine Testmail und prüfe die Nur-Text-Version, bevor du die Kampagne planst.

Wenn du das Design oder den Inhalt der E-Mail testest, lass Betreffzeile und Absenderangaben gleich, damit sich nur eine Variable ändert.

Mehr zum Einrichten des Tests und zur Auswahl einer Gewinnermetrik findest du im A/B-Testing-Leitfaden von Klaviyo.

Bearbeitbare Texte/Bilder in Klaviyo (optional) ​

WICHTIG: Der neue Editor von Klaviyo fügt bearbeitbaren Textblöcken und Buttons automatisch Padding hinzu. Leider musst du jeden dieser Werte manuell wieder auf „0“ setzen, damit die E-Mail wie dein ursprüngliches Design aus Figma aussieht. Folge dazu dem Video im Abschnitt Automatische Padding-Überschreibungen von Klaviyo in bearbeitbaren Kampagnen beheben weiter unten.

Wenn Inhaltsblöcke nach dem Upload der Vorlage zu Klaviyo bearbeitbar sein sollen, aktiviere in den Exportoptionen von Emailify den Schalter Editable Content und folge dann diesen Schritten in Klaviyo:

  1. Leg in Klaviyo eine neue E-Mail-Kampagne an
  2. Klick im Kampagnenschritt Content auf die Option Drag and Drop
  3. Klick auf den Tab My Templates und dann auf deine neue Vorlage
  4. Klick auf den Button Save und dann auf Back to Content
  5. Klick auf den Button Edit Email

Automatische Padding-Überschreibungen von Klaviyo in bearbeitbaren Kampagnen beheben ​

Klaviyo hat seinen Editor aktualisiert und erzwingt ihn seit dem 6. Juni 2023 für alle Vorlagen. Wenn du HTML-E-Mails mit aktiviertem Schalter Editable Content aus Emailify exportierst, fügt Klaviyo deshalb leider standardmäßig automatisch rund ~18px zusätzliches Padding um jedes Textelement hinzu. Bei einer bearbeitbaren Vorlage geschieht das über ein Inline-Attribut style an einem neuen <td>-Element, das Klaviyo in das HTML einfügt.

Wenn du in Emailify den Schalter Force the padding added by Klaviyo's new editor to be 0px aktivierst, wird automatisch zusätzliches CSS eingefügt, das dieses Padding in allen mobilen Clients und in Desktop-Clients außer Outlook (etwa Gmail) entfernt. Outlook stellt das Padding aber weiterhin dar, solange du nicht beim Bearbeiten der E-Mail für deine Kampagne im Klaviyo-Editor jeden „Padding“-Wert aller bearbeitbaren Textblöcke deiner Vorlage manuell auf „0“ setzt.

Einen dynamischen Produkt-Feed zu deinen Klaviyo-E-Mails hinzufügen ​

Video-Tutorial: Einen dynamischen Produkt-Feed zu deinen Klaviyo-E-Mails hinzufügen

Dieses Video zeigt, wie du mit dem Figma-Plugin Emailify eigene Klaviyo-Produkt-Feeds in eigene HTML-Vorlagen einfügst.

Um deiner HTML-E-Mail-Vorlage in Emailify einen dynamischen Klaviyo-Produkt-Feed hinzuzufügen, kannst du eine der Komponentenvorlagen im Tab Ecomm unter den Kategorie-Tabs des Emailify-Plugins verwenden.

Nachdem du die Komponente zu deinem Emailify-Frame hinzugefügt hast, ersetzt du in der eingefügten Komponente den Namen YOUR_KLAVIYO_PRODUCT_FEED_NAME_HERE durch den Namen deines eigenen Produkt-Feeds, den du in deinem Klaviyo-Konto angelegt hast.

Um eigene HTML-Produkt-Feeds in Klaviyo zu verwenden, musst du außerdem den Schalter Editable Content in den Exportoptionen von Emailify aktivieren. Damit kannst du nach dem Upload zu deinen Klaviyo-Vorlagen einen standardmäßigen „Product“-Block aus der Seitenleiste „Blocks“ des Klaviyo-Editors per Drag-and-drop in deine E-Mail ziehen.

Es lohnt sich, dem Video-Tutorial oben zu folgen und Schritt für Schritt zu sehen, wie das geht, damit deine Klaviyo-Vorlage richtig eingerichtet ist. Sonst werden die Daten aus deinem Produkt-Feed möglicherweise nicht angezeigt, wenn du die Schritte nicht korrekt befolgt hast.

Wenn du dabei Hilfe brauchst, wende dich bitte an einen Entwickler in deinem Team oder an deinen Ansprechpartner beim Klaviyo-Support. Wir (Emailify) können keine technische Expertise bieten und nicht bei individuellen Umsetzungen dieser fortgeschrittenen Vorlagenfunktion in Klaviyo helfen.

Bearbeitbaren Bereich für den Klaviyo-Produkt-Feed per Drag-and-drop manuell hinzufügen ​

Seit 2025 musst du diesen bearbeitbaren Bereich offenbar außerdem zuerst manuell über den eigenen HTML-Code-Editor von Klaviyo in deine HTML-Vorlage einfügen und die Vorlage erneut speichern, bevor du sie in einer Kampagne verwendest, damit der dynamische Produkt-Feed Daten lädt:

<table>
  <tr>
    <td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
      <div class="klaviyo-block klaviyo-text-block">
        Drag and Drop your Klaviyo Product Feed Block Here <br/>
        NOTE: Remove this text element in Klaviyo's editor when you're done! <br/>
        Video Tutorial: <a href="https://www.youtube.com/watch?v=PaRSIxVLYlo" target="_blank">https://www.youtube.com/watch?v=PaRSIxVLYlo</a>
      </div>
    </td>
  </tr>
</table>

Du kannst ihn im Vorlageneditor von Klaviyo in die Zeile über <div dir="auto" lang="en"... in deiner HTML-Vorlage einfügen. So landet er ganz oben in deiner Vorlage.

Einen Produkt-Feed für abgebrochene Warenkörbe zu deinen Klaviyo-E-Mails hinzufügen ​

Video-Tutorial: Klaviyo-E-Mail-Vorlage für einen Flow zu abgebrochenen Warenkörben in Figma erstellen

Dieses Video zeigt, wie du mit dem Figma-Plugin Emailify eigene Klaviyo-Flows für abgebrochene Warenkörbe in eigene HTML-Vorlagen einfügst.

Um deiner HTML-E-Mail-Vorlage in Emailify einen dynamischen Klaviyo-Block für einen Flow zu abgebrochenen Warenkörben hinzuzufügen, kannst du eine der Komponentenvorlagen im Tab Ecomm unter den Kategorie-Tabs des Emailify-Plugins verwenden. Es gibt sie in diesen Varianten:

  • Shopify
  • WooCommerce
  • Magento 1
  • Magento 2
  • BigCommerce

Damit werden automatisch die Ebenen mit den Klaviyo-Variablen für Produkt-Event-Daten für jede Plattform angelegt. Damit das funktioniert, musst du aber trotzdem noch deinen Klaviyo-Flow für abgebrochene Warenkörbe einrichten.

Wenn du dabei Hilfe brauchst, wende dich bitte an einen Entwickler in deinem Team oder an deinen Ansprechpartner beim Klaviyo-Support. Wir (Emailify) können keine technische Expertise bieten und nicht bei individuellen Umsetzungen dieser fortgeschrittenen Vorlagenfunktion in Klaviyo helfen.