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

Hoppy Appointments verfügt über ein umfassendes Design-System, damit dein Buchungs-Widget, deine Erfolgsseiten, die Seite zum Verschieben von Terminen und die Stornierungsseite nahtlos in deinen Shop passen.

Du kannst Farben, Schriften, Buttons, Hintergründe steuern und sogar eigene Bilder hochladen. Alles wird über zwei Stellen verwaltet:

• Settings → Design → Shop-weite Standardwerte, die für jeden Service gelten
• Service → Design tab → Pro-Service-Überschreibungen, wenn ein Service anders aussehen soll

Diese Anleitung erklärt jede Design-Einstellung, wann sie angezeigt wird und wie sie sich auf die Storefront auswirkt.

⚠️ Bevor du beginnst

Design-Einstellungen werden hier verwaltet:

• Hoppy Appointments → Settings → Default Design für globale Standardwerte
• Hoppy Appointments → Services → [your service] → Design für Überschreibungen pro Service

Bevor du das Widget gestaltest, stelle sicher, dass:

• Die Hoppy Appointments App installiert ist
• Du mindestens einen Service erstellt hast
• Das Appointment Bookings App-Embed in deinem Shopify-Theme aktiviert ist

ℹ️ Ohne aktiviertes App-Embed sehen Kund:innen das Buchungs-Widget überhaupt nicht – egal, wie schön deine Design-Einstellungen sind.

Sieh dir die Anleitung Calendar Not Showing an, wenn du Hilfe beim Aktivieren des Embeds benötigst.

🌐 Globales vs. pro-Service-Design

Global Design (Settings → Design)

Das ist dein shop-weiter Standard. Jeder neue Service verwendet automatisch diese Farben, Schriften und Stile, sofern du nichts anderes festlegst.

Verwende dies, wenn alle buchbaren Services ein einheitliches Erscheinungsbild haben sollen.

Per-Service Design (Service → Design tab)

Jeder Service verfügt über ein Kontrollkästchen mit der Beschriftung:

Do not Follow Default Theme Settings

• Unchecked → Der Service verwendet das globale Design. Alle Farb-/Schriftfelder werden ausgeblendet, um alles übersichtlich zu halten.
• Checked → Der vollständige Design-Editor wird angezeigt, und dieser Service verwendet seinen eigenen Stil anstelle der globalen Standardwerte.

💡 Verwende das pro-Service-Design, wenn ein Service anders aussehen soll – zum Beispiel eine Premium-Beratung mit einem dunkleren Theme oder ein feiertagsbezogener Kurs.

Was wo gesteuert wird

Die meisten Design-Einstellungen gibt es sowohl global als auch pro Service, einige jedoch nur pro Service:

🎨 Die Design-Reiter

Der Design-Editor ist in Reiter unterteilt. Jeder Reiter steuert einen anderen Bildschirm, den Kund:innen sehen.

📅 Booking Page

Dieser Reiter steuert das Haupt-Buchungs-Widget – Kalender, Zeitfenster, Formular und Navigationsbuttons.

Font

Wähle die im gesamten Widget verwendete Schriftfamilie. Die App unterstützt Dutzende Google Fonts sowie gängige Systemschriften.

• System fonts (wie Arial oder Helvetica) werden sofort vom Gerät der Kund:innen geladen
• Google Fonts werden automatisch geladen, sobald sie ausgewählt sind

Falls eine Schrift nicht geladen werden kann, greift das Widget auf einen sicheren Standard zurück.

Background Colors

• Outer background color → Der Bereich hinter dem Buchungs-Widget
• Info section background color → Das linke Panel mit dem Service-Bild, Titel und Preis
• Card background color → Die Hauptkarte, die Kalender und Formular enthält

Diese drei Ebenen ermöglichen Tiefe und Abgrenzung innerhalb des Widgets.

Text & Icons

• Text color → Die Standardfarbe für den Großteil des Texts im Widget
• Icons color → Die Farbe kleiner Symbole wie Pfeile und Häkchen

Selected Date & Time Slot

• Selected background color → Die Farbe hinter einem ausgewählten Datum oder Zeitfenster
• Selected text color → Die Farbe des Texts auf dem ausgewählten Datum oder Zeitfenster

Damit erkennen Kund:innen auf einen Blick, was sie ausgewählt haben.

Buttons

• Confirm button → Hintergrund- und Textfarbe für die primäre Aktion
• Back button → Hintergrund- und Textfarbe, um einen Schritt zurückzugehen
• Continue button → Hintergrund- und Textfarbe für mehrstufige Abläufe

Jeder Button lässt sich einzeln gestalten, damit er deiner Shop-Button-Hierarchie entspricht.

🎉 Success Page

Dieser Reiter steuert den Bildschirm, den Kund:innen nach einer kostenlosen oder bestätigten Buchung sehen.

• Heading size / color
• Description size / color
• Details size / color → Für Zusammenfassungstext der Buchung
• Button text size / background color / text color → Die CTA-Schaltfläche auf dem Erfolgsbildschirm
• Icons color
• Custom image → Ersetzt die Standard-Illustration durch dein eigenes Bild

💡 Das Hochladen eines eigenen Erfolgsbildes ist eine schöne Möglichkeit, deine Marke zu stärken oder die Buchung mit einer freundlichen Grafik zu feiern.

🔄 Rescheduling Page

Dieser Reiter hat zwei innere Abschnitte:

• Reschedule Form → Der Bildschirm, auf dem Kund:innen einen neuen Termin wählen
• Success Page → Der Bestätigungsbildschirm, nachdem das Verschieben abgeschlossen ist

Jeder Abschnitt bietet dieselben Steuerungsmöglichkeiten wie der Haupt-Reiter Success Page:

• Heading size / color
• Message text size / color
• Details size / color
• Button size and colors
• Icons color
• Custom image

❌ Cancel Page

Auch dieser Reiter hat zwei innere Abschnitte:

• Cancel Form → Der Bildschirm, auf dem Kund:innen die Stornierung bestätigen
• Success Page → Der Bestätigungsbildschirm nach einer abgeschlossenen Stornierung

Er enthält dieselben Styling-Steuerungen wie der Reiter Rescheduling Page.

🖼️ Custom Logo

ℹ️ Diese Einstellung ist nur im per-service Design tab verfügbar.

Aktiviere Custom logo, um das Produktbild im Buchungs-Widget durch dein eigenes hochgeladenes Logo oder Bild zu ersetzen.

• Empfohlen für ein konsistentes Branding
• Bild-Uploads sind auf 1 MB begrenzt
• Akzeptierte Formate sind GIF, JPEG, PNG und WebP

🧑‍💻 Custom CSS

Für Händler:innen, die pixelgenaue Kontrolle wünschen, enthalten sowohl die globale als auch die pro-Service-Design-Seite einen Custom CSS-Editor.

• Füge dein eigenes CSS in den Editor ein
• Klicke auf Apply, um es in der Storefront zu aktivieren
• Klicke auf Reset, um die Standard-CSS-Vorlage wiederherzustellen und deine Änderungen zu deaktivieren

Der Editor enthält eine Standardvorlage mit gängigen Selektoren, die du ansprechen kannst, z. B.:

• Der äußere Widget-Container
• Die Dialogkarte
• Der Info-Bereich
• Ausgewählte Kalendertage und Zeitfenster
• Confirm-, Back- und Continue-Buttons
• Mobile-spezifische Varianten

⚠️ Wichtig:

• Benutzerdefiniertes CSS wird erst angewendet, wenn du auf Apply klickst
• Wenn ein Service dem Standard-Theme folgt, verwendet er das globale Custom CSS
• Wenn ein Service sein eigenes Design verwendet, verwendet er sein eigenes per-service Custom CSS
• Die App fügt CSS-Deklarationen automatisch !important hinzu, damit sie Theme-Stile überschreiben

💡 Benutzerdefiniertes CSS ist ideal für fortgeschrittene Anpassungen, aber die meisten Händler:innen erzielen das gewünschte Aussehen allein mit den Farb- und Schriftauswahl-Feldern.

🔘 Floating Action Button

ℹ️ Der Floating Action Button wird im General tab eines Service konfiguriert, nicht im Design-Reiter. Er ist hier aufgeführt, weil er eigene Styling-Optionen bietet.

Aktiviere den Floating Action Button, um eine fixierte Book Now-Schaltfläche anzuzeigen, die Kund:innen beim Scrollen durch deinen Shop folgt.

Wenn aktiviert, kannst du folgendes anpassen:

• Button text → Standard ist „Book Now“
• Position → Unten rechts, unten links oder unten mittig
• Background color
• Text color

Das ist nützlich, wenn Kund:innen von jeder Seite aus – nicht nur von der Produktseite – buchen sollen.

Weitere Informationen zum Aktivieren und Platzieren der schwebenden Schaltfläche findest du in der Dokumentation Service Setup.

🧩 Theme Editor App Block Styling

Wenn du den Block Appointment Calendar über den Shopify-Theme-Editor hinzufügst, erhältst du zusätzliche Styling-Optionen, die unabhängig vom App-Admin sind.

Diese Einstellungen steuern die Karte oder Schaltfläche, die den Buchungs-Modal öffnet:

• Title color / font size
• Price color / font size
• Option color / font size
• View details button → Anzeigen/ausblenden, Text, Farben, Schriftgröße
• Book Now button → Hintergrund, Textfarbe, Schriftgröße
• Block background color

⚠️ Wichtig:

Diese Einstellungen formatieren nur den Block auf der Seite. Der sich öffnende Modal verwendet weiterhin die Design-Einstellungen aus Settings → Design oder dem Design tab des Service.

Einige Blockeinstellungen werden nur angezeigt, wenn der Block im Modus Modal eingestellt ist.

🖥️ Wie Styling in der Storefront angezeigt wird

Das Buchungs-Widget wird in einem iframe in deiner Storefront geladen. Der iframe lädt die von dir konfigurierten Design-Einstellungen und wendet sie an auf:

• Den äußeren Widget-Hintergrund
• Die Info-Panel- und Kartenhintergründe
• Allen Text und Symbole
• Ausgewählte Kalendertage und Zeitfenster
• Die Confirm-, Back- und Continue-Buttons
• Die Success-, Rescheduling- und Cancel-Seiten
• Die Platzierung des Custom logos
• Überschreibungen durch Custom CSS

Schriftarten werden dynamisch geladen. Google Fonts werden von Googles Servern abgerufen, Systemschriften vom Gerät der Kund:innen.

Falls eine Schrift nicht geladen wird oder eine Farbe fehlt, greift das Widget auf sichere Standardwerte zurück, damit die Buchungserfahrung nutzbar bleibt.

⚠️ Wichtige Hinweise & Einschränkungen

• Das globale Design ist der Standard. Neue Services folgen automatisch dem globalen Theme, es sei denn, du aktivierst Do not Follow Default Theme Settings.
• Benutzerdefiniertes CSS muss angewendet werden. Das Schreiben von CSS im Editor hat keine Wirkung, bis du auf Apply klickst.
• Per-service CSS gilt nur, wenn der Service sein eigenes Design verwendet. Wenn ein Service dem globalen Theme folgt, ignoriert er sein eigenes Custom-CSS-Feld.
• Custom logo ist nur pro Service verfügbar. Es gibt keine globale Einstellung für ein Custom logo.
• Bild-Uploads sind auf 1 MB begrenzt. Größere Bilder müssen vor dem Hochladen komprimiert werden.
• Theme Editor App Block Styling-Einstellungen sind getrennt. Die Gestaltung des Appointment Calendar-Blocks in Shopify ändert nicht das Innere des Modals.
• Der Modal-Hintergrund wird vom Theme gesteuert. Der Bereich hinter dem Popup-Modal wird durch das Theme-Erweiterungs-CSS gestaltet, nicht durch die Design-Einstellungen im App-Admin.
• App-Embed muss aktiviert sein. Design-Einstellungen werden nur in der Storefront angezeigt, wenn das Appointment Bookings App-Embed in deinem Theme aktiviert ist.

💡 Häufige Anwendungsfälle

Passe das Widget an dein Store-Branding an

• Gehe zu Settings → Design
• Lege Outer background color, Card background color und Text color so fest, dass sie zu deinem Shop passen
• Wähle eine Font, die zu deinem Theme passt
• Gestalte den Confirm button so, dass er zu deinem primären CTA passt

Ergebnis: Jeder Service sieht wie ein natürlicher Teil deines Shops aus.

Ein Service mit anderem Erscheinungsbild

• Öffne den Service → Design tab
• Aktiviere Do not Follow Default Theme Settings
• Ändere die Farben und lade ein Custom logo hoch

Ergebnis: Nur dieser Service verwendet das individuelle Styling. Alle anderen Services behalten das globale Design bei.

Eigenes Bild auf der Erfolgsseite

• Öffne Settings → Design → Success Page
• Lade unter Custom image ein eigenes Bild hoch

Ergebnis: Kund:innen sehen nach der Buchung deine markenbezogene Illustration anstelle der Standard-Illustration.

Fortgeschrittene Layout-Anpassung

• Öffne Settings → Design
• Klappe den Custom CSS-Editor aus
• Füge dein CSS hinzu und klicke auf Apply

Ergebnis: Du kannst bestimmte Widget-Elemente ansprechen, die nicht von den Farbauswahl-Feldern abgedeckt werden.

🎉 Endergebnis

Sobald deine Design-Einstellungen konfiguriert sind:

✅ Das Buchungs-Widget passt zu den Farben und Schriften deines Shops
✅ Success-, Rescheduling- und Cancel-Seiten wirken markenkonform
✅ Pro-Service-Überschreibungen lassen einzelne Services bei Bedarf hervorstechen
✅ Eigene Logos und Bilder verleihen eine persönliche Note
✅ Custom CSS gibt dir volle Kontrolle über fortgeschrittenes Styling
✅ Kund:innen erleben ein durchdachtes, professionelles Buchungserlebnis 🎨

Mit der richtigen Design-Konfiguration fühlt sich das Buchen eines Termins wie ein nahtloser Teil deines Shopify-Shops an ✨

Aktualisiert am: 10/09/2026