Zum Inhalt springen

Shopify

Zuletzt bearbeitet:

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

Zeit zum Abschluss: ~2 Minuten


Es gibt zwei Möglichkeiten, dies zu tun:

Gehen Sie zu Quickchat AI AppIhre WebsiteInstall Tab → klicken Sie auf Embed in your Shopify Store.

Dies öffnet den Theme Editor Ihres Stores direkt auf der Seite, wo die App-Einbettung aktiviert werden kann.

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

Screenshot: Themes-Seite mit dem hervorgehobenen Customize Button


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

Screenshot: App embeds Panel

Finden Sie Quickchat AI Widget und schalten Sie es ein.

Screenshot: Quickchat AI im Theme Editor aktivieren

Klicken Sie dann auf Save (oben rechts).

Screenshot: Save Button im Theme Editor


Ö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 🎉


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.

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

Theme-Code bearbeiten

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

theme.liquid öffnen

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

theme.liquid öffnen

  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>
window.__quickchat = {
host: "app.quickchat.ai",
init: "YOUR_AI_ID_HERE",
};
</script>