So installierst du Klaviyo Reviews auf Shopify (Vintage-Themes und Headless)

Übersicht

Hier erfährst du, wie du Klaviyo Reviews mit einem Vintage-Shopify-Theme oder einer Headless-Architektur installierst. Bei diesem Vorgang werden mehrere Codeausschnitte kopiert und in den Code deiner Site eingefügt.

Wenn du ein Shopify-2.0-Theme verwendest, kannst du Klaviyo Reviews installieren, ohne Code zu verwenden. Weitere Informationen findest du in unserem Artikel zu den Ersten Schritten mit Klaviyo Reviews. Wenn du WooCommerce verwendest, erfährst du hier, wie du Klaviyo Reviews für WooCommerce installierst.

Bevor du anfängst

Bevor du diese Code-Fragmente in den Code deiner Website einfügst, füge die Klaviyo Reviews-App zu deinem Shopify-Shop hinzu. Bei Vintage-Themes aktiviere Klaviyos Onsite-Tracking.

Installation mit Headless-Architektur auf Shopify

Um Klaviyo Reviews mit einem Headless-Shopify-Shop zu integrieren, füge Klaviyos JavaScript-Tracking-Snippet, auch bekannt als Klaviyo.js, auf allen Seiten hinzu, auf denen du Reviews-Widget hinzufügen möchtest (z. B. Produktseiten). Möglicherweise hast du dieses Snippet bereits installiert, wenn du Klaviyo Onsite-Tracking oder Anmeldeformular konfiguriert hast.

Erfahre, wie du Klaviyo.js für Shopify-Shops installierst.

Nachdem du dieses Skript zu deiner Website hinzugefügt hast, fahre fort, indem du die Code-Fragmente in den folgenden Schritten in den Code deiner Website kopierst.

Die Code-Fragmente hinzufügen

Mit den Code-Fragmenten unten können bestimmte Bewertungs-Widgets in verschiedenen Bereichen deines Shops angezeigt werden.

• Das Sternbewertungs-Widget zeigt die aktuelle Sternbewertung für ein bestimmtes Produkt an und wird meist unter dem Namen deines Produkts installiert.
• Das Widget „Zusammenfassung der Bewertungen“ zeigt ein Diagramm, das alle für ein Produkt ausgewählten Bewertungen aufschlüsselt, von Nutzer*innen mit Bewertungen eingereichte Bilder sowie das häufigste Feedback, das das Produkt erhalten hat. Sie ist normalerweise nahe dem unteren Ende einer Produktseite installiert.
• Das Widget für Produktbewertungen ist eine Kombination aus den Widgets „Zusammenfassung der Bewertungen“ und „Bewertungsliste“. Wenn du das Widget für Produktbewertungen zu deiner Website hinzufügst, musst du die Widgets „Bewertungsliste“ und „Zusammenfassung der Bewertungen“ nicht separat hinzufügen.
• Das Widget für die Bewertungsliste zeigt eine Liste aller veröffentlichten Bewertungen und Kund*innenfragen sowie eine Suchleiste, Filter, eine Schaltfläche Bewertung schreiben und eine Schaltfläche Frage stellen an. Es wird in der Regel direkt unter dem Widget für die Bewertungszusammenfassung installiert.
• Das Widget „Karussell für hervorgehobene Bewertungen“ zeigt hervorgehobene Bewertungen aus all deinen Produkten an. Dieses kann auf deiner Startseite, auf einer eigenständigen Bewertungsseite oder an einer beliebigen anderen Stelle auf deiner Website platziert werden. Du kannst die Bewertungen auswählen, die in diesem Widget hervorgehoben werden. Wenn verfügbar, werden jeder Bewertung von Kund*innen eingereichte Bilder beigefügt; deine Produktbilder werden verwendet, wenn zusammen mit der Bewertung kein Bild eingereicht wurde.
• Das SEO-/Widget „Alle Bewertungen“ zeigt alle deine Bewertungen für alle Produkte auf einer einzigen Seite an. Verwende dieses Widget, um deine SEO zu verbessern und potenziellen Kund*innen einen zentralen Ort zu bieten, an dem sie sehen können, was deine aktuellen Kund*innen lieben. Dieses Widget wird meist zu einer eigenständigen Reviews -Seite auf deiner Website hinzugefügt.

Widget für Sternebewertungen

Verwende das Widget für die Sternebewertung, um die durchschnittliche Bewertung eines Produkts und die Anzahl der erhaltenen Bewertungen prominent hervorzuheben.

So installierst du dieses Widget unter dem Titel deines Produkts:

1. Öffne deine Shopify-Shop-Administration.
2. Klicke unter Vertriebskanäle auf Onlineshop.
3. Klicke im Drei-Punkte-Menü neben deinem aktuellen Theme auf Duplizieren, um eine Kopie deines aktuellen Themes zu erstellen.
4. Klicke im Drei-Punkte-Menü auf Code bearbeiten.
   

5. Suche in der Dateisuchleiste nach „product“ und finde die Datei, die für die Inhalte deiner Produktseite verwendet wird. Das könnte product.liquid sein, product-template.liquid, oder etwas Ähnliches. (Wenn du eine benutzerdefinierte Produktseiten-Vorlage verwendest, wähle stattdessen diese aus.)
   

6. Wähle die Datei aus und suche dann nach {{ product.title }}, um den Code zu finden, der den Titel deines Produkts anzeigt.
   

7. Füge unter diesem Code eine neue Zeile hinzu.
8. Füge in der neuen 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>
   

9. Klicke auf Speichern.
10. Klicke auf Shop-Vorschau.
11. Navigiere zu einer Produktseite in deiner Store-Vorschau. Du solltest ein Stern-Widget unter dem Titel des Produkts sehen.

Widget für Produktbewertungen

Verwende das Widget für die Bewertungszusammenfassung und die Bewertungsliste (oder nur das Widget für Produktbewertungen), um für jedes Produkt auf deiner Website eine Zusammenfassung und eine Liste aller veröffentlichten Bewertungen hinzuzufügen.

So installierst du dieses Widget:

1. Öffne deine Shopify-Shop-Administration.
2. Klicke unter Vertriebskanäle auf Onlineshop.
3. Klicke neben deinem aktuellen Theme auf Anpassen, um es zu bearbeiten, oder klicke auf das Drei-Punkte-Menü > Duplizieren, wenn du lieber ein Entwurf-Theme statt deines Live-Themes bearbeiten möchtest.
4. Klicke im Drei-Punkte-Menü auf Code bearbeiten.
   

5. Suche in der Dateisuchleiste nach „product“ und finde die Datei, die für die Inhalte deiner Produktseite verwendet wird. Das könnte product.liquid sein, product-template.liquid, oder etwas Ähnliches. (Wenn du eine benutzerdefinierte Produktseiten-Vorlage verwendest, wähle stattdessen diese aus.)
   

6. Wähle die Datei aus und navigiere dann ganz nach unten (oder dorthin, wo du das Widget für die Zusammenfassung und Liste der Rezensionen anzeigen lassen möchtest).
7. Füge eine neue Zeile hinzu und füge dann dieses Code-Fragment ein:
   <div id="klaviyo-reviews-all" data-id="{{product.id}}"></div>
   

8. Klicke auf Speichern.
9. Klicke auf Shop-Vorschau.
10. Navigiere in deiner Shop-Vorschau zu einer Produktseite für ein Produkt, das Bewertungen hat. Du solltest in der Nähe des unteren Seitenbereichs ein Bewertungsübersicht- und Listenansicht-Widget sehen.

Widgets für Zusammenfassung der Überprüfung und Liste der Überprüfungen trennen

Wenn du es vorziehst, die Widgets für die Bewertungszusammenfassung und die Bewertungsliste separat zu installieren (statt zusammen, wie im Abschnitt oben beschrieben), verwende die folgenden Code-Fragmente:

Widget für die Bewertungszusammenfassung

<div id="klaviyo-reviews-summary" data-id="{{product.id}}"></div>

Widget für die Review-Liste

<div id="klaviyo-reviews-list" data-id="{{product.id}}"></div>

Widget für ein Karussell mit hervorgehobenen Bewertungen (optional)

Das vorgestellte Bewertungskarussell zeigt handverlesene Bewertungen auf jeder Seite an, die ihr auswählt (z. B. auf eurer Startseite).

Um ein Karussell hinzuzufügen, das alle deine hervorgehobenen Bewertungen anzeigt, musst du zuerst Bewertungen zum Hervorheben auswählen.

1. Wähle in der Hauptnavigation von Klaviyo Reviews.
2. Klicke auf Alle Bewertungen.
3. Neben einer Bewertung, die hervorgehoben werden soll, auf Funktionen klicken.
   

Sobald ihr mehrere Bewertungen ausgewählt habt, die auf eurer Website vorgestellt werden sollen, könnt ihr ein Bewertungskarussell-Widget auf jeder Seite installieren. Navigiert zu der Seite, auf der das Karussell erscheinen soll, und fügt dann den folgenden Snippet in den Code dieser Seite ein:

<div id="klaviyo-featured-reviews-carousel"></div>

SEO/Widget für alle Bewertungen (optional)

Das Widget „SEO / All reviews“ zeigt alle veröffentlichten Bewertungen über alle Produkte hinweg an. Füge das zu einer eigenständigen Bewertungsseite oder zu deiner Über uns-Seite hinzu.

<div id="klaviyo-reviews-all" data-id="all"></div>

Ergebnis

Nachdem du die in diesem Artikel beschriebenen Widgets installiert und das neue Theme live geschaltet hast, werden deine Bewertungen auf allen Produktseiten angezeigt (sowie auf allen anderen Seiten deiner Website, auf denen du sie installiert hast).