ℹ️ Note: Cet article a été traduit automatiquement en utilisant l'IA et peut contenir des inexactitudes. Si quelque chose ne va pas, veuillez contacter notre équipe de soutien.

Vous voulez que votre widget de réservation corresponde exactement à votre marque boutique? Hoppy Appointments vous permet d'ajouter votre propre CSS en plus des paramètres de conception intégrés, afin que vous puissiez affiner les polices, les couleurs, l'espacement, les boutons et plus encore.

Ce guide vous permet d'ajouter et d'appliquer un CSS personnalisé au widget de réservation.

⚠️ Avant de commencer

Avant d'utiliser CSS personnalisé, assurez-vous que vous avez:

• Les Hoppy Appointments app installée sur votre Shopify magasin
• Au moins un service actif
• Connaissance de base des sélecteurs et des déclarations CSS

💡 Pour la plupart des changements de conception — couleurs, polices, logos et styles de boutons — utiliser le intégré Conception d'abord. Le CSS personnalisé est le meilleur lorsque vous avez besoin de modifier les options intégrées ne couvre pas.

Pour un aperçu complet des options de conception intégrées, voir Réservations de rendez-vous — Options de conception et de styling.

🛠️ Étape 1 — Ouvrez l'éditeur CSS personnalisé

Le CSS personnalisé peut être géré en deux endroits.

CSS global (s'applique à tous les services par défaut)

1. Ouvrir la Hoppy Appointments app
2. Cliquez sur Paramètres Dans le menu App
3. Cliquez sur Conception
4. Faites défiler jusqu'au CSS personnalisé carte au bas de la page

CSS par service (surpasse CSS global pour un service)

1. Ouvrir la Hoppy Appointments app
2. Allez à Services
3. Cliquez sur le service que vous voulez styler
4. Cliquez sur le Conception onglet
5. Assurez-vous que Ne pas suivre les paramètres par défaut du thème doit être vérifié
6. Faites défiler jusqu'au CSS personnalisé carte

🛠️ Étape 2 — Choisir un CSS global ou de niveau de service

Lors de l'édition de CSS sur un service Conception onglet, vous verrez un basculement:

Ne pas suivre les paramètres par défaut du thème

• Arrêt → le service utilise le CSS global de Configuration → Conception
• À → le service utilise sa propre CSS du niveau de service Conception onglet

Cela vous permet de garder un style cohérent dans tous les services, ou donner des services spécifiques un look unique.

🛠️ Étape 3 — Écrivez votre CSS

L'éditeur CSS commence par un modèle par défaut qui inclut les sélecteurs de widget les plus courants. Vous pouvez remplacer ou étendre le modèle par vos propres règles.

Classes principales d'emballage

Sélecteur

Ce qu'il cible

.futureblink-appointment

Tout le widget de réservation

.futureblink-appointment .dialog

La boîte de dialogue principale de réservation (desktop)

.futureblink-appointment.mobile .dialog

Le dialogue principal de réservation (mobile)

.futureblink-appointment .userInfoSection

Le panneau des détails de service

Sélecteurs communs que vous pouvez styler

Sélecteur

Ce qu'il cible

.futureblink-appointment .confirm-btn

Confirmer / bouton Livrer

.futureblink-appointment .continue-btn

Continuer le bouton

.futureblink-appointment .back-btn

Bouton arrière

.futureblink-appointment .time-slot.selected

Slot de temps sélectionné

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

Date de calendrier sélectionnée

.futureblink-appointment .schedule-form

Formulaire de réservation du client

.futureblink-appointment .meeting-booked

Succès / page de confirmation

Exemple

.futureblink-nomination .confirm-btn {
couleur de fond: #2563eb;
couleur: #ffffff;
radius limite: 8px;
}

.futureblink-nomination.mobile .confirm-btn {
couleur de fond: #1d4ed8;
}

ℹ️ C'est vrai. pas besoin d'ajouter !important à vos déclarations. Hoppy Appointments appendice automatique !important lorsque le CSS est injecté dans le widget, ce qui aide vos règles à dépasser les styles par défaut.

🛠️ Étape 4 — Appliquer le CSS

Après avoir entré votre CSS, cliquez sur Appliquer bouton sous l'éditeur.

• Appliquer → permet le CSS personnalisé et l'injecte dans le widget de réservation
• Réinitialiser → Désactive le CSS personnalisé et retourne l'éditeur au modèle par défaut

⚠️ CSS personnalisé prend effet seulement après avoir cliqué Appliquer. Coller CSS dans le champ seul ne change pas l'apparence du widget.

💾 Étape 5 — Enregistrer et prévisualiser

1. Cliquez sur Enregistrer dans la barre supérieure
2. Attendez le message de confirmation
3. Prévisualiser le widget de réservation sur votre boutique ou dans le panneau de prévisualisation admin

Si vous avez édité un CSS par service, assurez-vous que Ne pas suivre les paramètres par défaut du thème toggle est activé, sinon le CSS global sera toujours utilisé.

💡 Conseils et pratiques exemplaires

• Début petit — changer un élément à la fois pour voir ce que chaque règle affecte
• Utiliser des sélecteurs spécifiques — objectif .futureblink-appointment .your-class au lieu de sélecteurs larges qui pourraient affecter d'autres parties de votre magasin
• Essai sur mobile — utiliser .futureblink-appointment.mobile préfixe pour ajuster séparément la disposition mobile
• Gardez une sauvegarde — copiez votre CSS de travail dans un fichier de notes avant de cliquer Réinitialiser
• Utiliser les paramètres de conception intégrés d'abord — couleurs, polices et logos sont plus faciles à gérer et ne nécessitent pas de connaissances CSS

🐞 Dépannage

Mon CSS ne se montre pas sur le devant du magasin

1. Assurez-vous que vous avez cliqué Appliquer dans l'éditeur CSS personnalisé
2. Assurez-vous que vous avez cliqué Enregistrer en haut de la page
3. Pour les CSS par service, assurez-vous Ne pas suivre les paramètres par défaut du thème est allumé
4. Vérifiez que vos sélecteurs correspondent aux noms de classes de widget réels
5. Effacer le cache ou le test de votre navigateur dans une fenêtre incognito

Le widget est retourné à l'aspect par défaut

Cliquer Réinitialiser désactive le CSS et restaure le modèle par défaut. Si vous voulez récupérer vos règles personnalisées, collez-les à nouveau et cliquez Appliquer.

Certaines règles ne fonctionnent pas

La voiture !important l'injection fonctionne mieux avec simple property: value; Déclarations. Très complexe CSS — comme @media requêtes, @keyframes, ou sélecteurs imbriqués — peut ne pas être transformé de manière fiable. Gardez vos règles simples pour les résultats les plus cohérents.

📚 Articles connexes

• Réservations de rendez-vous — Options de conception et de styling
• Comment configurer les lieux de réunion pour les réservations de rendez-vous
• Comment configurer les services de réservation de rendez-vous

Mis à jour le : 10/09/2026