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

Möchten Sie, dass Kunden von überall in Ihrem Geschäft buchen können - nicht nur von der Produktseite? Ein Floating-Action-Button funktioniert wie das Calendly-Widget: Ein kleiner "Book Now"-Button bleibt in der Ecke jeder Seite fest, bereit, Ihren Buchungsmodal mit einem Klick zu öffnen.

Hoppy Appointments Sie können diese Schaltfläche pro Dienst hinzufügen, ihren Text und ihre Farben anpassen und auswählen, wo sie auf dem Bildschirm angezeigt wird.

Dieser Guide führt Sie durch die Einrichtung.

⚠️ Bevor Sie beginnen

Bevor Sie den Floating Action Button einrichten, stellen Sie sicher, dass Sie:

• Die Hoppy Appointments App installiert auf Ihrem Shopify Lager
• Mindestens ein bereits erstellter aktiver Dienst
• Die Hoppy Appointments App Embed In Ihrem Theme aktiviert

💡 Der Floating-Button erscheint nur auf Seiten, auf denen das App-Embed aktiv ist. Wenn Sie das Embed noch nicht aktiviert haben, gehen Sie zu Shopify Admin → Online Store → Themes → Customize → App Embeds und drehen sich auf die Hoppy Appointments Einbetten.

🛠️ Schritt 1 - Öffnen Sie den allgemeinen Tab des Dienstes

Der Floating Action Button ist pro Dienst konfiguriert, innerhalb des Generalmajor Tab - nicht der Design-Tab.

1. Offen Hoppy Appointments App.
2. Gehen Sie zu Dienstleistungen
3. Klicken Sie auf den Dienst, dem Sie den Button hinzufügen möchten
4. Klicken Sie Generalmajor Spitze
5. Scrollen Sie nach unten zum Floating Action Button Karte

🛠️ Schritt 2 - Aktivieren Sie den Floating Action Button

Innerhalb der Floating Action Button Karte:

1. Einschalten des Floating Button aktivieren :

Einmal aktiviert, werden die Konfigurationsfelder unter dem Umschalter angezeigt.

🛠️ Schritt 3 — Konfigurieren Sie den Button

Richten Sie den Button so ein, dass er dem Stil und dem Buchungsfluss Ihres Shops entspricht.

Knopftext

Geben Sie das Label ein, das Kunden auf dem Button sehen. Der Standardtext ist Jetzt buchen, aber Sie können alles verwenden, was zu Ihrer Marke passt - zum Beispiel:

• Buchen Sie einen Anruf
• Terminbestellung
• Reservieren Sie einen Spot

Position

Wählen Sie, wo der Button auf dem Bildschirm erscheint:

• Rechts unten rechts - erscheint in der unteren rechten Ecke
• Unten links - erscheint in der unteren linken Ecke
• Unteres Zentrum - erscheint unten zentriert

Hintergrundfarbe

Wählen Sie den Button Hintergrundfarbe. Der Default ist schwarz.

Textfarbe

Wählen Sie die Button Label Farbe. Der Standard ist weiß.

💡 Wählen Sie Farben mit starkem Kontrast, so dass der Button vor Ihrem Shop-Hintergrund leicht zu lesen ist.

💾 Schritt 4 — Speichern und Vorschauen

1. Klicken Sparen Ganz oben auf der Serviceseite
2. Warten Sie auf die Bestätigungsnachricht
3. Besuchen Sie Ihre Storefront und überprüfen Sie verschiedene Seiten - Haus, Produkt, Sammlung, Warenkorb usw.

Der Button sollte in der gewählten Ecke fixiert bleiben und beim Klicken den Buchungsmodal öffnen.

⚠️ Wichtige Hinweise

• Einstellung je Dienstzeit Jeder Dienst hat seinen eigenen Floating Button. Konfigurieren Sie es separat für jeden Dienst, auf dem Sie es anzeigen möchten.
• erscheint auf allen Seiten — einmal aktiviert, zeigt der Button auf jeder Seite an, wo Hoppy Appointments App Embed ist aktiv. Es gibt keine seitenspezifischen Sichtbarkeitsregeln.
• Mehrere Dienste = mehrere Buttons Wenn Sie den Floating-Button für mehrere Dienste aktivieren, wird jeder seinen eigenen Button rendern. Für eine sauberere Erfahrung, aktivieren Sie es nur auf dem Service, den Sie am meisten bewerben möchten.
• Öffnet das Buchungsmodal Ein Klick auf die Schaltfläche öffnet den Buchungsfluss für diesen Service direkt, ohne die aktuelle Seite zu verlassen.
• Übersetzungen erfordern erweiterte Konfiguration Wenn Sie möchten, dass sich der Button-Text pro Sprache ändert, aktivieren Sie Verwenden von Advanced Configuration auf den Dienst und setzen Sie die Übersetzung unter Einstellungen → Übersetzungen → Service ÜbersetzungenSiehe den Übersetzungsführer für Details.

🐞 Fehlerbehebung

Der Button wird nicht in meinem Shop angezeigt

1. Stellen Sie sicher Floating Button aktivieren ist für den Dienst eingeschaltet
2. Stellen Sie sicher, dass Sie geklickt haben Sparen
3. Bestätigen Sie Hoppy Appointments App Embed ist in Ihrem Theme aktiviert
4. Löschen Sie Ihren Browser-Cache oder testen Sie in einem Inkognito-Fenster
5. Überprüfen Sie, ob der Dienst aktiv und ordnungsgemäß mit einem Produkt verbunden ist

Der Button Text ist falsch oder nicht übersetzt

• Wenn Verwenden von Advanced Configuration ist ausgeschaltet, der Button verwendet den Text aus dem Knopftext Feld direkt.
• Wenn Verwenden von Advanced Configuration ist eingeschaltet, der Button Text wird aus Einstellungen → Übersetzungen → Service Übersetzungen → Floating Button Label.

Die Button-Farbe sieht nicht richtig aus

Verwenden Sie die Farbauswahl in der FAB-Karte für das grundlegende Styling. Für erweiterte visuelle Änderungen können Sie die .futureblink-fab Klasse mit Custom CSS. Siehe den Custom CSS Guide für Details.

🎉 Endergebnis

Einmal konfiguriert:

✅ Ein schwebender "Book Now" Button erscheint auf jeder Seite Ihres Shops
✅ Kunden können von überall aus buchen, ohne zu einer Produktseite zu navigieren
✅ Die Schaltfläche öffnet sofort das Buchungsmodal Ihres Dienstes
✅ Text, Position und Farben passen zu Ihrer Marke

📚 Verwandte Artikel

• Terminbuchungen - Design & Styling-Optionen
• So legen Sie benutzerdefiniertes CSS für die App für Terminbuchungen fest
• Terminbuchungen — Übersetzung
• Wie man Terminbuchungsdienste einrichtet

Aktualisiert am: 10/09/2026