ℹ️ 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.

Hoppy Appointments est doté d'un système de design complet pour que votre widget de réservation, les pages de confirmation, la page de report et la page d'annulation s'intègrent parfaitement à votre boutique.

Vous pouvez contrôler les couleurs, les polices, les boutons, les arrière-plans et même télécharger des images personnalisées. Tout se gère via deux emplacements :

• Settings → Design (Paramètres → Design) → les valeurs par défaut de la boutique qui s'appliquent à chaque service
• Service → Design tab (Onglet Design du service) → les remplacements par service lorsque vous souhaitez qu'un service ait un aspect différent

Ce guide explique chaque paramètre de design, quand il apparaît et comment il affecte la boutique.

⚠️ Avant de commencer

Les paramètres de design se gèrent depuis :

• Hoppy Appointments → Settings → Default Design (Paramètres → Design par défaut) pour les valeurs par défaut globales
• Hoppy Appointments → Services → [votre service] → Design pour les remplacements par service

Avant de styliser le widget, assurez-vous que :

• l'application Hoppy Appointments est installée
• au moins un service est créé
• l'intégration de l'application Appointment Bookings est activée dans votre thème Shopify

ℹ️ Sans l'intégration activée, les clients ne verront pas du tout le widget de réservation, quelle que soit la beauté de vos paramètres de design.

Consultez le guide de dépannage Calendar Not Showing si vous avez besoin d'aide pour activer l'intégration.

🌐 Design global vs. par service

Design global (Settings → Design)

C'est la valeur par défaut de toute la boutique. Chaque nouveau service utilise automatiquement ces couleurs, polices et styles, sauf indication contraire.

À utiliser lorsque vous souhaitez un rendu homogène sur tous vos services réservables.

Design par service (Service → Design tab)

Chaque service comporte une case à cocher intitulée :

Do not Follow Default Theme Settings (Ne pas suivre les paramètres du thème par défaut)

• Décochée → Le service utilise le design global. Tous les champs de couleur/police sont masqués pour simplifier les choses.
• Cochée → L'éditeur de design complet apparaît et ce service utilise son propre style au lieu des valeurs par défaut globales.

💡 Utilisez le design par service lorsqu'un service doit avoir un aspect différent — par exemple, une consultation premium avec un thème plus sombre ou un cours sur le thème des fêtes.

Répartition des paramètres

La plupart des paramètres de design existent à la fois au niveau global et par service, mais certains sont réservés au service :

🎨 Les onglets de design

L'éditeur de design est organisé en onglets. Chaque onglet contrôle un écran différent vu par les clients.

📅 Page de réservation

Cet onglet contrôle le widget de réservation principal — le calendrier, les créneaux horaires, le formulaire et les boutons de navigation.

Police

Choisissez la police de caractères utilisée dans tout le widget. L'application prend en charge des dizaines de Google Fonts ainsi que les polices système courantes.

• Les polices système (comme Arial ou Helvetica) se chargent instantanément depuis l'appareil du client
• Les Google Fonts se chargent automatiquement une fois sélectionnées

Si une police ne peut pas être chargée, le widget revient à une valeur par défaut sûre.

Couleurs d'arrière-plan

• Outer background color (Couleur d'arrière-plan extérieure) → la zone située derrière le widget de réservation
• Info section background color (Couleur d'arrière-plan de la section d'informations) → le panneau de gauche qui affiche l'image du service, le titre et le prix
• Card background color (Couleur d'arrière-plan de la carte) → la carte principale qui contient le calendrier et le formulaire

Ces trois couches vous permettent de créer de la profondeur et de la séparation à l'intérieur du widget.

Texte et icônes

• Text color (Couleur du texte) → la couleur par défaut de la plupart du texte dans le widget
• Icons color (Couleur des icônes) → la couleur utilisée pour les petites icônes comme les flèches et les coches

Date et créneau horaire sélectionnés

• Selected background color (Couleur d'arrière-plan de la sélection) → la couleur derrière une date ou un créneau choisi
• Selected text color (Couleur du texte sélectionné) → la couleur du texte sur la date ou le créneau sélectionné

Ces éléments aident les clients à voir clairement ce qu'ils ont choisi.

Boutons

• Confirm button (Bouton Confirmer) → couleur d'arrière-plan et couleur du texte pour l'action principale
• Back button (Bouton Retour) → couleur d'arrière-plan et couleur du texte pour revenir à l'étape précédente
• Continue button (Bouton Continuer) → couleur d'arrière-plan et couleur du texte pour les flux en plusieurs étapes

Chaque bouton peut être stylisé indépendamment afin de correspondre à la hiérarchie des boutons de votre boutique.

🎉 Success Page (Page de confirmation)

Cet onglet contrôle l'écran que voient les clients après une réservation gratuite ou confirmée.

• Taille / couleur du titre
• Taille / couleur de la description
• Taille / couleur des détails → pour le texte du récapitulatif de la réservation
• Taille du texte du bouton / couleur d'arrière-plan / couleur du texte → le bouton d'appel à l'action sur l'écran de confirmation
• Couleur des icônes
• Custom image (Image personnalisée) → remplacez l'illustration de confirmation par défaut par votre propre image

💡 Le téléchargement d'une image de confirmation personnalisée est un excellent moyen de renforcer votre marque ou de célébrer la réservation avec un graphique accueillant.

🔄 Rescheduling Page (Page de report)

Cet onglet comporte deux sous-sections :

• Reschedule Form (Formulaire de report) → l'écran où les clients choisissent un nouveau créneau
• Success Page (Page de confirmation) → l'écran de confirmation une fois le report effectué

Chaque section propose les mêmes types de contrôles que l'onglet principal Success Page :

• Taille / couleur du titre
• Taille / couleur du message
• Taille / couleur des détails
• Taille et couleurs des boutons
• Couleur des icônes
• Image personnalisée

❌ Cancel Page (Page d'annulation)

Cet onglet comporte également deux sous-sections :

• Cancel Form (Formulaire d'annulation) → l'écran où les clients confirment leur souhait d'annuler
• Success Page (Page de confirmation) → l'écran de confirmation après une annulation effectuée

Il comprend les mêmes options de style que l'onglet Rescheduling Page.

🖼️ Custom Logo (Logo personnalisé)

ℹ️ Ce paramètre n'est disponible que dans l'onglet Design d'un service spécifique.

Activez Custom logo pour remplacer l'image du produit dans le widget de réservation par votre propre logo ou image téléchargé.

• Recommandé pour la cohérence de la marque
• Les téléchargements d'image sont limités à 1 Mo
• Les formats acceptés incluent GIF, JPEG, PNG et WebP

🧑‍💻 Custom CSS (CSS personnalisé)

Pour les marchands qui souhaitent un contrôle précis au pixel près, les pages de design globales et par service incluent toutes deux un éditeur Custom CSS.

• Collez votre propre CSS dans l'éditeur
• Cliquez sur Apply (Appliquer) pour l'activer sur la boutique
• Cliquez sur Reset (Réinitialiser) pour restaurer le modèle CSS par défaut et désactiver vos modifications

L'éditeur est fourni avec un modèle par défaut présentant les sélecteurs courants que vous pouvez cibler, tels que :

• le conteneur extérieur du widget
• la carte de dialogue
• la section d'informations
• les dates et créneaux horaires sélectionnés dans le calendrier
• les boutons Confirm, Back et Continue
• les variantes spécifiques aux mobiles

⚠️ Important :

• Le CSS personnalisé n'est appliqué que lorsque vous cliquez sur Apply
• Si un service suit le thème par défaut, il utilise le CSS personnalisé global
• Si un service utilise son propre design, il utilise son propre CSS personnalisé par service
• L'application ajoute automatiquement !important aux déclarations CSS pour les aider à remplacer les styles du thème

💡 Le CSS personnalisé est idéal pour les ajustements avancés, mais la plupart des marchands peuvent obtenir exactement le look souhaité avec les sélecteurs de couleur et de police uniquement.

🔘 Floating Action Button (Bouton d'action flottant)

ℹ️ Le Floating Action Button se configure dans l'onglet General (Général) d'un service, et non dans l'onglet Design. Il est présenté ici car il dispose de ses propres options de style.

Activez le Floating Action Button pour afficher un bouton Book Now (Réserver maintenant) fixe qui suit les clients pendant qu'ils font défiler votre boutique.

Lorsqu'il est activé, vous pouvez personnaliser :

• Button text (Texte du bouton) → la valeur par défaut est « Book Now »
• Position (Position) → en bas à droite, en bas à gauche ou en bas au centre
• Background color (Couleur d'arrière-plan)
• Text color (Couleur du texte)

Cela est utile lorsque vous souhaitez permettre aux clients de réserver depuis n'importe quelle page, et pas seulement depuis la page de produit.

Consultez la documentation Service Setup pour tous les détails sur l'activation et le placement du bouton flottant.

🧩 Style du bloc d'application dans l'éditeur de thème

Si vous ajoutez le bloc Appointment Calendar (Calendrier de rendez-vous) via l'éditeur de thème Shopify, vous bénéficiez d'options de style supplémentaires indépendantes de l'administration de l'application.

Ces paramètres contrôlent la carte ou le bouton qui ouvre la modale de réservation :

• Title color / font size (Couleur du titre / taille de police)
• Price color / font size (Couleur du prix / taille de police)
• Option color / font size (Couleur de l'option / taille de police)
• View details button (Bouton Voir les détails) → afficher/masquer, texte, couleurs, taille de police
• Book Now button (Bouton Réserver maintenant) → arrière-plan, couleur du texte, taille de police
• Block background color (Couleur d'arrière-plan du bloc)

⚠️ Important :

Ces paramètres ne stylisent que le bloc sur la page. La modale qui s'ouvre utilise toujours les paramètres de design de Settings → Design ou de l'onglet Design du service.

Certains paramètres du bloc n'apparaissent que lorsque le bloc est réglé sur le mode Modal.

🖥️ Comment le style s'affiche sur la boutique

Le widget de réservation se charge dans une iframe sur votre boutique. L'iframe récupère les paramètres de design que vous avez configurés et les applique à :

• l'arrière-plan extérieur du widget
• les arrière-plans du panneau d'informations et de la carte
• tout le texte et les icônes
• les dates et créneaux horaires sélectionnés dans le calendrier
• les boutons Confirm, Back et Continue
• les pages Success, Rescheduling et Cancel
• le placement du logo personnalisé
• les remplacements CSS personnalisés

Les polices se chargent dynamiquement. Les Google Fonts sont récupérées depuis les serveurs de Google, tandis que les polices système sont chargées depuis l'appareil du client.

Si une police ne parvient pas à se charger ou si une couleur est manquante, le widget revient à des valeurs par défaut sûres pour que l'expérience de réservation reste utilisable.

⚠️ Remarques et limitations importantes

• Le design global est la valeur par défaut. Les nouveaux services suivent automatiquement le thème global, sauf si vous cochez Do not Follow Default Theme Settings.
• Le CSS personnalisé doit être appliqué. Écrire du CSS dans l'éditeur ne sert à rien tant que vous n'avez pas cliqué sur Apply.
• Le CSS par service ne s'applique que lorsque le service utilise son propre design. Si un service suit le thème global, il ignore son propre champ CSS personnalisé.
• Le logo personnalisé est uniquement par service. Il n'existe pas de paramètre de logo personnalisé global.
• Les téléchargements d'image sont limités à 1 Mo. Les images plus lourdes devront être compressées avant le téléchargement.
• Les paramètres du bloc dans l'éditeur de thème sont distincts. Styliser le bloc Appointment Calendar dans Shopify ne modifie pas l'intérieur de la modale.
• L'arrière-plan du conteneur de la modale est contrôlé par le thème. La zone derrière la popup modale est stylisée par le CSS de l'extension du thème, et non par les paramètres de design de l'administration de l'application.
• L'intégration de l'application doit être activée. Les paramètres de design n'apparaissent sur la boutique que si l'intégration de l'application Appointment Bookings est activée dans votre thème.

💡 Cas d'usage courants

Adapter le widget à l'image de marque de votre boutique

• Allez dans Settings → Design
• Définissez la Outer background color (Couleur d'arrière-plan extérieure), la Card background color (Couleur d'arrière-plan de la carte) et la Text color (Couleur du texte) pour correspondre à votre boutique
• Choisissez une police qui correspond à votre thème
• Stylisez le Confirm button (Bouton Confirmer) pour qu'il corresponde à votre appel à l'action principal

Résultat : chaque service semble faire partie intégrante de votre boutique.

Un service avec un aspect différent

• Ouvrez le service → onglet Design
• Cochez Do not Follow Default Theme Settings
• Modifiez les couleurs et téléchargez un Custom logo (Logo personnalisé)

Résultat : seul ce service utilise le style personnalisé. Tous les autres services conservent le design global.

Image de confirmation personnalisée

• Ouvrez Settings → Design → Success Page (Page de confirmation)
• Téléchargez une image personnalisée sous Custom image (Image personnalisée)

Résultat : les clients voient votre illustration de marque après la réservation au lieu de l'image par défaut.

Ajustement avancé de la mise en page

• Ouvrez Settings → Design
• Développez l'éditeur Custom CSS (CSS personnalisé)
• Ajoutez votre CSS et cliquez sur Apply (Appliquer)

Résultat : vous pouvez cibler des éléments spécifiques du widget qui ne sont pas couverts par les sélecteurs de couleur.

🎉 Résultat final

Une fois vos paramètres de design configurés :

✅ Le widget de réservation correspond aux couleurs et polices de votre boutique
✅ Les pages de confirmation, de report et d'annulation sont cohérentes avec votre marque
✅ Les remplacements par service permettent de faire ressortir des services individuels si nécessaire
✅ Les logos et images personnalisés ajoutent une touche personnelle
✅ Le CSS personnalisé vous donne un contrôle total sur le style avancé
✅ Les clients bénéficient d'une expérience de réservation soignée et professionnelle 🎨

Avec la bonne configuration de design, prendre rendez-vous s'inscrit comme une partie fluide de votre boutique Shopify ✨

Mis à jour le : 10/09/2026