Kommentare zu Shopify-Seiten hinzufügen
FastComments ist im Shopify App Store verfügbar. Installieren Sie die App und ziehen Sie FastComments-Blöcke per Drag & Drop auf jeden Blogbeitrag, jede Produktseite oder jede benutzerdefinierte Seite im Shopify-Theme-Editor. Keine Codebearbeitung erforderlich.
Wenn Sie die App installieren, richtet Shopify Ihr FastComments-Konto ein, verbindet Ihre Shop-Domain und verknüpft die Abrechnung automatisch. Sie müssen sich nicht separat bei fastcomments.com anmelden.
Die Seiten dieses Leitfadens behandeln jeden FastComments-Block, den die App bereitstellt, wie Single Sign-On für Ihre Shopify-Kunden funktioniert und wie Sie vorhandene Shopify-Kommentare importieren können, bevor Sie umstellen.
FastComments-App installieren 
Install from the Shopify App Store
- Open the FastComments listing on the Shopify App Store.
- Click Add app and pick the plan you want during the install flow.
- Shopify redirects you back into the FastComments admin inside Shopify when the install completes.
That's the full install. There is nothing to paste into your theme files.
What gets set up for you
The install runs everything you would otherwise do by hand:
- A FastComments tenant is created for your store and linked to your shop domain.
- Your shop's store URL is added to the tenant's authorized domains, so comments load without a domain error.
- A
fastcomments.tenant_idshop metafield is written so every block knows which tenant to render against. - Single sign-on for your Shopify customers is enabled by default.
- Billing runs through Shopify Managed Pricing. Charges appear on your regular Shopify bill. Upgrade, downgrade, or cancel from Settings > Apps and sales channels > FastComments in your Shopify admin.
If your shop was already a FastComments customer before you installed the app, the install reuses the existing tenant instead of creating a new one.
The embedded admin
When you open the FastComments app from your Shopify admin, you land on a dashboard with one-click tiles into the full FastComments backend:
- Dashboard: account settings, usage, and subscription details.
- Moderation Queue: approve, reject, and reply to comments across your store.
- Customize: adjust widget colors, fonts, moderation rules, and configuration.
- Ratings & Reviews Helper: set up star ratings and review questions if you want to use the Reviews Summary block.
Each tile opens FastComments with a single-use login link, so you don't need a separate sign-in.
Next: add blocks to your store
Open your Shopify theme editor (Online Store > Themes > Customize), open the template you want to add commenting or reviews to, and click Add block. The FastComments blocks appear under Apps. The rest of this guide covers each one.
Kommentare zu Blogbeiträgen und Produkten hinzufügen
Der FastComments-Block ist das Haupt-Kommentar-Widget. Fügen Sie ihn zu Blog-Post-Vorlagen, Produktvorlagen oder jeder anderen Seite hinzu, auf der Sie einen Diskussions-Thread oder einen Live-Chat möchten.
Block hinzufügen
- Öffnen Sie den Shopify Theme-Editor (Online Store > Themes > Customize).
- Wählen Sie die Vorlage, auf der Sie Kommentare haben möchten: Blog post, Product, oder jede andere Seiten- oder Abschnittsvorlage.
- Klicken Sie in dem Abschnitt, in dem die Kommentare erscheinen sollen, auf Add block.
- Wählen Sie unter Apps FastComments aus.
- Klicken Sie auf Save.
Der Block erscheint sofort. Es gibt keine Tenant ID zum Eingeben; der Tenant Ihres Shops wird beim Installieren der App automatisch verbunden.
Einstellungen
| Setting | Was es bewirkt | Standard |
|---|---|---|
| Tenant ID (optional) | Überschreibt, gegen welchen FastComments Tenant der Block gerendert wird. Leer lassen, um den automatisch konfigurierten Tenant des Shops zu verwenden. Eine manuelle Tenant ID finden Sie unter fastcomments.com/auth/my-account/api-secret. | (blank) |
| SSO | Loggt den Besucher automatisch als dessen Shopify-Kundenkonto ein, bevor er kommentiert. Siehe Automatisches Login für Shopify-Kunden. | On |
| Commenting Style | Threaded für verschachtelte Antworten und Abstimmungen, oder Streaming für einen Echtzeit-Chat-Feed. | Threaded |
| Custom URL ID | Überschreibt die automatisch erkannte Seitenkennung. Verwenden Sie dies, wenn zwei URLs denselben Kommentarthread teilen sollen. | (auto-detected) |
Wie der Seitenbezeichner gewählt wird
Jeder Kommentarthread ist durch eine URL-ID gekennzeichnet. Der Block wählt diese automatisch:
- Blog post template:
shopify-article-{article.id}, die stabil bei Änderungen von Slug und Titel ist. - Product template:
shopify-product-{product.id}, die stabil bei Änderungen von Slug und Titel ist. - Other templates: der Request-Pfad.
Wenn Sie Custom URL ID festlegen, wird stattdessen dieser Wert verwendet. Verwenden Sie dieselbe Custom URL ID über mehrere Blöcke hinweg (zum Beispiel bei einer lokalisierten Variante einer Produktseite), um einen Kommentarthread zu teilen.
Threaded vs Streaming
Threaded ist die Standardeinstellung. Besucher antworten einander, können abstimmen, und die Moderationstools funktionieren wie erwartet. Am besten für Blogbeiträge und Produktbewertungen.
Streaming verzichtet auf die Thread-Struktur und zeigt neue Kommentare in Echtzeit, sobald sie gepostet werden, ähnlich einem Chat-Feed. Am besten für Produkteinführungen, Live-Events und Community-Seiten.
Mehrere Blöcke auf derselben Seite
Der Block kann mehrmals derselben Vorlage hinzugefügt werden. Zum Beispiel eine Reviews-Zusammenfassung oben auf einer Produktseite und ein FastComments-Block unten. Die Blöcke teilen eine URL-ID, sodass die Zusammenfassung die Kommentare darunter widerspiegelt.
Tipps
- Der Block versteckt sich in der Theme-Editor-Vorschau mit einem gelben Hinweis, wenn er keinen Tenant findet. Wenn das in Ihrem Live-Shop erscheint, installieren Sie die FastComments-App neu.
- Auf einer Produktseite fungiert der FastComments-Block gleichzeitig als Ihr Produktbewertungs-Widget. Kombinieren Sie ihn mit FastComments - Reviews Summary für eine Sterne-Bewertungszusammenfassung oben auf der Seite.
Ein Badge für die Kommentaranzahl hinzufügen
Der FastComments - Comment Count Block zeigt eine kleine Kommentarzählung für eine einzelne Seite an. Verwenden Sie ihn in Blog-Beitragslisten, Produktkarten oder jeder Vorlage, die auf eine Seite mit Kommentaren verlinkt, damit Besucher sehen können, wie aktiv jeder Thread ist, bevor sie darauf klicken.
Add the block
- Öffnen Sie den Shopify Theme-Editor.
- Öffnen Sie die Vorlage, in der die Zählung erscheinen soll. Zum Beispiel die Blog-Vorlage (die Beitragsliste) oder einen Produktauflistungsabschnitt.
- Klicken Sie in dem Abschnitt, der jedes Element rendert, auf Add block.
- Unter Apps wählen Sie FastComments - Comment Count.
- Klicken Sie auf Save.
Settings
| Setting | What it does | Default |
|---|---|---|
| Tenant ID (optional) | Überschreibt, aus welchem FastComments-Tenant die Zählung gelesen wird. Leer lassen, um den automatisch konfigurierten Tenant des Shops zu verwenden. | (blank) |
| Custom URL ID | Überschreibt die Seitenkennung, die die Zählung abfragt. Verwenden Sie dies, wenn die Zählung sich auf einer anderen Seite befindet als der FastComments-Block, dem sie folgt. | (auto-detected) |
How the count matches the comment thread
Der Comment Count block verwendet dieselbe automatische Erkennungslogik wie der FastComments Block:
- Blog post template:
shopify-article-{article.id} - Product template:
shopify-product-{product.id} - Other templates: the request path
Wenn Sie eine Custom URL ID im FastComments Block auf einer Seite setzen, setzen Sie dieselbe Custom URL ID im Comment Count block, damit sie auf denselben Thread zeigen.
Tips
- Die Zählungen für alle Elemente auf der Seite werden in einer Anfrage abgerufen, sodass das Hinzufügen des Blocks zu jedem Element in einer langen Liste keine zusätzlichen Roundtrips verursacht.
- Ein Comment Count block pro Artikel oder Produkt in einer Liste ist die erwartete Verwendung; der Block kann so oft hinzugefügt werden, wie Sie ihn benötigen.
Einen Feed mit neuesten Kommentaren hinzufügen
Der FastComments - Recent Comments Block zeigt die neuesten Kommentare aus Ihrem gesamten Shop. Verwenden Sie ihn, um aktuelle Aktivität in einer Seitenleiste, Fußzeile oder einem Bereich auf der Startseite anzuzeigen.
Block hinzufügen
- Öffnen Sie den Shopify-Theme-Editor.
- Öffnen Sie die Vorlage, in der Sie den Feed haben möchten. Eine Seitenleisten-Sektion, die Startseite oder der Blog-Index eignen sich gut.
- Klicken Sie in der Sektion, die ihn enthalten soll, auf Block hinzufügen.
- Unter Apps wählen Sie FastComments - Recent Comments aus.
- Klicken Sie auf Speichern.
Einstellungen
| Setting | What it does | Default |
|---|---|---|
| Tenant ID (optional) | Überschreiben, von welchem FastComments-Tenant der Feed gelesen wird. Leer lassen, um den automatisch für den Shop konfigurierten Tenant zu verwenden. | (leer) |
| Number of comments | Wie viele aktuelle Kommentare angezeigt werden sollen. Bereich 1 bis 50. | 5 |
Tipps
- Jeder Kommentar verlinkt auf die Seite, auf der er veröffentlicht wurde, sodass der Block gleichzeitig als Navigationshinweis dient, der zeigt, worüber gerade gesprochen wird.
- Der Feed gilt shopweit. Um die neuesten Kommentare für eine einzelne Seite anzuzeigen, verwenden Sie stattdessen den FastComments-Block auf dieser Seite.
Einen Feed mit neuesten Diskussionen hinzufügen
Der FastComments - Recent Discussions-Block listet die Seiten in Ihrem Shop mit der zuletzt erfolgten Kommentaraktivität, jeweils ein Eintrag pro Seite. Verwenden Sie ihn, wenn Sie möchten, dass Besucher aktive Threads statt einzelner Kommentare entdecken.
Block hinzufügen
- Öffnen Sie den Shopify-Theme-Editor.
- Öffnen Sie die Vorlage, in der Sie den Feed platzieren möchten, z. B. eine Seitenleiste, die Fußzeile, die Blog-Übersicht oder einen Abschnitt auf der Startseite.
- Klicken Sie in dem Abschnitt, der ihn aufnehmen soll, auf Block hinzufügen.
- Unter Apps wählen Sie FastComments - Recent Discussions.
- Klicken Sie auf Speichern.
Einstellungen
| Einstellung | Was es bewirkt | Standard |
|---|---|---|
| Tenant ID (optional) | Überschreibt, von welchem FastComments-Tenant der Feed liest. Leer lassen, um den automatisch konfigurierten Tenant des Shops zu verwenden. | (leer) |
| Number of comments | Wie viele kürzlich aktive Diskussionen angezeigt werden sollen. Bereich 1 bis 50. | 20 |
Recent Discussions vs Recent Comments
Beide Blöcke nutzen dieselben Daten, zeigen jedoch unterschiedliche Ansichten:
- Recent Comments: a flat list of the latest individual comments. Best for "what was just said".
- Recent Discussions: one entry per page, ordered by most recent activity. Best for "which threads are alive right now".
Sie können beide im selben Shop verwenden. Zum Beispiel Recent Comments in der Blog-Seitenleiste und Recent Discussions auf der Startseite.
Eine Liste der Top-Seiten hinzufügen
Der FastComments - Top Pages Block listet die Seiten in Ihrem Shop mit der insgesamt höchsten Kommentaraktivität auf. Verwenden Sie ihn, um Ihre meistdiskutierten Beiträge oder Produkte hervorzuheben.
Block hinzufügen
- Öffnen Sie den Shopify-Theme-Editor.
- Öffnen Sie die Vorlage, in der Sie die Liste haben möchten, z. B. eine Seitenleiste, Fußzeile oder Blog-Index-Sektion.
- Klicken Sie auf Block hinzufügen in dem Abschnitt, der ihn enthalten soll.
- Unter Apps wählen Sie FastComments - Top Pages.
- Klicken Sie auf Speichern.
Einstellungen
| Setting | What it does | Default |
|---|---|---|
| Tenant ID (optional) | Überschreibt, von welchem FastComments-Mandanten die Liste gelesen wird. Leer lassen, um den automatisch konfigurierten Mandanten des Shops zu verwenden. | (leer) |
Top Pages vs Recent Discussions
- Top Pages sortiert nach gesamtem Engagement, daher bleiben dieselben Beiträge eine Weile oft ganz oben. Gut für eine "popular posts"-Seitenleiste.
- Recent Discussions sortiert nach der jüngsten Aktivität, sodass die Liste schnell wechselt. Gut für ein Panel "what's hot right now".
Eine Bewertungsübersicht hinzufügen
Der FastComments - Bewertungsübersicht-Block zeigt eine aggregierte Sternebewertung und eine Aufschlüsselung der Bewertungen für eine Seite. Kombinieren Sie ihn mit dem FastComments-Block in Produktvorlagen für das Standard-Bewertungs-Layout: Zusammenfassung oben, Bewertungsformular und Bewertungen darunter.
Voraussetzung: Ratings & Reviews einrichten
Der Bewertungsübersichts-Block zeigt die Bewertungsfragen an, die Sie für Ihren Shop konfiguriert haben. Richten Sie diese zuerst ein:
- Öffnen Sie die FastComments-App in Ihrem Shopify-Admin.
- Klicken Sie auf die Kachel Ratings & Reviews Helper (oder öffnen Sie Ratings & Reviews Helper direkt).
- Fügen Sie die Fragen hinzu, die jede*r Bewertende beantworten soll (Gesamtsternebewertung, "wie war die Passform", usw.).
Ohne konfigurierte Fragen hat der Übersichtsblock nichts zu aggregieren.
Block hinzufügen
- Öffnen Sie den Shopify-Theme-Editor.
- Öffnen Sie die Produkt-Vorlage (oder die Seitenvorlage, in der Sie die Zusammenfassung haben möchten).
- Klicken Sie auf Block hinzufügen nahe dem oberen Rand des Seitenabschnitts, über der Stelle, an der sich der FastComments-Block befinden wird.
- Wählen Sie unter Apps FastComments - Reviews Summary aus.
- Fügen Sie weiter unten auf derselben Seite einen FastComments-Block hinzu, falls Sie noch keinen haben, damit Besucher Bewertungen hinterlassen können.
- Klicken Sie auf Speichern.
Einstellungen
| Setting | What it does | Default |
|---|---|---|
| Tenant ID (optional) | Override which FastComments tenant the summary reads from. Leave blank to use the store's automatically-configured tenant. | (blank) |
| Custom URL ID | Override the page identifier the summary aggregates against. Use this when the summary lives on a different page from the FastComments block it reflects. | (auto-detected) |
Wie die Zusammenfassung den Bewertungen zugeordnet wird
Der Bewertungsübersichts-Block verwendet dieselbe automatische Erkennungslogik wie der FastComments-Block:
- Produktvorlage:
shopify-product-{product.id} - Vorlage für Blogbeiträge:
shopify-article-{article.id} - Andere Vorlagen: der Anfragepfad
Bei einer normalen Produktseite teilen die Zusammenfassung und der Kommentarthread automatisch dieselbe URL-ID, ohne dass eine Konfiguration erforderlich ist.
Tipps
- Die Zusammenfassung ist schreibgeschützt. Um Bewertungen zu sammeln, benötigen Sie einen FastComments-Block auf derselben Seite.
- Wenn Sie die Bewertungsfragen im Ratings & Reviews Helper nach dem Sammeln von Bewertungen ändern, wird die Zusammenfassung anhand des neuen Fragensets neu berechnet.
Automatisches Login für Shopify-Kunden
Der FastComments-Block unterstützt Single Sign-On (SSO), sodass Ihre Shopify-Kund:innen als sich selbst kommentieren können, ohne ein separates FastComments-Konto erstellen zu müssen.
Wie es funktioniert
Wenn ein Besucher, der in Ihrem Shop eingeloggt ist, eine Seite mit dem FastComments-Block öffnet:
- Der Block erkennt das Shopify-
customer-Objekt. - Er sendet den Namen und die E-Mail des Kunden über eine signierte App-Proxy-Anfrage an FastComments.
- FastComments erstellt oder findet einen Nutzer mit dem Schlüssel
shopify-{customerId}, sodass derselbe Kunde über Sitzungen und Neuinstallationen hinweg immer demselben FastComments-Nutzer zugeordnet wird. - Der Name des Besuchers wird bei seinen Kommentaren angezeigt. Er wird nicht erneut zur Anmeldung aufgefordert.
Wenn der Besucher nicht in den Shop eingeloggt ist, fällt der Block auf anonyme Kommentare zurück (oder auf den FastComments-Anmeldeablauf, abhängig von Ihrer Widget-Konfiguration).
SSO deaktivieren
SSO ist für jeden FastComments-Block standardmäßig aktiviert. Um es für einen bestimmten Block auszuschalten:
- Öffnen Sie den Shopify-Theme-Editor.
- Öffnen Sie die Vorlage, die den Block enthält, und klicken Sie auf den Block, um ihn auszuwählen.
- Deaktivieren Sie SSO.
- Klicken Sie auf Speichern.
Deaktivieren Sie SSO, wenn Sie möchten, dass Kommentierende eine separate Identität für die Konversation wählen können. Zum Beispiel eine interne Community-Seite, auf der Mitarbeitende unter einem anderen Anzeigenamen kommentieren.
Was FastComments erhält
Die für jeden Kunden gesendete SSO-Nutzlast enthält:
- Eine Benutzer-ID, die aus der Shopify-Kunden-ID abgeleitet ist (
shopify-{customerId}). - Die E-Mail des Kunden (wird zur Identifizierung des Nutzers verwendet; nicht öffentlich angezeigt).
- Den Anzeigenamen des Kunden (wird als Name des Kommentarautors verwendet).
Es werden keine Bestellhistorie-, Zahlungs- oder Adressdaten gesendet. Die Nutzlast wird serverseitig signiert; der Browser des Kunden sieht niemals Anmeldeinformationen.
Anmelde- und Abmeldelinks
Wenn SSO aktiviert ist, zeigen die Anmelde- und Abmeldelinks des Kommentar-Widgets auf /account/login und /account/logout, die standardmäßigen Shopify-Routen für Kundenkonten. Es ist nichts zu konfigurieren. Die Links funktionieren für jeden Shop, bei dem Kundenkonten aktiviert sind.
Bestehende Kommentare importieren
Wenn Sie bereits Kommentare zu Ihren Shopify-Blogbeiträgen haben und diese behalten möchten, importieren Sie sie in FastComments, bevor Sie die native Kommentarfunktion von Shopify deaktivieren.
Der Import muss ausgeführt werden, solange die nativen Shopify-Kommentare noch aktiv und sichtbar sind. Sobald Sie diese deaktivieren, kann FastComments sie nicht mehr lesen.
So starten Sie einen Import
- Stellen Sie sicher, dass die FastComments-App in Ihrem Shop installiert ist.
- Lassen Sie die nativen Shopify-Kommentare vorerst aktiviert.
- Öffnen Sie ein Support-Ticket und teilen Sie uns mit, welche Blogs importiert werden sollen.
Der Import dauert weniger als einen Tag.
Sobald Ihre vorhandenen Kommentare in FastComments sind, fügen Sie den FastComments-Block in Ihre Blog-Beitragsvorlage ein und entfernen oder deaktivieren Sie die nativen Shopify-Kommentare. Siehe Kommentare zu Blogbeiträgen und Produkten hinzufügen.
Wenn Sie die vorhandenen Kommentare nicht behalten müssen, können Sie diese Seite überspringen.
Anpassung
Farben, Schriftarten, Moderationsregeln, erlaubtes HTML und anonymes Kommentieren sind alle konfigurierbar, um dem Markenauftritt Ihres Shops zu entsprechen.
Öffnen Sie die FastComments-App in Ihrem Shopify-Admin und klicken Sie auf die Kachel Customize, um den Bildschirm zur Widget-Anpassung zu öffnen. Sie verwendet einen einmalig verwendbaren Login-Link, sodass Sie sich nicht separat anmelden müssen.
Für die vollständige Liste der Anpassungsoptionen siehe den Anpassungs- und Konfigurationsleitfaden.
Domain-Fehler
Wenn Sie FastComments aus dem Shopify App Store installiert haben, wird die Domain Ihres Shops automatisch zu den autorisierten Domains des Tenants hinzugefügt und Sie sollten keinen Domain-Fehler sehen. Diese Seite gilt, wenn Sie den manuellen Installationsweg gewählt haben oder wenn Ihr Storefront auf einer benutzerdefinierten Domain gehostet wird, die zum Zeitpunkt der App-Installation nicht bei Shopify registriert war.
Möglicherweise erhalten Sie einen Autorisierungsfehler, der wie folgt aussieht:
Das bedeutet, dass FastComments die Domain, auf der das Widget geladen wird, nicht als für Ihren Tenant autorisiert erkennt.
Um das zu beheben, fügen Sie die Domain zu Ihrem FastComments-Konto hinzu: Domains konfigurieren.
Manuelle Installation (Erweitert)
Wenn Sie die Shopify App Store app nicht installieren können, können Sie FastComments weiterhin hinzufügen, indem Sie Ihr Theme bearbeiten. Dieser Weg ist nützlich, wenn Sie einen FastComments-Tenant, den Sie bereits besitzen, anbinden möchten, oder wenn Sie auf einem Shopify-Storefront einbetten, wo die App keine Option ist.
Die Installation über die App ist der unterstützte Weg für die meisten Shops. Greifen Sie nur darauf zurück, wenn die App nicht passt.
Schritt 1: Deaktivieren Sie die nativen Kommentare von Shopify
In Ihrem Shopify-Admin, gehen Sie zu Blog posts > Manage blogs, öffnen Sie jeden Blog und stellen Sie im rechten Bereich Comments are disabled ein. Speichern.
Dies verhindert, dass die eingebaute Kommentarfunktion von Shopify neben FastComments angezeigt wird.
Schritt 2: Öffnen Sie die Blog-Theme-Vorlage
In Ihrem Shopify-Admin:
- Gehen Sie zu Online Store > Themes.
- Unter Ihrem aktuellen Theme klicken Sie auf Actions > Edit code.
- Öffnen Sie im Dateibrowser links Sections und klicken Sie auf
main-article.liquid.
Dies ist die Vorlage, die Shopify für einen einzelnen Blogartikel verwendet.
Schritt 3: Fügen Sie das FastComments-Snippet ein
Scrollen Sie ungefähr zu Zeile 100 von main-article.liquid, direkt nach dem schließenden </div> des Artikels. Fügen Sie das folgende Snippet ein:
Ersetzen Sie "demo" durch Ihre eigene Tenant ID von fastcomments.com/auth/my-account/api-secret. Klicken Sie auf Save.
Schritt 4: Autorisieren Sie Ihre Shop-Domain
Öffnen Sie einen Blogbeitrag in Ihrem Live-Shop. Wenn Sie anstelle des Kommentarwidgets eine Autorisierungsfehlermeldung sehen, muss FastComments wissen, dass Ihr Shop berechtigt ist, diesen Tenant zu verwenden. Siehe Domain Errors.
Hinzufügen von FastComments zu anderen Seiten
Dasselbe Snippet funktioniert in jeder Liquid-Vorlage, einschließlich Produktseiten, benutzerdefinierten Seiten und der Startseite. Fügen Sie es dort ein, wo Kommentare erscheinen sollen, und passen Sie urlId an, wenn Sie pro Seite einen stabilen Bezeichner möchten (z. B. urlId: "{{ product.id }}" in einer Produktvorlage).