So installierst du „Wieder auf Lager“ für Shopify

Übersicht 

In diesem Artikel erfährst du, wie du die Funktion „Wieder auf Lager“ von Klaviyo für Shopify installierst, damit sich deine Kund*innen benachrichtigen lassen können, wenn Artikel wieder erhältlich sind. Um die Funktion „Wieder auf Lager“ einzurichten, musst du einen Flow in Klaviyo erstellen und ein anpassbares Code-Fragment zu deinem Shopify-Shop hinzufügen. 

Bevor du anfängst

Bitte beachte, dass Klaviyo keinen Support für benutzerdefinierten Code bietet. Wenn du Hilfe beim Programmieren benötigst, kannst du dich an einen Klaviyo-Partner wenden. 

Über die Funktion „Wieder auf Lager“ von Klaviyo

Die Funktion „Wieder auf Lager“ von Klaviyo für Shopify besteht aus zwei Hauptkomponenten:

1. Wieder-auf-Lager-Flow
   Wenn eine Person eine Wieder-auf-Lager-Benachrichtigung abonniert, wird in ihrem Klaviyo-Profil das Ereignis Wieder-auf-Lager abonniert getrackt. Durch dieses Ereignis wird dein Wieder-auf-Lager-Flow ausgelöst. Käufer*innen werden in den Flow aufgenommen, wenn sie ein Produkt abonnieren. Sie werden benachrichtigt, wenn der Artikel, für den sie sich interessieren, wieder vorrätig ist.
2. Website-Schaltfläche
   Du musst deinem Shopify-Theme ein Code-Fragment hinzufügen, das automatisch eine Schaltfläche mit dem Text „Benachrichtige mich“ anzeigt, falls ein Artikel nicht mehr vorrätig ist. Sobald du das Fragment installiert hast, passiert Folgendes:
   • Wenn ein Kunde nach einem Produkt sucht und dieses nicht mehr vorrätig ist, erscheint eine Schaltfläche „Benachrichtige mich“ direkt neben oder unter der Schaltfläche „Ausverkauft“.
   • Wenn Käufer*innen auf die Schaltfläche „Benachrichtige mich“ klicken, wird ein Formular angezeigt. Hier können sie ihre E-Mail-Adresse eingeben, um bei Wiederverfügbarkeit des Artikels benachrichtigt zu werden.
   • Nach dem Absenden des Formulars wird das Ereignis Wieder-auf-Lager abonniert in Klaviyo im Profil der betreffenden Person getrackt.

Klaviyo überwacht deinen Bestand auf Variantenebene, d. h. Käufer*innen können Benachrichtigungen auch zu bestimmten Produktvarianten abonnieren. Wenn Kund*innen z. B. feststellen, dass ihr gewünschtes rosa T-Shirt nicht mehr in Größe M vorrätig ist, können sie diese spezielle Variante abonnieren. Klaviyo sorgt dann dafür, dass sie erst dann benachrichtigt werden, wenn du diese Größe und Farbe wieder auf Lager hast.

Vor der Installation des Code-Fragments

Bevor du das Fragment wie unten beschrieben installierst, musst du Folgendes erledigen:

• Vergewissere dich, dass du – entweder über die Klaviyo-App-Einbettung oder manuell – das Onsite-Tracking von Klaviyo in deinem Shopify-Shop aktiviert hast (einschließlich Produkt aufgerufen). 
• Achte darauf, dass es auf deiner Produktseite entweder eine Schaltfläche „Zum Warenkorb hinzufügen“ oder ein Kontaktformular gibt. Bei manchen Shopify-Themes kann die Schaltfläche „Zum Warenkorb hinzufügen“ entfernt werden, wenn kein Bestand vorhanden ist. Vergewissere dich, dass dein Shopify-Theme in diesem Fall die Schaltfläche „Ausverkauft“ anzeigt, damit der Klaviyo-Code ganz sicher funktioniert.

Video: „Wieder auf Lager“ für Shopify

Installation des Code-Fragments

Füge das folgende Code-Fragment in deine theme.liquid-Datei ein. Diese Anleitung gilt sowohl für Benutzer*innen von Shopify 2.0 als auch für Benutzer*innen von Vintage-Themes. 

1. Klicke im Shopify-Adminbereich auf Onlineshop > Themes.
2. Klicke auf das Aktionsmenü für dein Theme und wähle Code bearbeiten.
3. Suche nach der Datei theme.liquid und klicke sie an, um sie im Editor zu öffnen.
4. Kopiere das folgende JavaScript-Fragment und füge es in deiner theme.liquid-Datei direkt über dem Tag </body> ein. 

   <script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
   <script>
       var klaviyo = klaviyo || [];
       klaviyo.init({
         account: "PUBLIC_API_KEY",
         platform: "shopify"
       });
       klaviyo.enable("backinstock",{ 
       trigger: {
         product_page_text: "Notify Me When Available",
         product_page_class: "button",
         product_page_text_align: "center",
         product_page_margin: "0px",
         replace_anchor: false
       },
       modal: {
        headline: "{product_name}",
        body_content: "Registriere dich, um eine Benachrichtigung zu erhalten, wenn dieser Artikel wieder auf Lager ist.",
        email_field_label: "E-Mail-Adresse",
        button_label: "Benachrichtige mich",
        subscription_success_label: "Geschafft! Sobald der Artikel wieder verfügbar ist, bekommst du von uns eine E-Mail.",
        footer_content: '',
        additional_styles: "@import url('https://fonts.googleapis.com/css?family=Helvetica+Neue');",
        drop_background_color: "#000",
        background_color: "#fff",
        text_color: "#222",
        button_text_color: "#fff",
        button_background_color: "#439fdb",
        close_button_color: "#ccc",
        error_background_color: "#fcd6d7",
        error_text_color: "#C72E2F",
        success_background_color: "#d3efcd",
        success_text_color: "#1B9500"
       }
     });
   </script>

5. Den Text PUBLIC_API_KEY im Fragment musst du durch deinen öffentlichen API-Schlüssel von Klaviyo ersetzen. Wo du den öffentlichen API-Schlüssel deines Kontos findest, erfährst du hier. Wenn du mehrere Klaviyo-Konten nutzt, achte darauf, dass du den Schlüssel des richtigen Kontos verwendest. Kopiere den Schlüssel und füge ihn in das Fragment ein.
   
6. Du kannst an dieser Stelle aufhören und deine theme.liquid-Datei speichern, um die Standardkonfiguration zu verwenden. Du kannst aber auch weiterlesen und erfahren, wie du deine Wieder-auf-Lager-Schaltfläche und die entsprechenden Einstellungen anpasst.

Anpassen der Schaltfläche und des Formulars

Die Schaltfläche „Benachrichtige mich“ und das zugehörige Klaviyo-Formular lassen sich individuell konfigurieren. Du kannst die Farben, Schriftarten, den Text und andere Elemente an dein Design anpassen.

Die im obigen Fragment enthaltenen Standardwerte werden unten erläutert. Wenn du Änderungen vornimmst, achte darauf, dass du nur den Wert, nicht das Label selbst bearbeitest.

Auslöser-Einstellungen

Der Auslöser ist die Schaltfläche, die eingeblendet wird, wenn ein Artikel nicht mehr auf Lager ist. Auf dieser steht standardmäßig „Benachrichtige mich“. Du kannst den Text aber nach Belieben ändern. Der Standardcode (in dem Fragment, das du kopiert hast) für den Auslöser sieht wie folgt aus:

trigger: {
    product_page_text: "Notify Me When Available",
    product_page_class: "button",
    product_page_text_align: "center",
    product_page_margin: "0px",
    alternate_anchor: "AddToCart",
    replace_anchor: false
    }, 

Die Parameter sind:

• product_page_text
  Der Text in der Schaltfläche, die eingeblendet wird, wenn ein Artikel nicht mehr auf Lager ist.
• product_page_class
  Diese Klasse bestimmt, wie die Schaltfläche aussieht. Der Standardwert 'button' stellt sicher, dass diese Schaltfläche zu anderen grundlegenden Schaltflächen in deinem Theme passt.
• product_page_text_align
  Die Ausrichtung des Texts in der Wieder-auf-Lager-Schaltfläche (d. h. zentriert, rechts oder links).
• product_page_margin
  Der um die Schaltfläche hinzugefügte Außenabstand, zwischen dem Text und der Schaltfläche.
• alternate_anchor
  Wenn bei deinem Shopify-Theme ein anderes Element als eine „Zum Warenkorb hinzufügen“-Schaltfläche verwendet wird, ersetze diesen Text mit der ID des Elements.
• replace_anchor
  Wenn hier false steht, wird sowohl eine Schaltfläche „Ausverkauft“ als auch eine Schaltfläche „Benachrichtige mich“ angezeigt. Wenn hier true steht, ersetzt die Schaltfläche „Benachrichtige mich“ die Schaltfläche „Ausverkauft“.

Sichtbarkeitseinstellungen für Auslöser

Wenn du festlegen möchtest, für welche Produkte auf der Produktseite die Wieder-auf-Lager-Schaltfläche angezeigt werden soll, kannst du die Parameter unten einfügen. Achte darauf, dass du entweder include_on_tags oder exclude_on_tags einfügst, aber nicht beides.

Hier ist ein Beispiel für den Klaviyo.init-Abschnitt des Fragments, bei dem include_on_tags eingefügt wurde:

klaviyo.init({
    account: "PUBLIC_API_KEY",
    platform: "shopify",
    include_on_tags: "dog, cat"
});

• include_on_tags
  Dieses Tag sorgt dafür, dass die Wieder-auf-Lager-Schaltfläche nur bei Artikeln mit den angegebenen Tags angezeigt wird. Im Beispiel oben erscheint nur bei Produkten mit den Tags „dog“, „cat“ oder beiden eine Wieder-auf-Lager-Schaltfläche.
• exclude_on_tags
  Dies ist das Gegenteil des obigen Beispiels. exclude_on_tags sorgt dafür, dass die Wieder-auf-Lager-Schaltfläche bei allen Produkten außer den angegebenen angezeigt wird.

Modalfenster-Einstellungen

Das Modalfenster ist das Pop-up-Formular, das erscheint, wenn jemand auf die Schaltfläche klickt, um benachrichtigt zu werden, wenn ein Artikel wieder auf Lager ist.

Dies sind die Standardeinstellungen im Fragment, die du anpassen kannst:

• headline
  Die Überschrift, die oben im Pop-up erscheint. Standardmäßig fügen wir als Überschrift dynamisch den Produktnamen auf Grundlage der {product_name}-Variable von Shopify ein.
• body_content
  Der Text, der innerhalb des Pop-ups erscheint und Kund*innen den Vorgang erklärt
• email_field_label
  Der Platzhaltertext im E-Mail-Feld
• button_label
  Der Text in der Absenden-Schaltfläche des Pop-up-Formulars
• subscription_success_label
  Die Nachricht, die erscheint, wenn das Pop-up-Formular erfolgreich abgeschickt wurde
• footer_content
  Optionaler Text, der in der Fußzeile unter der Absenden-Schaltfläche angezeigt wird
• close_label
  Der Text der Schließen-Schaltfläche. Standardmäßig ist dies „Close“.
• background_color
  Die Hintergrundfarbe des Pop-up-Formulars (standardmäßig weiß)
• text_color
  Die Textfarbe des Pop-up-Formulars (standardmäßig schwarz)
• button_text_color
  Die Textfarbe auf der Schaltfläche im Pop-up-Formular (standardmäßig weiß)
• button_background_color
  Die Hintergrundfarbe der Absenden-Schaltfläche des Formulars (standardmäßig blau)
• error_background_color
  Die Hintergrundfarbe einer Fehlermeldung, die angezeigt wird, wenn es beim Absenden des Formulars ein Problem gab (standardmäßig hellrot)
• error_text_color
  Die Textfarbe der Fehlermeldung, die angezeigt wird, wenn es beim Absenden des Formulars ein Problem gab (standardmäßig rot)
• success_background_color
  Die Hintergrundfarbe der Meldung, die angezeigt wird, wenn das Formular erfolgreich abgeschickt wurde (standardmäßig hellgrün)
• success_text_color
  Die Textfarbe der Meldung, die angezeigt wird, wenn das Formular erfolgreich abgeschickt wurde (standardmäßig grün)
• font_family
  Der Name der Schriftfamilie, in der dein Text formatiert wird (z. B. Times New Roman)
• headers_font_family
  Der Name der Schriftfamilie, in der dein Header-Text formatiert ist; Helvetica ist ein Beispiel für eine Schriftfamilie

Anpassen der Position der Schaltfläche „Benachrichtige mich“

Mit dem folgenden Code-Fragment kannst du die Position der Schaltfläche „Benachrichtige mich“ ändern. Standardmäßig wird die Schaltfläche neben, unter oder anstelle der aktuellen Schaltfläche „Zum Warenkorb hinzufügen“ bzw. „Ausverkauft“ angezeigt. Mit diesem Code kannst du die Schaltfläche unter die Beschreibung, ans Ende der Seite, unter das Bild usw. setzen. Füge das Fragment dazu in deiner product.liquid-Datei an der Stelle ein, an der die Schaltfläche erscheinen soll. Denke daran, den Schaltflächentext anzupassen, wenn du ihn in etwas anderes als „Benachrichtige mich“ geändert hattest. 

<a class="klaviyo-bis-trigger" style="display:none;" href="#">Notify Me When Available</a>

Optional: Aufforderung an Kund*innen, sich für Marketing anzumelden

Wenn Kund*innen Wieder-auf-Lager-Benachrichtigungen abonnieren, gehen sie nicht unbedingt davon aus, dass sie in deine Haupt-Newsletterliste aufgenommen werden.

Wer lediglich benachrichtigt werden will, wenn ein Artikel wieder verfügbar ist, wird sich vermutlich schnell wieder abmelden, wenn regelmäßig Marketing-Inhalte im Postfach landen. Damit hättest du die Chance verpasst, diese Käufer*innen zu treuen Kund*innen zu machen, da sie die unerwünschten E-Mails von dir wahrscheinlich schnell wieder abbestellen.

Um Personen zu erfassen, die deine Marketing-E-Mails erhalten möchten, kannst du ein Kontrollkästchen wie dieses in dein Wieder-auf-Lager-Formular einfügen:

Dazu musst du in deinem Code-Fragment im Abschnitt „klaviyo.init“ nach der Account-ID deine Listen-ID einfügen.

1. Der Abschnitt „klaviyo.init“ sieht zunächst so aus:

   klaviyo.init({
           account: "PUBLIC_API_KEY",
           list: "YOUR_LIST_ID",
           platform: "shopify"
   });

2. Ersetze jetzt YOUR_LIST_ID durch die ID der Klaviyo-Liste, zu der die Abonnent*innen hinzugefügt werden sollen. Normalerweise sollte das deine Haupt-Newsletterliste sein.
3. Mit dieser Ergänzung (siehe Zeile 5) sieht das Fragment dann so aus:

   <script>
       var klaviyo = klaviyo || [];
       klaviyo.init({
           account: "PUBLIC_API_KEY",
           list: "YOUR_LIST_ID",
           platform: "shopify"
       });
       klaviyo.enable("backinstock",{ 
          trigger: {
            ...
          },
          modal: {
            ...
          }
       });
   </script>

4. Wenn du den Text neben dem Kontrollkästchen ändern möchtest, kannst du den anzuzeigenden Text im Abschnitt „modal“ einfügen. Standardmäßig lautet der Text: „Add me to your email list.“ Achte darauf, dass der Text klar formuliert ist, damit diejenigen, die sich anmelden, wissen, dass sie fortan Marketing-E-Mails von dir erhalten werden.

   modal: {
       newsletter_subscribe_label: "Add me to your email list."
           ...
       }

5. Wenn du feststellen möchtest, ob das Kästchen aktiviert oder nicht aktiviert ist, kannst du „subscribe_checked“ als Parameter zum Abschnitt „modal“ hinzufügen. Bei „true“ ist das Kästchen standardmäßig aktiviert. Bei „false“ ist es nicht aktiviert, sodass Benutzer*innen es selbst anklicken müssen.

   modal: {
       subscribe_checked: true
           ...
       }

Kann ich die Shopify-Einstellung „Verkauf fortsetzen, auch wenn Produkte nicht vorrätig sind“ und die Klaviyo-Funktion „Wieder auf Lager“ kombinieren?

Der Wieder-auf-Lager-Flow von Klaviyo funktioniert, indem er erkennt, wenn dein Lagerbestand von null zu einem bestimmten, durch deine Mindestbestandsregel festgelegten Wert wechselt. Wenn du die Shopify-Einstellung „Verkauf fortsetzen, auch wenn Produkte nicht vorrätig sind“ aktivierst, wird das Produkt zum Kauf angeboten, obwohl es keinen gelisteten Bestand hat, sodass die Schaltfläche „Benachrichtige mich“ nicht angezeigt wird. 

Klaviyo sendet in diesem Fall keine E-Mails an Personen, die das Produkt abonniert haben, da sich der Lagerbestand nicht verändert hat. Kund*innen werden erst dann benachrichtigt, wenn der Bestand deines Produkts deinen festgelegten Mindestbestand erreicht hat. 

Außerdem wird das Produkt als verfügbar gekennzeichnet, wenn die Option „Verkauf fortsetzen, auch wenn Produkte nicht vorrätig sind“ aktiviert ist. Folglich wird das Wieder-auf-Lager-Modalfenster von Klaviyo für dieses Produkt nicht auf der Website angezeigt, da das Produkt ungeachtet des Bestands erhältlich ist.

Tipps zur Fehlerbehebung

Das Aussehen der Wieder-auf-Lager-Schaltfläche hängt vom jeweiligen Shopify-Theme ab, das du für deinen Shop verwendest. Wenn du ein benutzerdefiniertes Theme nutzt, musst du eventuell den Code deines Themes anpassen, damit die Funktion „Wieder auf Lager“ richtig funktioniert.

Einrichtung deines Flows

Als Nächstes musst du deinen Wieder-auf-Lager-Flow in Klaviyo einrichten. Dieser wird immer dann ausgelöst, wenn jemand Benachrichtigungen zu wieder verfügbaren Artikeln abonniert. 

Test deiner Wieder-auf-Lager-Installation

So testest du, ob deine Installation von „Wieder auf Lager“ richtig funktioniert:

1. Richte ein Testprodukt in deinem Shop ein.
2. Setze den Bestand dieses Produkts auf null.
3. Schau auf der Produktseite nach, ob die Schaltfläche „Benachrichtige mich“ angezeigt wird.
4. Klicke auf die Schaltfläche „Benachrichtige mich“ und fülle das Formular aus.
5. Füge genügend Bestand hinzu, um die Regeln für „Wieder auf Lager“ in deinen Kontoeinstellungen zu erfüllen. 
6. Kontrolliere, ob du die von dir eingerichtete Wieder-auf-Lager-Benachrichtigung erhältst.

Ergebnis

Du hast die Funktion „Wieder auf Lager“ von Klaviyo nun in deinem Shopify-Shop installiert.

Weitere Ressourcen

• So gestaltest du Wieder-auf-Lager-Schaltflächen und -Formulare bei kostenlosen Shopify-Themes
• So richtest du „Wieder auf Lager“ per API ein