ℹ️ 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 les clients puissent réserver de n'importe où dans votre magasin — pas seulement la page de produit? Un bouton d'action flottant fonctionne comme le widget Calendly: un petit bouton "Réserver maintenant" reste fixe dans le coin de chaque page, prêt à ouvrir votre modale de réservation en un clic.

Hoppy Appointments vous permet d'ajouter ce bouton par service, de personnaliser son texte et ses couleurs, et de choisir où il apparaît sur l'écran.

Ce guide vous aide à le mettre en place.

⚠️ Avant de commencer

Avant de configurer le bouton d'action flottant, assurez-vous d'avoir :

• Les Hoppy Appointments app installée sur votre Shopify magasin
• Au moins un service actif déjà créé
• Les Hoppy Appointments application intégrée activé dans votre thème

💡 Le bouton flottant n'apparaît que sur les pages où l'application est active. Si vous n'avez pas encore activé l'intégration, allez à Shopify Admin → Boutique en ligne → Thèmes → Personnaliser → App Embeds et allumer Hoppy Appointments Embarquez.

🛠️ Étape 1 — Ouvrir l'onglet Général du Service

Le bouton d'action flottant est configuré par service, Généralités onglet — pas l'onglet Conception.

1. Ouvrir la Hoppy Appointments app
2. Allez à Services
3. Cliquez sur le service que vous voulez ajouter le bouton à
4. Cliquez sur le Généralités onglet
5. Faites défiler jusqu'au Bouton d'action flottant carte

🛠️ Étape 2 — Activer le bouton action flottante

Dans la Bouton d'action flottant carte:

1. Allumez la Activer le bouton flottant basculer

Une fois activés, les champs de configuration apparaissent sous le basculement.

🛠️ Étape 3 — Configurer le bouton

Configurez le bouton correspondant au style de votre magasin et au flux de réservation.

Texte du bouton

Entrez l'étiquette que les clients verront sur le bouton. Le texte par défaut est Réservez maintenant, mais vous pouvez utiliser tout ce qui correspond à votre marque — par exemple:

• Réserver un appel
• Nomination prévue
• Réserve une tache

Fonction

Choisissez où le bouton apparaît à l'écran :

• En bas à droite — apparaît dans le coin inférieur droit
• En bas à gauche — apparaît dans le coin inférieur gauche
• Centre inférieur — apparaît centré en bas

Couleur de fond

Choisissez la couleur de fond du bouton. La valeur par défaut est noire.

Couleur du texte

Choisissez la couleur de l'étiquette du bouton. La valeur par défaut est blanche.

💡 Choisissez des couleurs avec un fort contraste afin que le bouton soit facile à lire sur votre fond de magasin.

💾 Étape 4 — Enregistrer et prévisualiser

1. Cliquez sur Enregistrer en haut de la page de service
2. Attendez le message de confirmation
3. Visitez votre magasin et vérifiez différentes pages — maison, produit, collection, panier, etc.

Le bouton doit rester fixé dans le coin choisi et ouvrir le mode de réservation lorsqu'il est cliqué.

⚠️ Remarques importantes

• Réglage par service — chaque service a son propre bouton flottant. Configurez-le séparément pour chaque service sur lequel vous voulez l'afficher.
• Apparaît sur toutes les pages — une fois activé, le bouton affiche sur chaque page où Hoppy Appointments app include est active. Il n'existe pas de règles de visibilité spécifiques aux pages.
• Plusieurs services = plusieurs boutons — si vous activez le bouton flottant pour plusieurs services, chacun rendra son propre bouton. Pour une expérience plus propre, ne l'activer que sur le service que vous voulez promouvoir le plus.
• Ouvre le mode de réservation — en cliquant sur le bouton ouvre le flux de réservation pour ce service directement, sans quitter la page actuelle.
• Les traductions nécessitent une configuration avancée — si vous voulez que le texte du bouton change par langue, activez Utiliser la configuration avancée sur le service et placer la traduction sous Paramètres → Traductions → Traductions de services. Voir le guide de traduction pour plus de détails.

🐞 Dépannage

Le bouton ne s'affiche pas sur mon magasin

1. Assurez-vous Activer le bouton flottant est allumé pour le service
2. Assurez-vous que vous avez cliqué Enregistrer
3. Confirmer Hoppy Appointments app include est activé dans votre thème
4. Effacer le cache ou le test de votre navigateur dans une fenêtre incognito
5. Vérifier que le service est actif et correctement connecté à un produit

Le texte du bouton est incorrect ou non traduit

• Si Utiliser la configuration avancée est désactivé, le bouton utilise le texte de la Texte du bouton directement.
• Si Utiliser la configuration avancée est allumé, le texte du bouton est tiré de Paramètres → Traductions → Traductions de services → Étiquette à bouton flottant.

La couleur du bouton ne semble pas droite

Utilisez les sélectionneurs de couleurs dans la carte FAB pour le style de base. Pour des changements visuels plus avancés, vous pouvez cibler le .futureblink-fab cours avec CSS personnalisé. Consultez le guide CSS personnalisé pour plus de détails.

🎉 Résultat final

Une fois configuré :

✅ Un bouton flottant "Réserver maintenant" apparaît sur chaque page de votre magasin
✅ Les clients peuvent commencer à réserver de n'importe où sans naviguer vers une page de produit
✅ Le bouton ouvre instantanément votre service modal de réservation
✅ Le texte, la position et les couleurs correspondent à votre marque

📚 Articles connexes

• Réservations de rendez-vous — Options de conception et de styling
• Comment définir l'application CSS personnalisée pour les réservations de rendez-vous
• Réservations de rendez-vous — Traduction
• Comment configurer les services de réservation de rendez-vous

Mis à jour le : 10/09/2026