Dieser Artikel ist auch verfügbar in:

📅 Wie man den Terminbuchungskalender in Ihrem Shop einbettet

ℹ️ Note: Dieser Artikel wurde automatisch mit AI übersetzt und kann Ungenauigkeiten enthalten. Wenn etwas falsch aussieht, kontaktieren Sie bitte unser Support-Team.


Hoppy Appointments gibt Ihnen zwei Möglichkeiten, den Buchungskalender auf Ihrer Storefront anzuzeigen:


  1. Automatischer Book Now Button Ersetzt die Schaltfläche zum Warenkorb hinzufügen auf Produktseiten, die mit Ihren Diensten verbunden sind.
  2. Block manueller Terminkalender - Platzieren Sie eine Buchungskarte oder einen Inline-Kalender auf einer beliebigen Seite mit ShopifyTheme Editor.


Dieser Leitfaden führt Sie durch beide Methoden, so dass Kunden direkt in Ihrem Shop buchen können.



⚠️ Bevor Sie beginnen


Bevor Sie den Kalender einbetten, stellen Sie sicher, dass Sie:


  • Die Hoppy Appointments App installiert auf Ihrem Shopify Lager
  • mindestens Ein Service erstellt und verbunden mit einem Shopify Produkt
  • Eine klare Vorstellung davon, ob Sie einen Popup-Kalender oder einen Inline-Kalender auf der Seite wünschen


Wenn Sie noch keinen Dienst erstellt haben, beginnen Sie mit Wie man Terminbuchungsdienste einrichtet zuerst.



🛠️ Schritt 1 - Aktivieren Sie die App für Terminbuchungen Embed


Das App-Embed ist der Hauptschalter, mit dem das Buchungs-Widget funktioniert. Es muss sowohl für die automatische als auch für die manuelle Einbettung aktiviert sein.


Option A: Aus dem Inneren der App aktivieren


  1. Offen Hoppy Appointments App.
  2. In der Armaturenbrett, Finden Sie die App-Status Karte
  3. Klicken Aktivieren


Dies öffnet Ihre Shopify Theme-Editor direkt zum App-Embed-Bereich.


Option B: manuell aktivieren von Shopify Admin


  1. Gehen Sie zu Shopify Admin → Online Store → Themes
  2. Klicken Customize über dein Live-Thema
  3. Klicken Sie App Embeds Icon oben
  4. Finde Terminbuchungen
  5. Umschalten IN
  6. Klicken Sparen


Einmal aktiviert, ist App-Status Karte innen Hoppy Appointments Shows Aktiv.



🛠️ Schritt 2 - Stellen Sie sicher, dass Ihr Service aktiv und gespeichert ist


Das Buchungs-Widget wird nur für Dienste angezeigt, die gespeichert und eingeschaltet sind.


  1. In der App gehen Sie zu Meine Dienste
  2. Überprüfen Sie das Abzeichen neben Ihrem Service:
    • Aktiv ✅ Der Service ist live
    • inaktiv — öffnen Sie die Mehr Menü und Klick Einschalten
    • Archiviert — öffnen Sie die Mehr Menü und Klick Unarchiv, dann schalten Sie es ein
  4. Öffnen Sie den Dienst und klicken Sie Sparen


Das Speichern synchronisiert Ihren Service erneut mit der Storefront. Dies ist wichtig, wenn sich Produktvarianten, Preise oder Verfügbarkeit ändern.



🛠️ Schritt 3 - Überprüfen Sie die Schaltfläche Buch Jetzt auf Ihrer Produktseite


Sobald die App-Einbettung aktiv ist und der Dienst gespeichert ist, wird die mit Ihrem Dienst verbundene Produktseite automatisch angezeigt Jetzt buchen Knopf statt Hinzufügen zum Warenkorb.


  1. Öffnen Sie Ihre Live Storefront
  2. Gehen Sie zu dem Produkt, das mit Ihrem Service verbunden ist
  3. Bestätigen Sie Jetzt buchen Button erscheint
  4. Klicken Sie darauf, um das Buchungspopup zu öffnen


Wenn Ihr Produkt mehrere Varianten hat, wechseln Sie zwischen ihnen. Die Schaltfläche Jetzt buchen wird nur für Varianten angezeigt, die Teil des Dienstes sind.


💡 Die Mengenauswahl ist für buchbare Produkte deaktiviert, da jede Buchung für einen Slot gleichzeitig erfolgt.



🛠️ Schritt 4 — Fügen Sie den Terminkalenderblock manuell hinzu (optional)


Verwenden Sie diese Methode, wenn:


  • Ihr Theme verwendet einen Page Builder oder ein benutzerdefiniertes Produktformular
  • Sie möchten den Kalender auf einer Seite, die keine Produktseite ist
  • Sie möchten eine gestylte Buchungskarte mit Servicedetails
  • Sie möchten den vollen Kalender direkt auf der Seite eingebettet haben


Hinzufügen des Blocks


  1. Gehen Sie zu Shopify Admin → Online Store → Themes
  2. Klicken Customize über dein Live-Thema
  3. Navigieren Sie zu der Seite, auf der Sie den Kalender haben möchten
  4. Klicken Block hinzufügen oder Abschnitt hinzufügen
  5. Finde Apps → Terminkalender
  6. Paste dein Service-ID
  7. Wählen Sie eine Einbettungsmodus


Finden Sie Ihre Service ID


  • Öffnen Sie die Service-Editing-Seite - die Service-ID wird oben in der Nähe angezeigt
  • Oder gehen Sie Meine Dienste → Mehr → Copy Service ID


Wählen Sie einen Embed-Modus


  • Modal — zeigt eine Buchungskarte mit dem Servicebild, Titel, Beschreibung, Preis und Jetzt buchen Button, der den Kalender in einem Popup öffnet
  • Direkt - bettet den vollen Buchungskalender direkt auf der Seite ein, damit Kunden Daten und Uhrzeiten auswählen können, ohne ein Popup zu öffnen


Grundlegendes Styling konfigurieren


Mit dem Block können Sie anpassen:


  • Hintergrundfarbe
  • Titelfarbe und Schriftgröße
  • Preisfarbe und Schriftgröße
  • Option Label Farbe und Schriftgröße
  • Book Now Button Farbe, Hintergrund und Schriftgröße
  • View Details Link Farbe, Hintergrund, Schriftgröße und Sichtbarkeit


Für tiefere Styling-Optionen, siehe Terminbuchungen - Design & Styling-Optionen.


Speichern Sie das Thema


Klicken Sparen Im Theme-Editor sehen Sie sich dann die Live-Seite an.


⚠️ Der Terminkalenderblock erfordert weiterhin die Terminbuchungen App Embed ermöglicht werden. Ist dies nicht der Fall, zeigt der Block eine Meldung "App Embed Not Enabled" an.



👀 Was Kunden sehen


Automatischer Book Now Button


  1. Der Kunde besucht die Produktseite
  2. Sie sehen einen Jetzt buchen Button statt Add to Cart
  3. Sie klicken darauf und ein Popup-Kalender öffnet sich
  4. Sie wählen ein Datum, eine Uhrzeit aus und füllen das Buchungsformular aus
  5. Wenn die Zahlung aktiviert ist, wird das Produkt zum Warenkorb hinzugefügt und sie checken aus
  6. Wenn die Zahlung nicht aktiviert ist, wird die Buchung sofort bestätigt


Manueller Modalblock


  1. Der Kunde besucht die Seite, auf der Sie den Block platziert haben
  2. Sie sehen eine Karte mit Servicedetails, Preis und Varianten- oder Daueroptionen
  3. Sie klicken Jetzt buchen Um den Popup-Kalender zu öffnen
  4. Sie vervollständigen den Buchungsfluss


Manuelles Direktblock


  1. Der Kunde besucht die Seite, auf der Sie den Block platziert haben
  2. Der volle Kalender lädt inline, während sie in die Ansicht scrollen
  3. Sie wählen ein Datum und eine Uhrzeit direkt auf der Seite
  4. Sie füllen das Buchungsformular und den Checkout aus



⚠️ Wichtige Hinweise


  • App Embed ist für beide Methoden erforderlich. Auch wenn Sie den manuellen Block verwenden, muss das Appointment Bookings App-Embed eingeschaltet sein.
  • Verwenden sie ihr live, veröffentlichtes thema. Der Kalender erscheint nicht auf Entwürfen oder unveröffentlichten Themen.
  • Ein aktiver Service pro Produktvariante. Wenn eine Variante mit mehr als einem aktiven Dienst verbunden ist, kann das Verhalten unvorhersehbar sein.
  • Sparen Sie nach jedem Wechsel. Produktvarianten, Preise, Verfügbarkeit und Serviceeinstellungen erreichen die Storefront erst, nachdem Sie auf Speichern klicken.
  • Der Book Now Button verbirgt das Original Add to Cart und dynamische Checkout Buttons Nur für buchbare Varianten. Andere Produkte bleiben unverändert.
  • Mengenwähler sind deaktiviert für buchbare Produkte, da Buchungen Einzelplatzkäufe sind.



🐞 Fehlerbehebung


Der Book Now Button erscheint nicht


  • Bestätigen Sie App-Status Shows Aktiv
  • Stellen Sie sicher, dass der Dienst gespeichert und aktiv ist
  • Überprüfen Sie, ob Sie die richtige Produktseite und Variante anzeigen
  • Stellen Sie sicher, dass Sie das Live-Thema testen, keinen Entwurf
  • Feste Aktualisierung der Seite oder Test in einem Inkognito-Fenster


Der manuelle Block zeigt "App Embed Not Enabled"


Gehen Sie zurück zu Schritt 1 und aktivieren Sie die App für Terminbuchungen.


Der manuelle Block zeigt "Appointment Service Konfiguration nicht gefunden"


Überprüfen Sie die Service-ID Sie klebten. Sie können es wieder kopieren von Meine Dienste → Mehr → Copy Service ID.


Der Kalender öffnet sich, aber es sind keine Termine verfügbar


Überprüfen Sie Ihren Service Verfügbarkeit Tab. Stellen Sie sicher, dass Arbeitstage aktiviert sind, die Voraussicht und die Mindestterminplanung angemessen sind und blockierte Termine nicht alles abdecken.


Für eine vollständige Fehlersuche Walkthrough, siehe Terminbuchungskalender wird nicht in meinem Shop angezeigt [Fixed].



🎉 Endergebnis


Einmal konfiguriert:


✅ Die Terminbuchung App Einbettung ist in Ihrem Theme aktiviert
✅ Ihr Service ist gespeichert, aktiv und mit dem richtigen Produkt verbunden
✅ Die Jetzt buchen Button erscheint automatisch auf der Produktseite
✅ Optional wird ein Terminkalenderblock auf jeder von Ihnen gewählten Seite platziert.
✅ Kunden können direkt von Ihrer Storefront buchen



📚 Verwandte Artikel


  • Wie man Terminbuchungsdienste einrichtet
  • Terminbuchungskalender wird nicht in meinem Shop angezeigt [Fixed]
  • Terminbuchungen - Design & Styling-Optionen
  • So legen Sie benutzerdefiniertes CSS für die App für Terminbuchungen fest
  • So richten Sie den Floating Action Button wie Kalender für Terminbuchungen ein
  • Terminbuchungen - Alle Zahlungsoptionen erklärt
  • Terminbuchungen - Arten von Buchungen erklärt

Aktualisiert am: 10/09/2026

War dieser Beitrag hilfreich?

Teilen Sie Ihr Feedback mit

Stornieren

Danke!