„Back in Stock“ für Shopify installieren

Das wirst du lernen 

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

Bevor du loslegst

Ressourcen

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

Über die „Wieder auf Lager“-Funktion von Klaviyo

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

1. „Wieder auf Lager“-Flow
   Wenn jemand einen „Wieder auf Lager“-Alarm abonniert, wird in dessen Klaviyo Profil das Ereignis „Wieder auf Lager“-Abonnement 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 der Beschriftung „Notify Me When Available“ anzeigt, wenn Artikel nicht mehr vorrätig sind. Sobald du das Fragment installiert hast, passiert Folgendes:
   • Wenn ein Kunde nach einem Produkt sucht und es nicht mehr vorrätig ist, erscheint eine Schaltfläche „Notify Me When Available“ direkt neben oder unter der Schaltfläche „Sold Out“.
   • Wenn Käufer*innen auf die „Notify Me“-Schaltfläche klicken, wird ein Formular angezeigt, in das sie ihre E-Mail-Adresse eingeben können, um bei Wiederverfügbarkeit des Artikels benachrichtigt zu werden.
   • Nach Absenden des Formulars wird das Ereignis Subscribed to Back In Stock in Klaviyo im Profil der betreffenden Person getrackt.

Klaviyo überwacht deinen Bestand auf Variantenebene, d. h. Käufer*innen können Benachrichtigungen 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 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 angesehen). 
• Achte darauf, dass es auf deiner Produktseite entweder eine „Add to Cart“-Schaltfläche oder ein Kontaktformular gibt. Bei manchen Shopify Themes kann die „Add to Cart“-Schaltfläche entfernt werden, wenn kein Bestand vorhanden ist. Vergewissere dich, dass dein Shopify Theme in diesem Fall eine „Sold Out“-Schaltfläche anzeigt, damit der Klaviyo Code ganz sicher funktioniert.

Video: „Back in Stock“ 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 Online Store > Themes.
2. Klicke auf das Auswahlmenü Actions für dein Thema und wähle Edit Code.
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: "Register to receive a notification when this item comes back in stock.",
        email_field_label: "Email",
        button_label: "Notify me when available",
        subscription_success_label: "You're in! We'll let you know when it's back.",
        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 die Schaltfläche „back in stock“ und die Einstellungen anpasst.

Anpassen der Schaltfläche und des Formulars

Die „Benachrichtigen“-Schaltfläche und das zugehörige Formular von Klaviyo 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 Etikett 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 „Notify Me", du kannst den Text aber nach Belieben ändern. Der Standardcode (in dem Fragment, das du kopiert hast) für den Trigger lautet:

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 „back in stock button“-Schaltfläche (d. h. zentriert, rechts oder links).
• product_page_margin
  Der um die Schaltfläche hinzugefügte Rand, zwischen dem Text und der Schaltfläche.
• alternate_anchor
  Wenn bei deinem Shopify Theme ein anderes Element als eine „Add to Cart“-Schaltfläche verwendet wird, ersetze diesen Text mit der ID des Elements.
• replace_anchor
  Wenn hier false steht, wird sowohl eine „Sold Out“- als auch eine „Notify Me“-Schaltfläche angezeigt. Wenn hier true steht, ersetzt die „Notify Me“-Schaltfläche die „Sold Out“-Schaltfläche.

Sichtbarkeitseinstellungen für Auslöser

Wenn du festlegen möchtest, für welche Produkte auf der Produktseite die „back in stock“-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 „back in stock“-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 „back in stock“-Schaltfläche.
• exclude_on_tags
  Dies ist das Gegenteil des obigen Beispiels. exclude_on_tags sorgt dafür, dass die „back in stock“-Schaltfläche bei allen Produkten außer den angegebenen angezeigt wird.

Modal-Einstellungen

Das Modal 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 Abenden-Schaltfläche angezeigt wird
• close_label
  Der Text der Schließen-Schaltfläche (standardmäßig „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 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 Kopfzeilentext formatiert wird (z. B. Helvetica)

Anpassen der Position der „Notify Me“-Schaltfläche

Mit dem folgenden Code-Fragment kannst du die Position der „Notify Me“-Schaltfläche ändern. Standardmäßig wird die Schaltfläche neben, unter oder anstelle der aktuellen „Add To Cart“- bzw. „Sold Out“-Schaltfläche 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. Denk unbedingt daran, den Schaltflächentext anzupassen, wenn du ihn in etwas anderes als „Notify Me When Available“ geändert hattest. 

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

Auf Wunsch

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

Wenn Kund*innen „back in stock“-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 schnell wieder abbestellen.

Um Personen zu erfassen, die deine Marketing-E-Mails erhalten möchten, kannst du ein Kontrollkästchen wie dieses in dein „Back in Stock“-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, 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 beim 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 ab sofort Marketing-E-Mails von dir erhalten werden.

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

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

   modal: {
       subscribe_checked: true
           ...
       }

Kann ich die Shopify Einstellung „continue selling when out of stock“ und die „Wieder auf Lager“-Funktion von Klaviyo 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 „Continue selling when out of stock“ aktivierst, kann das Produkt gekauft werden, obwohl es keinen gelisteten Bestand gibt. Folglich wird keine „Notify Me“-Schaltfläche angezeigt. 

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 „Continue selling when out of stock“ aktiviert ist. Folglich wird das „back in stock“-Modal 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 „back in stock“-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 „Back in Stock“-Funktion 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 „Wieder auf Lager“-Installation richtig funktioniert:

1. Richte ein Testprodukt in deinem Shop ein.
2. Setze den Bestand dieses Produkts auf null.
3. Prüfe auf der Produktseite, ob die „Benachrichtigen“-Schaltfläche erscheint.
4. Klicke auf die „Benachrichtigen“-Schaltfläche 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“-Nachricht erhältst.

Ergebnis

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

Zusätzliche Ressourcen

• So gestaltest du „Back in Stock“-Schaltflächen und -Formulare bei kostenlosen Shopify Themes
• So richtest du „Back in Stock“ per API ein