Case Study / Tisso
Trustpilot behalten. Bewertungen im Tisso-Design.
Tisso wollte seine bestehenden Trustpilot-Bewertungen im neuen Shopify-Store nutzen, ohne Abstriche bei den Figma-Vorgaben. Umgesetzt wurden die Datenanbindung und individuelle Bewertungs-Komponenten von der Announcement-Bar bis zur Produktseite. Trustpilot-Badge und öffentliches Profil bleiben erhalten; der Store verlinkt weiterhin darauf.
- Datenquelle
- Trustpilot: Shop- und Produktbewertungen
- Integration
- API-Import, Mapping & Webhooks
- Darstellung
- Metaobjects, Metafields & Liquid
Mein Beitrag: Social-Proof-Integration im Rahmen eines Relaunchs mit Eshop Guide: Datenanbindung, Konfiguration, Designanpassung, Platzierung und Theme-Entwicklung.
01
Das Figma-Design umsetzen, bis ins Bewertungsdetail
Die Gestaltung wurde direkt im Theme umgesetzt: Sterne, Rezensionen, Abstände und Anordnung entsprechen den Designvorgaben. Shopbewertungen liefern allgemeines Feedback auf der Startseite, Produktbewertungen das passende Feedback auf der PDP. Die Komponenten lassen sich anschließend durch Tisso selbst auf weiteren Templates einsetzen.
- Announcement-Bar und Footer
- Kompakte Darstellung von Bewertungsschnitt und Anzahl, eingebunden in die bestehenden Bereiche des Themes.
- Review-Slider auf der Startseite
- Shopbewertungen mit eigener Gestaltung für Sterne, Zusammenfassung und Rezensionen, abgestimmt auf die Designvorgabe.
- Ratings auf Produktkarten
- Bewertungsschnitt und Anzahl auf Kategorieseiten, in Featured-Product-Sections und weiteren Produktkarten.
- Anpassbar im Theme
- Sections und App-Blöcke mit konfigurierbarer Struktur und CSS. Tisso kann sie im Theme-Editor selbst platzieren und auf weiteren Templates wiederverwenden. Überschriften, Sterne, Abstände und Anordnung bleiben anpassbar.
Von Trustpilot ins Theme
- 01
Trustpilot
Bleibt das System für Bewertungsanfragen und die Verwaltung der dort gesammelten Rezensionen.
- 02
Sync nach Shopify
Import und laufender Abgleich der Bewertungen, mit Zuordnung zu Produkten, Kunden und Bestellungen.
- 03
Ausgabe im Theme
Liquid rendert die gespeicherten Daten im Store-Design. Die erste Ausgabe benötigt keinen externen Review-Abruf im Browser.
02
Trustpilot-Bewertungen im neuen Store weiterverwenden
Für Tisso wurden die bestehenden Bewertungen den Produkten, Kunden und Bestellungen in Shopify zugeordnet und der laufende Abgleich eingerichtet. Die technische Basis liefert der wiederverwendbare Trustpilot-Connector. Die projektspezifische Arbeit lag in der Zuordnung unterschiedlicher Kennungen und der Anbindung an die Daten des neuen Stores.
- Produktzuordnung trotz unterschiedlicher IDs
- Trustpilot-Produktkennungen entsprachen nicht durchgehend den Shopify-SKUs. Auch das MPN-Feld war nicht überall befüllt. Eine explizite Mapping-Liste schließt diese Lücken.
- Kunden und Bestellungen verknüpfen
- Kunden werden anhand ihrer E-Mail-Adresse zugeordnet, Bestellungen über ihre Referenzen. Die Verknüpfung hängt dabei vom Stand der Kunden- und Bestellmigration ab.
- Änderungen laufend übernehmen
- Der Erstimport läuft über die Trustpilot-API. Für neue, geänderte und gelöschte Shop- und Produktbewertungen wurden Webhooks eingerichtet.
03
Bewertungen direkt mit der Produktseite ausliefern
Das nachladende PDP-Rating hatte Layout-Verschiebungen verursacht und dem Lighthouse-Score geschadet. Deshalb wurde die Ausgabe im Theme so umgesetzt, dass das Rating und die ersten Rezensionstexte bereits mit der Seite ausgeliefert werden. Kunden müssen für diese Inhalte nicht auf den externen Widget-Abruf warten; Google und KI-Crawler können die Texte direkt im HTML lesen.
- Liquid statt externem PDP-Widget
- Shopify rendert die gespeicherten Bewertungsdaten serverseitig. Der Browser muss das Rating nicht erst von Trustpilot abrufen und nachträglich in die Produktinformationen einsetzen.
- Bewertungsliste mit Interaktionen
- Verteilung nach Sternen, Sortierung und Nachladen weiterer Bewertungen ergänzen die erste serverseitige Ausgabe. JavaScript übernimmt diese Interaktionen.
- Für Crawler verfügbar
- Die Bewertungstexte sind im ursprünglichen HTML abrufbar, ohne JavaScript auszuführen. Das ist die technische Grundlage für die Lesbarkeit durch Google und KI-Crawler.
- Im Preview überprüft
- Die Produktdetailseite liefert Bewertungstexte bereits in der Serverantwort aus. Die Texte lassen sich auslesen, ohne den JavaScript-Code der Seite auszuführen.
04
Performance & Lighthouse
Individuelles Review-Design. Performance im Mittel erhalten.
Die Trustpilot-Bewertungen passen sich dem Tisso-Design an und werden direkt im Shopify-Theme ausgegeben. Die ersten Rezensionstexte sind bereits im ausgelieferten HTML enthalten. Mit der Integration lag der durchschnittliche Lighthouse-Score bei 68,8 statt 67,2 ohne Integration. Individuelle Bewertungsdarstellung bei vergleichbarer Gesamtperformance im Test.
Ohne Integration
Mit Integration
Ø Performance-Score über alle Seiten und Geräte
Google PageSpeed Insights, 11. September 2026. Startseite, Kategorieseite und Produktdetailseite: jeweils zehn Durchläufe pro Gerät und Variante, 60 insgesamt. Angegeben sind Mittelwerte. Gemessen im Shopify-Preview (*.shopifypreview.com, pb=0), nicht im Live-Store mit CPU-Throttling für vergleichbare Messungen.
Lighthouse-Scores im direkten Vergleich
Performance-Score von 0 bis 100 · Mittelwerte
Alle Messwerte im Vergleich
Pro Kennzahl steht links der Wert ohne Bewertungsintegration und rechts der Wert mit Integration. Darunter steht die Veränderung: Grün bedeutet besser, Rot bedeutet schlechter. Höhere Performance-Scores sind besser; bei den übrigen Kennzahlen sind niedrigere Werte besser. Lighthouse-Ergebnisse schwanken zwischen Messungen. Deshalb verwenden wir 10 Messungen pro Durchlauf, was in 60 vorher/nachher Gesamt-Messungen resultiert.
| Seite / Gerät | Performance | FCP | LCP | TBT | CLS | Speed Index | Transfergröße |
|---|---|---|---|---|---|---|---|
| Ø Alle Messreihen | 67,2 → 68,8(+1,6) | 2,6 s → 2,4 s(-0,2 s) | 7,2 s → 6,6 s(-0,6 s) | 220 ms → 166 ms(-54 ms) | 0,016 → 0,015(-0,001) | 4,8 s → 4,5 s(-0,3 s) | 2.869 KiB → 2.922 KiB(+53 KiB) |
| Ø Mobile | 58,3 → 60,0(+1,7) | 4,4 s → 4,0 s(-0,4 s) | 12,1 s → 10,9 s(-1,2 s) | 165 ms → 134 ms(-31 ms) | 0,002 → 0,002(0,000) | 7,0 s → 6,5 s(-0,5 s) | 2.526 KiB → 2.563 KiB(+37 KiB) |
| Ø Desktop | 76,1 → 77,6(+1,5) | 0,8 s → 0,8 s(0,0 s) | 2,3 s → 2,3 s(0,0 s) | 276 ms → 198 ms(-78 ms) | 0,029 → 0,028(-0,001) | 2,7 s → 2,5 s(-0,2 s) | 3.212 KiB → 3.281 KiB(+69 KiB) |
| Startseite · Mobile | 61,6 → 59,6(-2,0) | 3,7 s → 4,2 s(+0,5 s) | 9,2 s → 10,6 s(+1,4 s) | 109 ms → 101 ms(-8 ms) | 0,007 → 0,005(-0,002) | 6,4 s → 7,5 s(+1,1 s) | 2.414 KiB → 2.467 KiB(+53 KiB) |
| Kategorie · Mobile | 58,8 → 61,7(+2,9) | 4,8 s → 3,8 s(-1,0 s) | 13,5 s → 10,6 s(-2,9 s) | 110 ms → 126 ms(+16 ms) | 0,000 → 0,000(0,000) | 7,0 s → 5,6 s(-1,4 s) | 2.412 KiB → 2.378 KiB(-34 KiB) |
| Produktseite · Mobile | 54,5 → 58,8(+4,3) | 4,7 s → 4,0 s(-0,7 s) | 13,5 s → 11,4 s(-2,1 s) | 276 ms → 176 ms(-100 ms) | 0,000 → 0,002(+0,002) | 7,5 s → 6,5 s(-1,0 s) | 2.751 KiB → 2.845 KiB(+94 KiB) |
| Startseite · Desktop | 72,7 → 78,9(+6,2) | 0,8 s → 0,8 s(0,0 s) | 2,3 s → 2,1 s(-0,2 s) | 238 ms → 132 ms(-106 ms) | 0,034 → 0,030(-0,004) | 3,9 s → 3,3 s(-0,6 s) | 2.947 KiB → 3.036 KiB(+89 KiB) |
| Kategorie · Desktop | 80,0 → 75,5(-4,5) | 0,8 s → 0,8 s(0,0 s) | 2,3 s → 2,6 s(+0,3 s) | 321 ms → 299 ms(-22 ms) | 0,028 → 0,029(+0,001) | 2,2 s → 2,3 s(+0,1 s) | 3.365 KiB → 3.393 KiB(+28 KiB) |
| Produktseite · Desktop | 75,6 → 78,4(+2,8) | 0,8 s → 0,8 s(0,0 s) | 2,2 s → 2,3 s(+0,1 s) | 268 ms → 162 ms(-106 ms) | 0,024 → 0,025(+0,001) | 1,9 s → 2,0 s(+0,1 s) | 3.325 KiB → 3.415 KiB(+90 KiB) |
FCP: erste sichtbare Inhalte · LCP: größter sichtbarer Inhalt · TBT: blockierte Hauptthread-Zeit · CLS: Layout-Verschiebungen · Speed Index: Geschwindigkeit des sichtbaren Seitenaufbaus
Mehr informationen zu Google PageSpeed InsightsWeitere Referenzen
Landig: Von der Bewertungsanfrage bis zum Cart-Drawer