So zeigst du Favoriten-Buttons auf deiner Website und im Klaviyo Customer Hub an

Übersicht

Erfahre, wie du Shopper*innen ermöglichen kannst, ihre Lieblingsartikel auf deiner Website zu speichern. Wenn du neben deinen Produkten Favoritenschaltflächen einfügst, kannst du die gespeicherten Artikel deiner Käufer*innen im Customer Hub anzeigen lassen und Follow-up-Flows versenden, um die Conversion zu steigern.

Bevor du anfängst

Dieser Leitfaden behandelt, wie du Favoriten in Klaviyo Customer Hub aktivierst und Favoriten-Buttons auf verschiedenen Seiten deiner Website hinzufügst. Bevor du beginnst, aktiviere Klaviyo Customer Hub in Klaviyo. Favoriten erfordert einen kostenpflichtigen Klaviyo Customer Hub-Tarif oder eine aktive kostenlose Testversion.

Mehr über den Klaviyo Customer Hub erfahren.

Über Favoriten

Favoriten-Buttons ermöglichen es Kund*innen, Produkte zu speichern, an denen sie interessiert sind. Die favorisierten Artikel eines*einer Shopper*in werden im Klaviyo Customer Hub-Drawer angezeigt und können in Flows verwendet werden, um zusätzliche Conversions zu erzielen.

Wenn du Favoriten im Klaviyo Customer Hub aktivierst, können Shopper*innen, die deine Sichtbarkeitseinstellungen erfüllen, Favoriten-Schaltflächen verwenden, um Produkte zu speichern. Gespeicherte Artikel werden im Abschnitt Favoriten angezeigt. Artikel, die von angemeldeten Shopper*innen gespeichert wurden, werden mit ihrem Klaviyo Profil synchronisiert.

Um die Sichtbarkeit zu erhöhen und die Nutzung zu fördern, kannst du auch Favoriten-Schaltflächen hinzufügen zu:

• Produktdetailseiten
• Kollektionsseiten (auch „Produktlistenseiten“ genannt)

Artikel, die auf einer dieser Seiten favorisiert wurden, werden auch im Abschnitt Favoriten der Käufer*in im Klaviyo Customer Hub angezeigt. Damit Besucher*innen Produkte speichern können, ohne sich anzumelden, setze die Sichtbarkeit von Favoriten sowohl in den Hub- als auch in den Onsite-Favoriteneinstellungen auf Alle Shopper*innen. Favoriten von Besucher*innen, die Klaviyo nicht erkennt, werden in ihrem Browser gespeichert und mit ihrem Klaviyo Profil synchronisiert, wenn sie sich anmelden oder wenn Klaviyo sie erkennt, sofern erkannte Shopper*innen-Erlebnisse aktiviert sind.

Favoriten anzeigen im Klaviyo Customer Hub aktivieren

Um Favoriten in der Schublade des Klaviyo Customer Hub anzuzeigen, musst du zuerst die Einstellung Favoriten in Klaviyo aktivieren.

1. Wähle in der Hauptnavigation auf der linken Seite in Klaviyo Website > Klaviyo Customer Hub aus.
2. Klicke auf Design > Deinen Hub bearbeiten, um den Editor zu öffnen.
3. Wenn der Hub auf Offen eingestellt ist, wähle Favoriten aus dem Dropdown-Menü Seite oberhalb der Vorschau aus.

4. Lege auf dem Tab Inhalt die Sichtbarkeit auf die Shopper*innen fest, die Favoriten sehen sollen. Wähle Alle Shopper*innen aus, um Besucher*innen zu erlauben, Produkte zu speichern, ohne sich anzumelden.
5. Wähle unter Symbol ein Herz oder ein Pluszeichen für die Favoriten-Schaltflächen in Klaviyo Customer Hub aus.
   • Verwende die Vorschau, um das Erscheinungsbild des Symbols zu prüfen. Du kannst dir den ausgewählten und den nicht ausgewählten Zustand im Onsite-Favoriten-Editor ansehen, der unten beschrieben ist.
6. Klicke auf Veröffentlichen.

Favoriten-Schaltflächen werden jetzt auf Produkten im Klaviyo Customer Hub für Käufer*innen angezeigt, die deine Sichtbarkeitseinstellungen erfüllen. Wenn du auf eine Schaltfläche klickst, wird der Artikel dem Abschnitt Favoriten hinzugefügt.

Um Buttons außerhalb des Klaviyo Customer Hub hinzuzufügen, fahre mit Lieblings-Buttons zu Produktdetailseiten hinzufügen fort.

Bestehende Wunschlisten in den Klaviyo Customer Hub importieren

Wenn du von einer anderen Wunschlisten-App zu Klaviyo Customer Hub wechselst, kannst du die gespeicherten Artikel deiner Kund*innen importieren, damit sie ihre Favoriten weiterhin in Klaviyo Customer Hub verwalten können.

Importe nativer Apps

Klaviyo bietet native, sofort einsatzbereite Unterstützung beim Importieren von Daten direkt aus beliebten Wunschlisten-Apps, einschließlich:

• Swym
• Wishlist King

Import über CSV-Datei

Nachdem du Favoriten im Klaviyo Customer Hub aktiviert hast, öffne die Favoriten-Einstellungen des Klaviyo Customer Hub. Deine Datei muss E-Mail-Adressen von Shopper*innen und Produkt-IDs enthalten; Varianten-IDs sind optional. Du brauchst keine bestimmte CSV-Vorlage, aber du musst die Feldzuordnung vor dem Import überprüfen.

1. Klicke unter Favoriten aus einer anderen App importieren auf Importieren. Wenn du die Karte zuvor geschlossen hast, klicke auf Favoriten aus einer anderen App importieren, um sie wieder zu öffnen.
2. Lade deine CSV-Datei hoch oder ziehe sie in den Upload-Bereich, und klicke dann auf Weiter.
3. Überprüfe die vorgeschlagenen Feldzuordnungen. Ordne die Spalten mit E-Mail-Adressen von Shopper*innen Email zu und Produkt-IDs Product ID. Wenn deine Datei Varianten-IDs enthält, ordne diese Spalte Variant ID zu.
4. Klicke auf Fertig stellen, um den Import zu senden.

Der Importbildschirm schließt sich und zeigt nach erfolgreicher Übermittlung eine Bestätigung an. Wenn du eine Fehlermeldung siehst, überprüfe deine Datei und Zuordnungen, bevor du es erneut versuchst.

Favoriten-Buttons zu Produktdetailseiten hinzufügen

Füge deinen Produktdetailseiten Favoriten-Buttons hinzu, damit Käufer*innen einen Artikel speichern können, während sie ihn ansehen.

1. Gehe im Klaviyo Customer Hub zurück zu Design und wähle dann die Karte Favoriten unter Onsite-Blöcken aus. Klicke auf App-Block hinzufügen, um deinen Shopify Theme-Editor zu öffnen.
2. Dadurch wird dein Shopify-Theme-Editor in einem neuen Fenster geöffnet, und es wird ein Modal angezeigt, das darauf hinweist, dass der App-Block Klaviyo Favorites zu deiner Standardvorlage für die Produktseite hinzugefügt wurde. Klicke auf Verstanden.
   

3. Klicke und ziehe die App, um ihre Positionierung auf deiner Seite mit Produktdetails nach Bedarf anzupassen.
4. Wenn du bereit bist, klicke auf Speichern, um deine Änderungen in Shopify zu sichern. Die Schaltfläche wird an der Stelle angezeigt, die du ausgewählt hast, wenn Klaviyo Customer Hub live ist und Onsite-Favoriten für Kund*innen sichtbar sind.
5. Kehre zum Onsite-Favoriten-Editor in Klaviyo zurück. Lege auf dem Tab Inhalt die Sichtbarkeit auf die Shopper*innen fest, die deine Onsite-Schaltflächen sehen sollen. Diese kann nicht breiter sein als die Favoriten-Sichtbarkeit des Hubs.
6. Optional: Wähle im Onsite-Favoriten-Editor den Tab Stil aus, um das Symbol, die Farben, die Schriftart, die Ausrichtung und den visuellen Stil der Schaltfläche anzupassen.
   • Wähle unter Fonts bei Button font die Option Inherit from site aus, um die Schriftart deiner Website zu verwenden, oder wähle eine andere Schriftart. Wähle Configure custom font aus, um einen Schriftnamen und eine Schriftstärke einzugeben. Deine benutzerdefinierte Schriftart muss bereits auf deiner Website installiert sein.
   • Passe unter Farben die Schaltflächenfüllung und den Schaltflächentext an. Lege unter Erscheinungsbild Ausrichtung und Visueller Stil fest. Wähle Nur Symbol, Nur Text oder Symbol und Text.

• Wähle in der Vorschau Produktseite oder Kollektionsliste aus, um jede Platzierung zu überprüfen. Die Schaltfläche ist zunächst nicht ausgewählt; klicke darauf, um den favorisierten Status in der Vorschau zu sehen.

7. Klicke auf Veröffentlichen, um die Sichtbarkeit vor Ort und alle Stiländerungen in Klaviyo zu speichern.

Kehre zu deiner Website zurück und öffne eine Produktdetailseite, um zu prüfen, dass die Favoriten-Schaltfläche an der Stelle angezeigt wird, die du ausgewählt hast.

Als Nächstes springe weiter zum Abschnitt „Favoriten-Buttons zu deinen Kategorieseiten hinzufügen“.

Installiere Favoriten-Buttons manuell (Vintage-Themes oder benutzerdefiniertes Setup)

Wenn du ein Vintage-Shopify-Theme oder ein benutzerdefiniertes Setup verwendest, das keine App Blocks unterstützt, füge das Snippet für den Favoriten-Button manuell zu den Seiten hinzu, auf denen Käufer*innen Produkte speichern sollen (z. B. Produktseiten).

Bevor du dein Theme bearbeitest, aktiviere im Hub die Favoriten und lege in der Karte Favoriten unter Design > Onsite-Blöcke die Sichtbarkeit der Onsite-Favoriten fest. Klaviyo Customer Hub muss live sein, damit die Schaltflächen in deinem Shop angezeigt werden.

Um dies zu tun:

1. Öffne deine Shopify-Shop-Administration.
2. Wähle unter Verkaufs-Kanälen Online-Shop aus.
3. Klicke im Drei-Punkte-Menü deines aktuellen Themes auf Code bearbeiten. Wenn du es lieber in einem Entwurf-Theme testen möchtest, dupliziere zuerst dein aktuelles Theme und bearbeite dann den Code des Duplikats.
   

4. Suche die Datei für deine Produktdetailseite. Das variiert je nach Theme, hat aber in der Regel das Wort „Produkt“ im Namen. Im Dawn-Theme heißt diese Datei zum Beispiel „main-product.liquid“.
5. Füge das folgende Code-Fragment an der Stelle ein, an der die Favoriten-Schaltfläche angezeigt werden soll:
   <div class="klaviyo-wishlist-slot" data-product-id="{{ product.id }}"></div>
6. Klicke auf Speichern.
7. Klicke auf Shop-Vorschau.
8. Navigiere zu einer Produktseite in deiner Store-Vorschau. Der hinzugefügte Favoriten-Button sollte am vorgesehenen Ort sichtbar sein.

Favoriten-Buttons zu deinen Kategorieseiten hinzufügen

Installiere ein kurzes Code-Snippet auf deiner Shopify-Website, um Favoriten-Schaltflächen zu deinen Kategorieseiten hinzuzufügen, damit Kund*innen beim Stöbern durch deine Produkte Artikel schnell speichern können. Das ist besonders nützlich für Kund*innen auf Mobilgeräten.

Bevor du das Snippet hinzufügst, aktiviere Favoriten im Hub und lege die Sichtbarkeit der Onsite-Favoriten unter Design > Onsite-Blocks > Favoriten fest. Der Klaviyo Customer Hub muss live sein. Die Einstellungen für Onsite-Icon und -Farbe gelten auch für Favoriten-Buttons auf Kategorieseiten.

Um dies zu tun:

1. Öffne deine Shopify-Shop-Administration.
2. Wähle unter Verkaufs-Kanälen Online-Shop aus.
3. Klicke neben deinem aktuellen Theme auf das Drei-Punkte-Menü und wähle dann Code bearbeiten aus.
   • Wenn du auf einem Entwurfs-Theme testen möchtest, dupliziere zuerst dein aktuelles Theme und bearbeite dann den Code im duplizierten Theme.
4. Suche in der linken Seitenleiste nach deiner Collections-Datei und öffne sie. Für dieses Beispiel verwenden wir die Datei featured-collections.liquid, aber dein Theme verwendet möglicherweise eine andere Datei.
   

5. Verwende in der Collections-Datei die Suchfunktion (Command+F auf Mac oder Control+F auf Windows), um im Dokument nach dem Wort „render“ zu suchen. So kannst du den Snippet-Namen identifizieren, der dein Produkt-Grid enthält.
   • Das Snippet wird wahrscheinlich in einem ähnlichen Format angezeigt: {% render 'snippet-name'%}, wobei „snippet-name“ der Name der relevanten Snippet-Datei ist (z. B. card-product).
     

6. In der linken Seitenleiste nach der im vorherigen Schritt angegebenen Snippet-Datei suchen und sie öffnen (z. B. card-product.liquid).
7. Notiere dir oben in dieser Datei den Objektwert, der unter „Accepts“ aufgeführt ist (z. B. „card_product“).
   

8. Kopiere den folgenden Code und füge ihn in die Snippet-Datei ein:
   • Tipp: Suche in deiner Datei nach der ersten Stelle, an der der Preis gerendert wird, und füge den Code darüber ein.
     <div

    class="klaviyo-favorites-plp-slot"

   data-product-id="{{ OBJECT.id }}"

   data-product-url="{{ OBJECT.url }}"

   data-variant-id="{{OBJECT.selected_or_first_available_variant.id}}"

  ></div>
9. Ersetze im Code, den du eingefügt hast, OBJECT durch den Objektwert, den du zuvor notiert hast.
   • Wenn der Objektwert deiner Datei beispielsweise „card_product“ ist, sieht der Code so aus, wenn er in die Datei oben über dem Preis eingefügt wird.
     

10. Klicke in Shopify auf Speichern.
11. Öffne die Sammlungsseite deiner Website und aktualisiere sie. Wenn du ein dupliziertes Theme bearbeitet hast, öffne die Vorschau dieses Themes und navigiere stattdessen zu einer Sammlungsseite.

Du solltest jetzt die Favoriten-Buttons auf jedem Produkt sehen. Beachte, dass das Laden einige Sekunden dauern kann. Standardmäßig sind diese in der oberen rechten Ecke positioniert. Wenn du die Positionierung ändern möchtest, wende dich für Unterstützung mit benutzerdefiniertem CSS an deine*n Entwickler*in.

Wenn die Favoriten-Buttons immer noch nicht angezeigt werden, probiere diese Schritte zur Fehlerbehebung aus:

• Bestätige, dass du OBJECT im Code-Fragment durch den Objektwert deiner Datei ersetzt hast.
• Versuche, den Code an anderer Stelle in der Datei einzufügen.
• Prüfe, ob der Code in die richtige Snippet-Datei eingefügt wurde.

Wenn sie immer noch nicht angezeigt werden, hol dir Unterstützung von einer*einem Entwickler*in. Das Support-Team von Klaviyo kann deine Theme-Dateien nicht direkt bearbeiten.

Nächste Schritte

Jetzt, da du auf deiner Website Favoriten-Buttons hinzugefügt hast, richte einen Favoriten-Erinnerungs-Flow ein, um Kund*innen an ihre zuletzt gespeicherten Artikel zu erinnern.

Weitere Ressourcen