Testimonials

Zeigen Sie Kundenstimmen in einem flexiblen Raster oder einer Diashow mit optionalen Produktlinks und Medien an.

Ausgewählte Links

Hilfreiche Videos

Shopify Academy-Video: Ihren Store anpassen

Shopify-Video: So optimieren Sie Ihren Store für höhere Conversions

Mit Testimonials heben Sie Kundenzitate hervor, verknüpfen sie mit hervorgehobenen Produkten und präsentieren sie entweder in einem Raster oder einer Diashow. Das ist eine starke Wahl für Startseiten, Landingpages und Werbeseiten, auf denen Social Proof mehr Designkontrolle benötigt als ein einfacher Bewertungs-Feed. Einen umfassenderen Überblick darüber, wie Abschnitte und Blöcke im Editor funktionieren, finden Sie in Shopify-Dokumentation zu Abschnitten und Blöcken

Grundeinstellungen

Layout-Einstellungen

Layout-Einstellungen steuern, wie viele Testimonial-Karten angezeigt werden und wie sie sich auf Desktop, Tablet und Mobilgeräten verhalten. Sie können Raster- und Diashow-Layouts gerätespezifisch kombinieren, was nützlich ist, wenn Sie auf größeren Bildschirmen ein umfangreicheres Layout und auf kleineren eine einfachere Navigation wünschen.

Raster-Layouts eignen sich am besten, wenn Testimonials kurz und visuell einheitlich sind. Diashow-Layouts passen in der Regel besser zu längeren Zitaten, gemischten Medien oder Karten mit deutlich unterschiedlichen Höhen.

Wenn die Tablet-Spaltenanzahl auf 0 belassen wird, verwenden Tablet-Bildschirme die Desktop-Spalteneinstellung. Das kann die Einrichtung beschleunigen, aber es lohnt sich, den Tablet-Abstand zu prüfen, wenn Ihre Karten lange Zitate, Produktbilder oder Video enthalten.

Die Inhaltsausrichtung hilft dabei, die Karten bewusst gestaltet wirken zu lassen, wenn sich die Länge der Testimonials unterscheidet. Vertikales Strecken kann Zeilen sauberer erscheinen lassen, indem die Kartenhöhen innerhalb derselben Zeile angeglichen werden.

Wenn sich Ihre Testimonials stark in der Länge unterscheiden, testen Sie Inhaltsausrichtung und vertikales Strecken gemeinsam. Angeglichene Höhen wirken in Rastern meist sauberer, während natürliche Höhen in redaktionelleren Layouts besser wirken können.

Diashow-Einstellungen

Diashow-Einstellungen gelten, wenn für ein Gerät ein Diashow-Layout festgelegt ist. Diese Steuerelemente beeinflussen Animation, Autoplay, Wiederholung, Navigation, Pagination und ob die nächste Folie teilweise sichtbar ist.

Eine Überblendungsanimation ist am besten, wenn Sie jeweils ein Testimonial hervorheben möchten. Sie verändert außerdem das Layout-Verhalten, indem sie eine Einzelansicht erzwingt, und deaktiviert Folienvorschau- und Pagination-Stile, die von mehreren sichtbaren Folien abhängen.

Autoplay kann Bewegung hinzufügen, aber Testimonial-Inhalte benötigen in der Regel ein langsameres Tempo als Werbebanner. Wenn Sie Autoplay aktivieren, verwenden Sie eine längere Verzögerung und halten Sie die Navigation sichtbar, damit Kunden pausieren und in ihrem eigenen Tempo fortfahren können.

Farbeinstellungen

Diese farblichen Überschreibungen auf Abschnittsebene ermöglichen es Ihnen, Symbol-, Text- und Unterüberschriftenfarben anzupassen, ohne den Rest Ihres Themes zu ändern. Sie sind besonders nützlich, wenn der Abschnitt auf einem benutzerdefinierten Hintergrund liegt oder einen stärkeren Kontrast benötigt als Ihre globalen Stile bieten.

Wenn Sie auch Kartenfarben anpassen, prüfen Sie beide Sets gemeinsam. Die Abschnittseinleitung und die Testimonial-Karten können jeweils unterschiedliche Farbbehandlungen verwenden, sodass ein kurzer Kontrastcheck hilft, den Abschnitt stimmig zu halten.

Unterstützte Blocktypen

Testimonial

Kundenstimme

Der Testimonial-Block fügt ein einzelnes Kundenzitat, eine Quellenzeile, eine Bewertung und eine optionale Produktverknüpfung hinzu. Er kann außerdem unterstützende Bild- oder Videoinhalte enthalten, um einem Testimonial mehr visuelle Wirkung zu verleihen. Siehe Kundenstimme.

Verwenden Sie kurze, fokussierte Zitate, wenn Sie mehrere Karten gleichzeitig anzeigen möchten. Wenn ein Testimonial eine längere Geschichte erzählt oder reichhaltigere Medien enthält, lässt es sich in einem Diashow-Layout in der Regel leichter erfassen.

Wenn Sie ein Produkt zuweisen, kann die Karte das Testimonial visuell mit einem bestimmten Artikel verbinden. Die Produktbildgestaltung wird nur angewendet, wenn ein Produkt ausgewählt ist. Daher ist es problemlos möglich, Produktbilder auszublenden, wenn das Zitat für sich stehen soll.

Bildeinstellungen

Bilder sind optional, können aber den Ton der Karte erheblich verändern. Ein einfaches Bild kann ein Testimonial persönlicher wirken lassen, während Video es redaktioneller oder kampagnenorientierter erscheinen lassen kann.

Oben platzierte Bilder geben Medien eine höhere visuelle Priorität. Unten platzierte Bilder lassen das Zitat selbst im Mittelpunkt stehen, was oft die bessere Wahl für vertrauensbildende Inhalte ist.

Wenn Sie Video verwenden, hilft ein Posterbild dabei, dass die Karte vor dem Start der Wiedergabe hochwertig wirkt. Autoplay eignet sich in der Regel besser für kurze, stumme Clips als für gesprochene Testimonials.

Blockübergreifende gemeinsame Einstellungen

Jeder Testimonial-Block enthält außerdem eigene Farbüberschreibungen für die Karte, Sichtbarkeitssteuerungen und einen Editortitel. Farbänderungen auf Blockebene sind nützlich, um ein bestimmtes hervorgehobenes Testimonial zu betonen, funktionieren jedoch am besten, wenn sie nur selektiv eingesetzt werden.

Standard-Abschnittseinstellungen

Header-Einstellungen

Header-Einstellungen steuern die Einführung über den Testimonials, einschließlich Ausrichtung, Überschriftenstruktur, optionalem Symbol, unterstützendem Text und einer optionalen Schaltfläche. Verwenden Sie diesen Bereich, um den Abschnitt mit einer klaren Botschaft über Kundenfeedback, Markenvertrauen oder hervorgehobene Bewertungen zu rahmen.

Wenn Sie eine Schaltfläche hinzufügen, sollte die Aktion eng mit den Testimonials verknüpft sein, etwa mit einem Link zu einer Kollektion, einer Produktgruppe oder einer eigenen Bewertungsseite. Wählen Sie die Überschriftenebene basierend auf der Seitenstruktur und nicht nur auf der visuellen Größe aus.

Karten-Einstellungen

Karten-Einstellungen ermöglichen es Ihnen, die Standardfarben für Kartenhintergrund, Rahmen und Text für Testimonial-Karten in diesem Abschnitt zu überschreiben. Diese Einstellungen sind hilfreich, wenn die Karten sich vom Seitenhintergrund abheben oder zu einer saisonalen Kampagne passen sollen.

Priorisieren Sie die Lesbarkeit, wenn Sie Verläufe oder weichere Hintergrundfarben verwenden. Ein starker Kontrast ist besonders wichtig für Zitattext, Quellennamen und Bewertungs-Icons.

Padding-Einstellungen

Padding-Einstellungen steuern den Abstand oberhalb und unterhalb des Abschnitts. Passen Sie sie an, um den Testimonials ausreichend Raum zu geben, besonders wenn der Abschnitt zwischen bildlastigen oder textlastigen Bereichen erscheint.

Großzügigere Abstände können Testimonials hochwertiger wirken lassen. Engere Abstände können auf kompakten Landingpages funktionieren, aber prüfen Sie mobil sorgfältig, damit der Abschnitt nicht gedrängt wirkt.

Abschnittshintergrund-Einstellungen

Abschnittshintergrund-Einstellungen ermöglichen es Ihnen, dem Abschnitt eine Hintergrundfarbe, einen Verlauf, ein Bild, ein Video und ein Overlay hinzuzufügen. Das ist nützlich, wenn der Testimonial-Bereich sich von den umgebenden Inhalten abheben soll.

Hintergrundmedien können Atmosphäre schaffen, aber auch die Lesbarkeit verringern. Verwenden Sie Overlays und Farbüberschreibungen zusammen, damit der Zitattext gut lesbar bleibt.

Trennlinien-Einstellungen

Trennlinien-Einstellungen fügen oberhalb oder unterhalb des Abschnitts eine Linie hinzu, um einen saubereren Übergang zwischen Seitenbereichen zu schaffen. Sie sind eine gute Wahl, wenn Sie Abgrenzung ohne vollständige Hintergrundgestaltung wünschen.

Halten Sie das Trennlinien-Design einfach, wenn Ihre Testimonial-Karten bereits starke Rahmen oder kräftige Hintergründe verwenden. Zu viele visuelle Trennungen können die Seite unruhig wirken lassen.

Sichtbarkeitseinstellungen

Sichtbarkeitseinstellungen steuern, ob der Abschnitt auf Desktop, Mobilgeräten oder auf beiden angezeigt wird. Das ist nützlich, wenn Sie für größere Bildschirme eine andere Testimonial-Darstellung wünschen als für kleinere Bildschirme.

Verwenden Sie gerätespezifische Sichtbarkeit mit Bedacht, damit Sie nicht mehrere Versionen desselben Inhalts pflegen müssen, es sei denn, der Layoutvorteil ist klar.

Breiten-Einstellungen

Breiten-Einstellungen steuern die Abschnittsbreite und die maximale Breite seines Inhalts. Bei Testimonials beeinflussen diese Einstellungen die Lesbarkeit und wie dicht das Layout wirkt.

Schmalere Inhaltsbreiten machen längere Zitate in der Regel leichter lesbar. Breitere Breiten eignen sich besser für mehrspaltige Raster, aber prüfen Sie das finale Layout im Storefront, da Editor-Vorschauen Breitenänderungen schwieriger genau einschätzen lassen können.

Nutzungshinweise

Passen Sie das Layout an den Inhalt an. Verwenden Sie Raster für kürzere, einheitlichere Testimonials und Diashows für längere Zitate, gemischte Medien oder ungleichmäßige Kartenlängen.
Verknüpfen Sie Produkte selektiv. Verbinden Sie Testimonials nur dann mit Produkten, wenn das Zitat einen bestimmten Artikel klar unterstützt, damit der Abschnitt hilfreich und nicht zu werblich wirkt.
Schützen Sie die Lesbarkeit. Prüfen Sie den Textkontrast sorgfältig, wenn Sie benutzerdefinierte Hintergründe, Verläufe, Overlays oder Farbüberschreibungen für Karten verwenden.
Setzen Sie Bewegung sparsam ein. Autoplay, Wiederholung und Video können für mehr Dynamik sorgen, aber Testimonial-Inhalte funktionieren meist besser, wenn Kunden genug Zeit haben, sie bequem zu lesen.
Prüfen Sie jeden Breakpoint in der Vorschau. Überprüfen Sie Desktop-, Tablet- und Mobile-Layouts gemeinsam, besonders wenn Sie lange Zitate, Bilder und Diashow-Verhalten kombinieren.
Balancieren Sie den Abschnitt mit Blöcken aus. Wenn Sie mehr Testimonial-Blöcke hinzufügen, kann sich der Abschnitt von einem einfachen Fokuspunkt zu einem umfassenderen Social-Proof-Layout entwickeln. Prüfen Sie daher, ob der Einführungstext noch erforderlich wirkt.
Prüfen Sie Medien- und Farbüberschreibungen gemeinsam. Separate Medien für Desktop und Mobilgeräte oder explizitere lokale Farbauswahlen können Zuschnitt, Sichtbarkeit und Kontrast so verändern, dass jede Ansicht eine kurze abschließende Kontrolle benötigt.

Align v2.0