So Fügen Sie Einen Kostenlosen WhatsApp-Chat-Button zu Shopify Hinzu (Ohne App)

Kurze Antwort: Erstellen Sie ein kostenloses WAButton-Widget, kopieren Sie dessen Einbettungscode und fügen Sie ihn direkt vor dem schließenden </body>-Tag in der Datei theme.liquid Ihres Shopify-Themes ein. Sie benötigen weder eine App noch Programmierkenntnisse.

Ein WhatsApp-Button gibt Käufern die Möglichkeit, vor dem Kauf Fragen zu Größen, Lieferzeiten oder zum Checkout zu stellen und eine Person zu fragen, statt ein Formular auszufüllen.

Viele Shopify-Chat-Apps verlangen eine monatliche Gebühr und fügen Ihrem Shop eigene Skripte hinzu. Wenn Sie nur einen Button benötigen, können Sie stattdessen einen in Ihr Theme einfügen.

Diese Anleitung zeigt Ihnen, wie Sie einen WhatsApp-Chat-Button zu Ihrem Shopify-Theme hinzufügen, kostenlos und ohne App.

---

Wie sich WhatsApp von einem Live-Chat-Widget unterscheidet

Bei einem Live-Chat-Widget lebt die Konversation normalerweise im Browser-Tab. Wenn der Besucher es schließt, bevor Ihr Team antwortet, sieht er die Antwort möglicherweise nie.

Ein WhatsApp-Click-to-Chat-Button funktioniert in zweierlei Hinsicht anders:

1. Die Konversation bleibt auf ihrem Telefon: Der Chat wechselt in die eigene WhatsApp-App des Käufers. Wenn Ihr Team antwortet, erhält der Käufer eine Benachrichtigung auf seinem Telefon.
2. Die erste Nachricht kann für sie geschrieben werden: Sie können die Nachricht so festlegen, dass WhatsApp beim Tippen auf den Button mit dem bereits benannten Produkt geöffnet wird (z. B. „Hallo, ich habe eine Frage zu [Produktname]“ ).

Wenn Sie auch auf anderen Plattformen verkaufen, schauen Sie in unser CMS-Integrationsverzeichnis für Schritt-für-Schritt-Anleitungen zu WordPress, WooCommerce, Webflow und Squarespace.

---

Schritt-für-Schritt: Hinzufügen des WhatsApp-Buttons zu Ihrem Shopify-Theme

Sie benötigen keine Programmierkenntnisse, um WAButton zu Ihrem Shopify-Theme hinzuzufügen. Das Snippet ist eigenständig und hat keine Bibliotheksabhängigkeiten.

Schritt 1: Erstellen Sie Ihr Widget im WAButton-Dashboard

1. Erstellen Sie ein kostenloses WAButton-Konto oder melden Sie sich in Ihrem Dashboard an.
2. Erstellen Sie ein Widget und geben Sie Ihre WhatsApp-Business-Telefonnummer im internationalen E.164-Format ein (z. B. +14155552671 ohne Leerzeichen, Bindestriche oder führende Nullen).
3. Legen Sie eine ansprechende vorausgefüllte Nachricht fest, z. B.:

   Hallo! Ich schaue mir Ihren Shop an und habe eine Frage zu meiner Bestellung.
   

4. Öffnen Sie im Widget-Editor Share & install > Website install und kopieren Sie Ihren Einbettungscode. Er enthält bereits Ihre Widget-ID und funktioniert daher, sobald Sie ihn einfügen.

Schritt 2: Öffnen Sie den Shopify-Theme-Code-Editor

1. Melden Sie sich im Shopify Admin-Dashboard an.
2. Navigieren Sie in der linken Navigationsleiste zu Online-Shop > Themes.
3. Suchen Sie Ihr aktuell aktives Theme (z. B. Dawn, Sense, Refresh oder Impact).
4. Klicken Sie auf die Schaltfläche mit den drei Punkten (...) neben Anpassen und wählen Sie Code bearbeiten.

Schritt 3: Fügen Sie den Einbettungscode in theme.liquid ein

1. Öffnen Sie in der Dateiliste links den Ordner Layout und klicken Sie auf theme.liquid.
2. Scrollen Sie ganz nach unten, bis Sie das schließende </body>-Tag finden.
3. Fügen Sie direkt vor dem </body>-Tag Ihren WAButton-Einbettungscode ein:

<!-- WAButton WhatsApp Widget -->
<script src="https://widget.wabutton.app/v1.js" data-widget-id="YOUR_WIDGET_ID" async></script>
<!-- End WAButton WhatsApp Widget -->

4. Klicken Sie oben rechts auf Speichern.

Das war's! Besuchen Sie die URL Ihres Live-Shops auf Desktop und Mobilgerät, um das Widget zu testen. Beim Klick wird WhatsApp Web im Desktop-Browser geöffnet oder die native WhatsApp-App auf Smartphones gestartet.

---

Erweitert: Hinzufügen eines WhatsApp-Bestellformular-Buttons zu Produktseiten

Wenn Sie einen Boutique-Shop, eine Custom-Apparel-Marke oder einen Großhandelskatalog betreiben, möchten Sie vielleicht, dass Kunden Bestellungen direkt über WhatsApp aufgeben, anstatt den Standard-Checkout zu durchlaufen.

Mit unserem kostenlosen WhatsApp-Bestellformular-Generator können Sie strukturierte Bestellanfragen erstellen, die automatisch ausgefüllt werden:

• Produkt-SKU und Titel
• Ausgewählte Variante (Größe, Farbe, Material)
• Lieferadresse und Postleitzahl
• Bevorzugte Zahlungsmethode (Nachnahme, Überweisung, Stripe)

Das kann für Märkte geeignet sein, in denen Ihre Kunden bereits erwarten, über WhatsApp zu bestellen.

---

Warum ein kleines Skript wichtig ist

Core Web Vitals messen, wie eine Seite lädt und wie stabil sie bleibt, einschließlich Largest Contentful Paint (LCP) und Cumulative Layout Shift (CLS). Google empfiehlt, auf gute Werte zu achten.

Chat-Apps von Drittanbietern können auf jeder Seite ihre eigenen Skripte, Schriften und Stylesheets laden, was den Browser zusätzlich belastet.

WAButton hält seinen Fußabdruck klein:

• Keine Abhängigkeiten: Einfaches JavaScript und SVG-Symbole.
• Asynchrones Laden (async): Das Skript lädt parallel und blockiert nicht das Rendern Ihrer Produktbilder und Texte.
• Kein Layout-Shift durch den Button: Er schwebt an einer festen Position, sodass Ihre Seite beim Laden nicht springt.

Lesen Sie unseren speziellen Shopify-Integrationsleitfaden für weitere Konfigurationstipps und um Button-Klicks an Google Analytics 4 und Meta Pixel zu senden.

---

Häufig gestellte Fragen

Kann ich den WhatsApp-Button nur während der Geschäftszeiten anzeigen?

Ja. Sie können geplante Sichtbarkeitsregeln konfigurieren oder automatisierte Abwesenheitsnachrichten mit unserem kostenlosen WhatsApp-Abwesenheitsnachricht-Generator anpassen, um Erwartungen zu setzen, wenn Ihr Team offline ist.

Funktioniert das auf allen Shopify-Themes?

Ja. Der Einbettungscode ist standardkonformes HTML5 und funktioniert in allen Shopify Online Store 2.0-Themes (Dawn, Refresh, Craft, Studio, Publisher) sowie in älteren Vintage-Themes.

Benötige ich ein WhatsApp-Business-API-Konto?

Nein. WAButton funktioniert mit normalen WhatsApp-Personennummern, WhatsApp-Business-App-Konten und offiziellen WhatsApp-Cloud-API-Nummern.

---

Möchten Sie weitere Möglichkeiten, WhatsApp in Ihrem Shop zu nutzen? Lesen Sie WhatsApp für Online-Shops oder probieren Sie unseren kostenlosen WhatsApp-Link-Generator.

---

Quellen

• Core Web Vitals und Google-Suchergebnisse verstehen, Google Search Central
• So verwenden Sie Click-to-Chat, WhatsApp-Hilfecenter