Dieser Artikel ist auch verfügbar in:

🎨 So legen Sie benutzerdefiniertes CSS für die App für Terminbuchungen fest

ℹ️ 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 Ihr Buchungs-Widget genau dem Branding Ihres Shops entspricht? Hoppy Appointments Sie können Ihr eigenes CSS auf den integrierten Designeinstellungen hinzufügen, so dass Sie Schriftarten, Farben, Abstände, Schaltflächen und mehr fein abstimmen können.

Dieser Leitfaden führt Sie durch das Hinzufügen und Anwenden von benutzerdefiniertem CSS auf das Buchungs-Widget.

⚠️ Bevor Sie beginnen

Bevor Sie benutzerdefiniertes CSS verwenden, stellen Sie sicher, dass Sie:

Die Hoppy Appointments App installiert auf Ihrem Shopify Lager
Mindestens ein aktiver Dienst
Grundkenntnisse mit CSS-Selektoren und Deklarationen

💡 Für die meisten Designänderungen - Farben, Schriftarten, Logos und Button-Styles - verwenden Sie das integrierte Design Einstellungen zuerst. Custom CSS ist am besten, wenn Sie Änderungen benötigen, die die integrierten Optionen nicht abdecken.

Für einen vollständigen Überblick über die eingebauten Designoptionen, siehe Terminbuchungen - Design & Styling-Optionen.

🛠️ Schritt 1 - Öffnen Sie den Custom CSS Editor

Custom CSS kann an zwei Stellen verwaltet werden.

Globales CSS (gilt standardmäßig für alle Dienste)

Offen Hoppy Appointments App.
Klicken Einstellungen im App Menü
Klicken Design
Scrollen Sie nach unten zum Custom CSS Karte am Ende der Seite

Per-Service CSS (überschreibt globales CSS für einen Service)

Offen Hoppy Appointments App.
Gehen Sie zu Dienstleistungen
Klicken Sie auf den Service, den Sie stylen möchten
Klicken Sie Design Spitze
Stellen Sie sicher, dass Folgen Sie nicht den Standard-Themeneinstellungen sollte kontrolliert werden
Scrollen Sie nach unten zum Custom CSS Karte

🛠️ Schritt 2 - Wählen Sie globales oder Service Level CSS

Beim Bearbeiten von CSS auf einem Dienst Design Tab, du wirst einen Toggle sehen:

Folgen Sie nicht den Standard-Themeneinstellungen

Ausgeschaltet → der Dienst verwendet das globale CSS von Settings → Design
am → der Dienst verwendet sein eigenes CSS von der Service-Ebene Design Spitze

Auf diese Weise können Sie einen einheitlichen Stil für alle Dienste beibehalten oder bestimmten Diensten ein einzigartiges Aussehen verleihen.

🛠️ Schritt 3 - Schreiben Sie Ihr CSS

Der CSS-Editor beginnt mit einer Standardvorlage, die die gängigsten Widget-Selektoren enthält. Sie können die Vorlage durch Ihre eigenen Regeln ersetzen oder erweitern.

Hauptumschlagklassen

Auswahl

Was es zielt

.futureblink-appointment

Das gesamte Booking Widget

.futureblink-appointment .dialog

Der Hauptbuchungsdialog (Desktop)

.futureblink-appointment.mobile .dialog

Der Hauptbuchungsdialog (mobil)

.futureblink-appointment .userInfoSection

Das Service Details Panel

Gemeinsame Selektoren, die Sie stylen können

Auswahl

Was es zielt

.futureblink-appointment .confirm-btn

Button Bestätigen / Buchen

.futureblink-appointment .continue-btn

Weiter Button

.futureblink-appointment .back-btn

Zurück-Taste

.futureblink-appointment .time-slot.selected

Ausgewähltes Zeitfenster

.futureblink-appointment .highlighted_date.react-calendar__tile--active

Ausgewähltes Kalenderdatum

.futureblink-appointment .schedule-form

Kundenbuchungsformular

.futureblink-appointment .meeting-booked

Erfolgs-/Bestätigungsseite

Beispiel

.futureblink-appointment .confirm-btn
Hintergrundfarbe: #2563eb;
Farbe: #ffffff;
Grenzradius: 8px;
}

.futureblink-appointment.mobile .confirm-btn
Hintergrundfarbe: #1d4ed8;
}

ℹ️ Sie tun dies nicht muss hinzugefügt werden !important zu Ihren Erklärungen. Hoppy Appointments automatische Anhänge !important wenn das CSS in das Widget injiziert wird, was Ihren Regeln hilft, die Standardstile außer Kraft zu setzen.

🛠️ Schritt 4 — Anwenden des CSS

Nach Eingabe Ihres CSS klicken Sie auf Beantragen Button unter dem Editor.

Beantragen → ermöglicht das benutzerdefinierte CSS und fügt es in das Buchungs-Widget ein
Zurücksetzen → Deaktiviert das benutzerdefinierte CSS und setzt den Editor auf die Standardvorlage zurück

⚠️ Custom CSS wird erst nach dem Klick wirksam BeantragenDas Einfügen von CSS in das Feld allein ändert nicht das Aussehen des Widgets.

💾 Schritt 5 — Speichern und Vorschauen

Klicken Sparen im oberen Balken
Warten Sie auf die Bestätigungsnachricht
Vorschau des Buchungs-Widgets auf Ihrer Storefront oder im Admin-Vorschaufeld

Wenn Sie per Service CSS bearbeitet haben, stellen Sie sicher, dass Folgen Sie nicht den Standard-Themeneinstellungen toggle ist eingeschaltet, sonst wird das globale CSS weiterhin verwendet.

💡 Tipps & Best Practices

Start klein Ändern Sie ein Element nach dem anderen, damit Sie sehen können, was jede Regel beeinflusst
Verwenden Sie spezifische Selektoren — Ziel .futureblink-appointment .your-class anstelle von breiten Selektoren, die andere Teile Ihres Shops beeinflussen könnten
Test auf Mobilgeräten - Verwenden Sie die .futureblink-appointment.mobile Präfix, um das mobile Layout separat anzupassen
Halten Sie ein Backup - Kopieren Sie Ihr funktionierendes CSS in eine Notizendatei, bevor Sie darauf klicken Zurücksetzen
Verwenden Sie zuerst die eingebauten Designeinstellungen - Farben, Schriftarten und Logos sind dort einfacher zu verwalten und erfordern kein CSS-Wissen

🐞 Fehlerbehebung

Mein CSS wird nicht auf der Storefront angezeigt

Stellen Sie sicher, dass Sie geklickt haben Beantragen im Custom CSS Editor
Stellen Sie sicher, dass Sie geklickt haben Sparen oben auf der Seite
Für CSS per Service stellen Sie sicher Folgen Sie nicht den Standard-Themeneinstellungen eingeschaltet
Überprüfen Sie, ob Ihre Selektoren mit den tatsächlichen Widget-Klassennamen übereinstimmen
Löschen Sie Ihren Browser-Cache oder testen Sie in einem Inkognito-Fenster

Klicken Zurücksetzen Deaktiviert das CSS und stellt die Standardvorlage wieder her. Wenn Sie Ihre benutzerdefinierten Regeln zurückhaben möchten, fügen Sie sie erneut ein und klicken Sie auf Beantragen.

Einige Regeln funktionieren nicht

Das Auto !important Injektion funktioniert am besten mit einfachen property: value; Erklärungen. Sehr komplexes CSS - wie @media Abfragen, @keyframes, oder verschachtelte Selektoren - kann nicht zuverlässig transformiert werden. Halten Sie Ihre Regeln einfach für die konsistentesten Ergebnisse.

📚 Verwandte Artikel

Terminbuchungen - Design & Styling-Optionen
So konfigurieren Sie Besprechungsorte für Terminbuchungen
Wie man Terminbuchungsdienste einrichtet

Aktualisiert am: 10/09/2026

War dieser Beitrag hilfreich?

Danke!