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

Le calendrier de prise de rendez-vous fonctionne généralement immédiatement après la configuration, mais un petit réglage de configuration, de thème ou de disponibilité peut parfois empêcher son affichage sur votre boutique.

La bonne nouvelle est que ces problèmes se corrigent généralement très rapidement 🚀

Ce guide passe en revue les raisons les plus courantes pour lesquelles le calendrier de prise de rendez-vous (ou son bouton Book Now (Réserver)) peut ne pas s’afficher, et explique comment résoudre chacune d’elles étape par étape.

Dans la plupart des cas, le problème est lié à l’un des éléments suivants :

• App Embed est désactivé
• Le service n’a pas été enregistré, a été désactivé ou archivé
• Vous consultez la mauvaise page produit ou la mauvaise variante
• Les variantes du produit ont été modifiées après la création du service
• Vous prévisualisez un thème brouillon (non publié)
• Conflits avec un thème personnalisé ou un constructeur de page
• Les paramètres de disponibilité masquent toutes les dates
• Les créneaux sont entièrement réservés ou les limites de réservation sont atteintes
• Cache du navigateur ou de la boutique

Voyons-les un par un 👇

✅ Étape 1 : Vérifiez que App Embed est activé

Pour que le calendrier de prise de rendez-vous s’affiche sur votre boutique, l’App Embed doit être activé dans votre thème Shopify. C’est la cause la plus fréquente.

Le moyen le plus rapide de vérifier se trouve directement dans l’application :

Ouvrez l’application Hoppy Appointments → sur le dashboard/homepage, repérez la carte App Status.

• Active → L’App Embed est activé ✅
• Inactive → Cliquez sur Activate — cela vous emmène directement dans l’éditeur de thème

Pour l’activer manuellement, allez plutôt dans :

Shopify Admin → Online Store → Themes → Customize → App Embeds

Puis :

• Recherchez “Appointment Bookings”
• Activez-le (Toggle it ON)
• Cliquez sur Save

Astuce :
S’il était déjà activé, essayez de le désactiver (OFF) → Save → de le réactiver (ON) → Save à nouveau, puis actualisez votre boutique.

Après cette étape, le bouton Book Now devrait apparaître sur la page produit connectée à votre service.

✅ Étape 2 : Assurez-vous que le service est enregistré et actif

Même si l’App Embed est activé, un service ne s’affiche sur votre boutique que lorsqu’il est enregistré et actif.

Ouvrez l’application → dashboard/homepage et vérifiez le badge à côté de votre service :

• Inactive → Ouvrez le menu More → Turn on
• Archived → Ouvrez le menu More → Unarchive, puis assurez-vous qu’il est activé

Ensuite, ouvrez le service et cliquez sur Save — même si vous n’avez rien modifié.

L’enregistrement resynchronise le service avec votre boutique, ce qui résout la plupart des cas où « cela fonctionnait avant ».

Après l’enregistrement, une bannière apparaît en haut de la page :

• “Make sure Appointment Booking App Embed is active” → Cliquez sur Enable App Embed (voir l’étape 1)
• “Confirm Appointment Booking is published successfully” → Cliquez sur Open Store pour vérifier le résultat

ℹ️ Si le bouton Book Now ouvre une fenêtre contextuelle vide, le service est généralement désactivé ou archivé — cette étape résout aussi ce problème.

✅ Étape 3 : Vérifiez que vous êtes sur la bonne page produit et la bonne variante

Le bouton Book Now n’apparaît que sur la page produit connectée à votre service, pas sur les autres produits.

Ouvrez votre service → onglet General → carte Booking, et confirmez quel produit est sélectionné.

Exemple :
Si votre service est connecté à « Guitar Lesson » mais que vous consultez la page produit « Drum Lesson », le bouton ne s’affichera pas.

Si le produit a plusieurs variantes, essayez également de basculer entre les variantes sur la boutique.

⚠️ Important :
Si vous avez modifié, supprimé ou recréé les variantes du produit dans Shopify après avoir configuré le service, la connexion peut devenir obsolète.

La solution est simple :

→ Ouvrez le service
→ Cliquez sur Change
→ Sélectionnez les bonnes variantes après avoir modifié les variantes du produit
→ Cliquez sur Save

Cela resynchronise les dernières informations du produit et des variantes avec votre boutique.

✅ Étape 4 : Vérifiez sur votre thème en ligne publié

L’App Embed est vérifié — et le calendrier est affiché — uniquement sur votre thème en ligne publié.

Cela signifie que :

• Activer l’App Embed alors que vous modifiez un draft or unpublished theme ne fera pas apparaître le calendrier sur votre boutique en ligne
• Si vous avez récemment switched to a new theme, l’App Embed reste désactivé sur le nouveau thème jusqu’à ce que vous le réactiviez (voir l’étape 1)

Testez toujours sur votre boutique en ligne :

→ Ouvrez votre boutique dans un onglet de navigateur normal, pas seulement dans l’aperçu de l’éditeur de thème.

✅ Étape 5 : Actualisation forcée et navigation privée

Parfois, Shopify ou votre navigateur met temporairement en cache les ressources de la boutique.

Une actualisation forcée résout généralement le problème immédiatement.

Windows

Ctrl + Shift + R

Mac

Cmd + Shift + R

Essayez également :

• Ouvrir votre boutique dans une fenêtre Incognito / Private
• Tester dans un autre navigateur ou sur votre téléphone

Cela permet de confirmer si le problème vient simplement du contenu en cache.

✅ Étape 6 : Vous utilisez un thème personnalisé ou un constructeur de page ?

La plupart des thèmes Shopify fonctionnent avec Hoppy Appointments sans configuration supplémentaire — l’application remplace automatiquement le bouton Add to Cart par un bouton Book Now sur les pages de produit réservables.

Toutefois, les thèmes fortement personnalisés ou construits avec des constructeurs de page peuvent utiliser des formulaires de produit non standard que l’application ne détecte pas toujours.

Dans ce cas, placez le calendrier manuellement :

Ouvrez Shopify Theme Editor → Navigate to the desired page → Add Block → Apps → Appointment Calendar

Puis :

• Collez votre Service ID

→ Retrouvez-le en haut de la page d’édition du service, ou via My services → More → Copy Service ID

• Choisissez le Embedding Mode :
• • Modal → Affiche une carte de réservation qui ouvre le calendrier dans une popup
  • Direct → Intègre le calendrier complet directement dans la page
• Save the theme

Le bloc vous indique également lorsque quelque chose ne va pas :

• “App Embed Not Enabled” → Retournez à l’étape 1 — l’App Embed est requis même pour un placement manuel
• “Appointment service configuration not found” → Vérifiez bien le Service ID que vous avez collé

💡 Alternative : activez le Floating Action Button dans votre service (General tab → Enable floating button) pour afficher un bouton flottant Book Now sur toutes les pages de la boutique. N’oubliez pas de Save le service ensuite.

✅ Étape 7 : Le calendrier s’ouvre mais aucune date/heure ? Vérifiez la disponibilité

Si la popup s’ouvre mais que les clients ne peuvent sélectionner aucune date, vos paramètres de disponibilité en sont généralement la cause.

Ouvrez votre service → onglet Availability et vérifiez les éléments suivants :

• Working days are toggled ON → Les jours ouvrables sont activés avec des heures de début et de fin valides
• Date-range availability → Si vous avez défini des dates spécifiques et qu’elles sont maintenant passées, aucune date ne s’affichera. Ajoutez une nouvelle plage de dates actuelle
• Minimum scheduling notice → Une valeur élevée (par exemple 48 heures) retire aujourd’hui et demain du calendrier. La valeur par défaut est 1 heure
• Look ahead → Détermine jusqu’où les clients peuvent réserver à l’avance. Une valeur faible (par exemple 2–3 jours) donne l’impression que le calendrier est presque vide
• Break times → Assurez-vous qu’ils ne couvrent pas la totalité de vos heures de travail
• Blocked dates → Supprimez toute date qui ne devrait pas être bloquée

Exemple :
Si votre Look ahead est réglé sur 2 jours et votre Minimum scheduling notice sur 48 heures, les clients peuvent ne voir aucune date réservable.

Après les ajustements, cliquez sur Save et actualisez votre boutique — les dates deviendront sélectionnables.

✅ Étape 8 : Vérifiez les paramètres de fuseau horaire

Un mauvais fuseau horaire peut décaler vos créneaux — ou donner l’impression qu’aucun créneau n’est disponible aux heures attendues.

Ouvrez votre service → onglet Availability → carte Timezone & hour format :

• Confirmez que votre Timezone est correct
• Lock timezone → Lorsqu’il est activé, tous les clients voient les horaires dans votre fuseau horaire, où qu’ils se trouvent
• Show timezone selector → Permet aux clients de basculer vers leur propre fuseau horaire

💡 Si des clients situés dans d’autres pays signalent des horaires « manquants », ils voient probablement votre planning converti dans leur fuseau horaire local.

✅ Étape 9 : Vérifiez si les créneaux sont complets ou si les limites sont atteintes

Parfois, le calendrier fonctionne correctement — les créneaux sont simplement pris.

Vérifiez les éléments suivants :

• Maximum bookings per time slot → La valeur par défaut est 1, donc un créneau disparaît dès qu’une personne le réserve. Augmentez-la pour les cours ou séances en groupe
• Maximum bookings per day → Une fois atteint, toute la journée devient indisponible
• Existing bookings → Ouvrez la page Bookings pour voir quels créneaux sont déjà réservés

Vous utilisez le mode Availability per teammate ?

Si aucun coéquipier n’est assigné au service, aucun créneau ne sera généré :

→ Availability tab → Assign teammates to this service, ou repassez en Availability per service

💡 Vous souhaitez que les jours complets restent visibles ?

Activez la Waitlist dans l’onglet Payment, puis activez Show waitlist when a slot is fully booked — les clients verront une option “Join waitlist” au lieu d’un calendrier vide.

⚠️ Bon à savoir

• L’aperçu dans la page de configuration du service est approximatif — faites toujours confiance au calendrier sur votre live product page
• Le bloc d’application Appointment Calendar nécessite également l’App Embed de l’étape 1
• Chaque produit ou variante ne peut être connecté qu’à one active service à la fois

Toujours pas affiché ?

Si vous avez essayé toutes les étapes ci-dessus et que le calendrier de prise de rendez-vous n’est toujours pas visible :

1. Réenregistrez le service
2. Confirmez que App Status indique Active
3. Testez sur la live product page (pas dans l’aperçu du thème)
4. Testez dans une fenêtre Incognito / Private

Si le problème persiste, n’hésitez pas à nous contacter directement depuis l’application Hoppy Appointments.

Pour nous aider à résoudre le problème plus rapidement, veuillez inclure :

• L’URL de votre boutique
• L’URL de la page produit où le calendrier devrait apparaître
• Votre Service ID (My services → More → Copy Service ID)
• Le nom de votre thème
• Une capture d’écran de la carte App Status

Nous serons ravis de vous aider 🙌

Mis à jour le : 10/09/2026