Shopify

In dieser Anleitung zeigen wir Ihnen, wie Sie das Quickchat AI Widget zu Ihrem Shopify Store hinzufügen.

Optionale Prüfungen mit Beispieldaten

• Ein Widget-Snippet prüfen. Prüfen Sie eingefügten Code anhand der angegebenen Scenario ID. Ihre Website wird nicht abgerufen.

• Bereitstellungsmethoden vergleichen. Vergleichen Sie Ihre angegebenen Kanäle, Website-Zugriffsrechte und benötigten Funktionen mit den Einrichtungsoptionen von Quickchat AI. Ihre Website und Ihr Konto werden nicht geprüft.

Die Formulare sind auf Englisch.

In einem kompatiblen Browser sind diese Prüfungen auch als Website-Tools verfügbar. Die Links öffnen die üblichen Formulare.

Was Sie benötigen

• Einen Shopify Store
• Die Shopping Agent by Quickchat AI App aus dem Shopify App Marketplace installiert (falls Sie sie nicht installieren möchten und sie lieber manuell verbinden möchten, scrollen Sie zum zweiten Teil des Tutorials)
• Benutzerberechtigung zum Bearbeiten von Themes

Zeit zum Abschluss: ~2 Minuten

---

Was sind Shopping AI Agents?

In diesem kurzen Video lernen Sie die Grundlagen: wie Sie Ihren Shopify Store mit Quickchat AI und Shopify MCP in einen Shopping AI Agent verwandeln.

Play

Schritt 1: Öffnen Sie Ihren Theme Editor

Es gibt zwei Möglichkeiten, dies zu tun:

Option A (empfohlen): von der Quickchat AI App

Klicken Sie auf der Startseite der Quickchat AI App auf Widget im Shopify Theme Editor aktivieren.

Dies verlinkt direkt zum Shopify Theme Editor Ihres Stores im App embeds Kontext, wo die App-Einbettung aktiviert werden kann.

Hinweis

Widget im Shopify Theme Editor aktivieren erscheint nur für Stores, die bereits über die Shopify App (OAuth) mit Quickchat AI verbunden sind.

Option B: vom Shopify Admin

Gehen Sie zu Shopify Admin → Online Store → Themes → klicken Sie auf Ihrem aktuellen Theme auf Customize.

---

Schritt 2: App-Einbettung aktivieren

Öffnen Sie im Theme Editor die linke Seitenleiste und gehen Sie zu App embeds.

Finden Sie Quickchat AI Widget und schalten Sie es ein.

Klicken Sie dann auf Save (oben rechts).

---

Schritt 3: Bestätigen Sie auf Ihrem Storefront

Öffnen Sie Ihr Storefront (Vorschau oder Live-Site) und suchen Sie nach der Quickchat AI Chat-Blase in der unteren rechten Ecke der Seite.

Das war’s!

Quickchat AI Agent ist live auf dem Shopify Store 🎉

---

Wie man manuell ein Widget-Script hinzufügt

Falls Sie unsere Shopify App nicht installieren möchten, weil Sie bereits einen AI Agent in der Quickchat AI App erstellt haben, können Sie ein einfaches Script hinzufügen, das es in Ihrem Shopify Store anzeigt.

Haben Sie Ihre KI bereits mit Shopify-Daten verbunden?

Um Ihren AI Agent mit den Daten Ihres Shopify Stores wie Produktkatalog und Warenkorb zu verbinden, gehen Sie folgendermaßen vor:

1. Fügen Sie Ihren Store-Link auf dieser Seite ein: quickchat.ai/shopify
2. Beanspruchen Sie ihn, passen Sie ihn an und betten Sie ihn auf Ihrer Website ein

1. Öffnen Sie den Theme-Code-Editor

1. Gehen Sie zu Ihrem Shopify Admin Panel.
2. Klicken Sie im linken Menü auf Online Store → Themes.

3. Im Abschnitt “Current theme” klicken Sie auf die drei Punkte (⋯) neben dem Customize Button.
4. Wählen Sie Edit code aus dem Dropdown.

2. Finden Sie theme.liquid

1. Erweitern Sie im Code-Editor den layout Ordner links.
2. Klicken Sie auf theme.liquid, um die Hauptlayout-Datei Ihres Themes zu öffnen.

3. Fügen Sie das Script ein

1. Navigieren Sie in der Quickchat App zu Your Website → Install.
2. Kopieren Sie das generierte Script.
3. Fügen Sie es direkt über dem </body> Tag am Ende der theme.liquid Datei ein.

<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("init", "YOUR_AI_ID_HERE");
</script>