Erste Schritte mit Shopify

Verbinden Sie Ihren Shopify-Shop, damit die KI und die Agenten von HelpStack Fragen zu Bestellungen, Sendungsverfolgung und Produkten beantworten und optional ein Live-Chat-Widget auf Ihrer Storefront anzeigen können.

Was Sie bekommen#

Keine technischen Kenntnisse erforderlich. Die folgenden Schritte dauern etwa 10–15 Minuten und erfordern nichts weiter, als sich durch ein paar Einstellungsseiten zu klicken.

Schritt 1 — Ihren Shop verbinden#

1. Gehen Sie in Ihrem HelpStack-Dashboard zu Einstellungen → Integrationen.
2. Suchen Sie die Shopify-Karte und klicken Sie auf Shopify verbinden.
3. Geben Sie die .myshopify.com-Domain Ihres Shops ein, zum Beispiel your-store.myshopify.com, und klicken Sie auf Verbinden.
4. Sie werden zu Shopify weitergeleitet. Klicken Sie auf Install (oder Approve), um HelpStack lesenden Zugriff auf Ihre Bestellungen, Kunden und Produkte zu gewähren.
5. Sie landen wieder in HelpStack mit einem grünen Verbunden-Status.

Das war's schon. Ab sofort sehen Agenten bei jeder Konversation ein Bestellungen-Panel in der Seitenleiste, und die KI kann Bestell- und Produktfragen beantworten.

Schritt 2 — Bestell- und Kundendaten freigeben (einmalig)#

Shopify verlangt eine separate Genehmigung, bevor eine App Bestell- und Kundendetails lesen darf. Bis das erledigt ist, antwortet die KI auf Bestellfragen mit „Zugriff eingeschränkt"; Produktfragen funktionieren auch ohne diese Genehmigung.

1. Öffnen Sie das Shopify-Partner-Dashboard unter dev.shopify.com und melden Sie sich an.
2. Klicken Sie in der linken Seitenleiste auf Apps und wählen Sie die HelpStack-App aus.
3. Gehen Sie zu API access (oder App setup → API access).
4. Suchen Sie Protected customer data access und klicken Sie, um es zu öffnen.
5. Aktivieren Sie das Order-Objekt und markieren Sie Name, Email und Phone.
6. Schreiben Sie als Grund: customer service — agents look up order status for shoppers.
7. Klicken Sie auf Save und warten Sie auf die Genehmigung von Shopify (für neue Apps in der Entwicklung normalerweise sofort).

Das machen Sie nur einmal. Die Berechtigung gilt auf App-Ebene und bleibt über Updates hinweg bestehen.

Schritt 3 — Das Chat-Widget auf Ihrer Storefront anzeigen (optional)#

Dieser Schritt fügt eine Chat-Blase zu Ihrem Shopify-Shop hinzu, damit Kunden Fragen stellen können, ohne die Seite zu verlassen. Überspringen Sie diesen Schritt, wenn die KI nur Fragen beantworten soll, die über andere Kanäle eingehen (E-Mail, Instagram und so weiter).

3a — Das Widget in HelpStack aktivieren

1. Gehen Sie zu Einstellungen → Integrationen und öffnen Sie den Bereich Storefront-Widget.
2. Aktivieren Sie den Schalter Storefront-Widget aktivieren.
3. Wählen Sie unter Standardkanal den Website-Chat-Kanal aus, den Sie verwenden möchten. (Legen Sie zuerst einen unter Einstellungen → Kanäle an, falls Sie das noch nicht getan haben.)
4. Optional können Sie sprachspezifische Zeilen hinzufügen: Kunden, deren Browser auf diese Sprache eingestellt ist, werden zu einem anderen Kanal geleitet. Nicht zugeordnete Sprachen verwenden den Standardkanal.
5. Klicken Sie auf Speichern.

3b — Das Widget zu Ihrem Theme hinzufügen

Wählen Sie eine der beiden folgenden Methoden:

Option A — App embed (empfohlen, kein Code)

Mit der Methode App embed können Sie das Widget mit einem einzigen Klick im Shopify-Theme-Editor ein- und ausschalten. Es sind keine Code-Änderungen nötig. Dies funktioniert mit allen Online Store 2.0-Themes.

1. Gehen Sie in Ihrem Shopify-Adminbereich zu Online Store → Themes.

2. Klicken Sie neben Ihrem aktiven Theme auf das Stift-Symbol (Edit) oder auf Customize.

   

3. Suchen Sie im sich öffnenden Theme-Editor in der linken Seitenleiste nach dem Bereich App embeds (Puzzle-Symbol, weiter unten).

4. Suchen Sie in der Liste HelpStack Chat und schalten Sie es auf ON.

   

5. Klicken Sie oben rechts im Theme-Editor auf Save.

Die Chat-Blase erscheint sofort auf Ihrer Storefront.

Option B — Manuelles Snippet

Verwenden Sie diese Methode, wenn Ihr Theme keine App embeds unterstützt (ältere Debut- oder Brooklyn-Themes).

1. Gehen Sie in HelpStack zu Einstellungen → Integrationen und kopieren Sie das Snippet, das im Bereich Storefront-Widget angezeigt wird. Es sieht so aus:

   <script src="https://helpstack.eu/api/shopify/storefront-widget.js?shop=your-store.myshopify.com" async></script>
   

2. Gehen Sie in Ihrem Shopify-Adminbereich zu Online Store → Themes → Edit code.

3. Öffnen Sie theme.liquid (im Ordner Layout).

4. Fügen Sie das Snippet direkt vor dem schließenden </body>-Tag ein.

5. Klicken Sie auf Save.

Problembehandlung#

Verwandte Themen#

• Widget-Einbettung
• Benutzerdefinierte Agent-Tools
• Erste Schritte mit WooCommerce
• Kanal-Leitfaden