Du wirst lernen
Erfahre, wie du Klaviyo Reviews mit einem klassischen Shopify-Theme oder einer Headless-Architektur installierst. Dazu kopierst du mehrere Code-Fragmente und fügst sie in den Code deiner Website ein.
Wenn du ein Shopify 2.0 Theme verwendest, kannst du Klaviyo Reviews ohne Code installieren. In unserem Artikel über die ersten Schritte mit Klaviyo Reviews erfährst du mehr. Wenn du WooCommerce verwendest, erfährst du, wie du Klaviyo Reviews für WooCommerce installierst.
Dieser Prozess erfordert die direkte Bearbeitung deiner Theme-Dateien in Shopify. Wenn du dich dabei nicht wohl fühlst, wende dich an deinen Entwickler oder an Kontakt, einen Klaviyo Partner, um Unterstützung zu erhalten.
Bevor du beginnst
Bevor du dieses Code-Fragment in den Code deiner Website einfügst, füge die Klaviyo Reviews App zu deinem Shopify Laden hinzu. Für alte Themen aktiviere das Onsite-Tracking von Klaviyo.
Installation mit Headless Architecture auf ShopifyInstallation mit Headless Architecture auf Shopify
Um Klaviyo Reviews in einen Headless Shopify Laden zu integrieren, fügst du das JavaScript-Tracking-Snippet von Klaviyo, auch bekannt als Klaviyo.js, zu allen Seiten hinzu, auf denen du das Bewertungs-Widget hinzufügen möchtest (z. B. Produktseiten). Möglicherweise hast du dieses Snippet bereits installiert, wenn du Klaviyo's Onsite-Tracking oder Anmeldeformular konfiguriert hast.
Erfahre, wie du Klaviyo.js für Shopify Laden installierst.
Sobald du dieses Skript zu deiner Website hinzugefügt hast, fährst du mit den folgenden Schritten fort.
Füge das Code-Fragment hinzuFüge das Code-Fragment hinzu
Das folgende Code-Fragment ermöglicht es, dass bestimmte Bewertungs-Widgets in verschiedenen Bereichen deines Ladens erscheinen.
- Das Sterne-Bewertungs-Widget zeigt die aktuelle Sternebewertung für ein bestimmtes Produkt an und wird meistens unter dem Namen deines Produkts installiert.
- Das Widget für die Bewertungsübersicht zeigt ein Diagramm, das alle für ein Produkt ausgewählten Bewertungen, die mit den Bewertungen eingereichten Benutzerbilder und die häufigsten Rückmeldungen zum Produkt aufschlüsselt. Sie wird normalerweise am unteren Ende einer Produktseite installiert.
- Das Produktbewertungs-Widget ist eine Kombination aus der Bewertungsübersicht und dem Bewertungslisten-Widget. Wenn du das Produktbewertungs-Widget zu deiner Seite hinzufügst, musst du die Bewertungsliste und das Bewertungszusammenfassungs-Widget nicht separat hinzufügen.
- Das Widget für die Bewertungsliste zeigt eine Liste aller veröffentlichten Bewertungen und Kundenfragen an, zusammen mit einer Suchleiste, Filtern, einer Schaltfläche " Bewertung schreiben" und einer Schaltfläche " Frage stellen". Es wird in der Regel direkt unter dem Widget für die Bewertungsübersicht installiert.
- Das Karussell-Widget zeigt hervorgehobene Rezensionen zu all deinen Produkten an. Dies kann auf deiner Homepage, auf einer eigenständigen Bewertungsseite oder an einem anderen Ort auf deiner Website geschehen. Du kannst die Bewertungen auswählen, die in diesem Widget angezeigt werden sollen. Falls verfügbar, werden jeder Bewertung von Kunden übermittelte Bilder beigefügt; wenn kein Bild übermittelt wurde, werden deine Produktbilder verwendet.
- Das SEO / Alle Bewertungen Widget zeigt alle deine Bewertungen für alle Produkte auf einer einzigen Seite an. Nutze dieses Widget, um dein SEO zu verbessern und potenziellen Kunden einen zentralen Ort zu bieten, an dem sie sehen können, was deine aktuellen Kunden lieben. Dieses Widget wird meist zu einer eigenständigen Bewertungsseite auf deiner Website hinzugefügt.
Sterne-Bewertungs-Widget
Nutze das Sterne-Bewertungs-Widget, um die durchschnittliche Bewertung eines Produkts und die Anzahl der Rezensionen, die es erhalten hat, an prominenter Stelle anzuzeigen.
So installierst du dieses Widget unter dem Titel deines Produkts:
- Öffne deinen Shopify Laden admin.
- Klicke unter Verkaufskanal auf Online-Shop.
- Klicke auf das Menü mit den drei Punkten neben deinem aktuellen Thema > Duplizieren, um eine Klone deines aktuellen Themas zu erstellen.
- Klicke im Menü mit den drei Punkten auf Code bearbeiten.
- Suche "Produkt" in der Dateisuchleiste und finde die Datei, die für den Inhalt deiner Produktseite verwendet wird. Es könnte product.liquid sein, Produkt-Vorlage.flüssig, oder etwas Ähnliches. (Wenn du eine benutzerdefinierte Produktseite Vorlage verwendest, wähle diese stattdessen aus).
- Wähle die Datei aus und suche dann nach {{ product.title }}, um den Code zu finden, der den Titel deines Produkts anzeigt.
- Füge eine neue Zeile unter diesem Code ein.
- Füge in die neue Zeile dieses Code-Fragment ein:
<div class="klaviyo-star-rating-widget" data-id="{{product.id}}" data-product-title="{{product.title}}" data-product-type="{{product.type}}"></div> - Klicke auf Speichern.
- Klicke auf Vorschau Laden.
- Navigiere zu einer Produktseite in deiner Ladenvorschau. Du solltest ein Stern-Widget unter dem Titel des Produkts sehen.
Widget für Produktbewertungen
Verwende das Widget für die Zusammenfassung und die Liste der Bewertungen (oder nur das Widget für die Produktbewertung), um eine Zusammenfassung und eine Liste aller veröffentlichten Bewertungen für jedes Produkt auf deiner Website hinzuzufügen.
Um die Zusammenfassung und das Listen-Widget separat zu installieren, gehe zu den separaten Ab schnitten für die Zusammenfassung und das Listen-Widget unten.
Um dieses Widget zu installieren:
- Öffne deinen Shopify Laden admin.
- Klicke unter Verkaufskanal auf Online-Shop.
- Klicke auf Anpassen neben deinem aktuellen Thema, um es zu bearbeiten, oder klicke auf das Menü mit den drei Punkten > Duplizieren, wenn du ein Entwurfsthema anstelle deines Live-Themas bearbeiten möchtest.
- Klicke im Menü mit den drei Punkten auf Code bearbeiten.
- Suche "Produkt" in der Dateisuchleiste und finde die Datei, die für den Inhalt deiner Produktseite verwendet wird. Es könnte product.liquid sein, Produkt-Vorlage.flüssig, oder etwas Ähnliches. (Wenn du eine benutzerdefinierte Produktseite Vorlage verwendest, wähle diese stattdessen aus).
- Wähle die Datei aus und navigiere dann ganz nach unten (oder dorthin, wo die Zusammenfassung der Bewertungen und das Listen-Widget erscheinen sollen).
- Füge eine neue Zeile ein und füge dann dieses Code-Fragment ein:
<div id="klaviyo-reviews-all" data-id="{{product.id}}"></div> - Klicke auf Speichern.
- Klicke auf Vorschau Laden.
- Navigiere zu einer Produktseite in deiner Ladenvorschau für ein Produkt, das Bewertungen hat. Du solltest eine Zusammenfassung der Bewertungen und ein Widget für die Listenansicht unten auf der Seite sehen.
Separate Bewertungszusammenfassung und Bewertungsliste Widget
Wenn du es vorziehst, die Bewertungszusammenfassung und das Bewertungslisten-Widget separat zu installieren (und nicht zusammen, wie im obigen Abschnitt beschrieben), verwende das folgende Code-Fragment:
Widget für die Zusammenfassung der Rezension
<div id="klaviyo-reviews-summary" data-id="{{product.id}}"></div>
Überprüfung Liste Widget
<div id="klaviyo-reviews-list" data-id="{{product.id}}"></div>
Karussell-Widget für besondere Beiträge (optional)
Das Bewertungskarussell zeigt handverlesene Bewertungen auf einer beliebigen Seite an (z. B. auf deiner Startseite).
Um ein Karussell hinzuzufügen, das alle deine vorgestellten Bewertungen anzeigt, musst du zunächst die Bewertungen auswählen, die du vorstellen möchtest.
- Wähle in der Hauptnavigation von Klaviyo die Option Bewertungen.
- Klicke auf Alle Bewertungen.
- Klicke neben dem Beitrag, den du veröffentlichen möchtest, auf " Beitrag".
Wenn du mehrere Bewertungen für deine Website ausgewählt hast, kannst du auf jeder Seite ein Bewertungskarussell-Widget installieren. Navigiere zu der Seite, auf der das Karussell erscheinen soll, und füge den folgenden Codeausschnitt in den Code der Seite ein:
<div id="klaviyo-featured-reviews-carousel"></div>
SEO / Alle Bewertungen Widget (optional)
Das SEO / Alle Bewertungen Widget zeigt alle veröffentlichten Bewertungen für jedes Produkt an. Füge dies zu einer eigenständigen Bewertungsseite oder zu deiner Info-Seite hinzu.
<div id="klaviyo-reviews-all" data-id="all"></div>
Ergebnis
Sobald du das in diesem Artikel beschriebene Widget installiert und das neue Theme live geschaltet hast, erscheinen deine Bewertungen auf den Produktseiten (und auf allen anderen Seiten deiner Website, auf denen du sie installiert hast).
Zusätzliche Ressourcen