ℹ️ 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 vous donne deux façons d'afficher le calendrier de réservation sur votre vitrine:

1. Bouton de réservation automatique — remplace le bouton Ajouter au panier sur les pages de produits connectées à vos services.
2. Bloc de calendrier de rendez-vous manuel — placer une carte de réservation ou un calendrier en ligne sur toute page en utilisant ShopifyÉditeur de thème.

Ce guide vous accompagne dans les deux méthodes afin que les clients puissent commencer à réserver directement depuis votre magasin.

⚠️ Avant de commencer

Avant d'intégrer le calendrier, assurez-vous d'avoir :

• Les Hoppy Appointments app installée sur votre Shopify magasin
• Au moins un service créé et connecté à une Shopify Produit
• Une idée claire de si vous voulez un calendrier contextuel ou un calendrier en ligne sur la page

Si vous n'avez pas encore créé de service, commencez par Comment configurer les services de réservation de rendez-vous D'abord.

🛠️ Étape 1 — Activer l'application Réservations de rendez-vous

L'intégration de l'application est le commutateur principal qui fait fonctionner le widget de réservation. Il doit être activé pour l'intégration automatique et manuelle.

Option A: Activer depuis l'intérieur de l'application

1. Ouvrir la Hoppy Appointments app
2. Dans tableau de bord, Trouvez la État de l' application carte
3. Cliquez sur Activer

Cela ouvre votre Shopify éditeur de thème directement à la section d'intégration de l'application.

Option B: Activer manuellement depuis Shopify Administrateur

1. Allez à Shopify Admin → Boutique en ligne → Thèmes
2. Cliquez sur Personnaliser sur votre thème en direct
3. Cliquez sur le Intégrations d'applications icône en haut
4. Rechercher Réservations de rendez-vous
5. C'est parti. SUR
6. Cliquez sur Enregistrer

Une fois activé, le État de l' application carte à l'intérieur Hoppy Appointments montre Activité.

🛠️ Étape 2 — Assurez-vous que votre service est actif et sauvegardé

Le widget de réservation n'apparaît que pour les services enregistrés et activés.

1. Dans l'application, allez à Mes services
2. Vérifiez le badge à côté de votre service:
3. • Activité ✅ — le service est en direct
   • Inactif — ouvrir la Plus menu et cliquez sur Allumez
   • Archivé — ouvrir la Plus menu et cliquez sur Unarchive, puis allumez
3. Ouvrez le service et cliquez Enregistrer

L'épargne re-synchronise votre service avec la vitrine. Ceci est important après avoir modifié les variantes de produits, les prix ou la disponibilité.

🛠️ Étape 3 — Vérifiez le bouton du livre maintenant sur votre page de produit

Une fois l'intégration de l'application active et le service sauvegardé, la page de produit connectée à votre service affichera automatiquement une Réservez maintenant bouton au lieu de Ajouter au panier.

1. Ouvrez votre vitrine en direct
2. Aller au produit connecté à votre service
3. Confirmer Réservez maintenant bouton apparaît
4. Cliquez dessus pour ouvrir le popup de réservation

Si votre produit a plusieurs variantes, basculez entre elles. Le bouton Book Now n'apparaît que pour les variantes qui font partie du service.

💡 Le sélecteur de quantité est désactivé pour les produits réservables car chaque réservation est pour une fente à la fois.

🛠️ Étape 4 — Ajouter le bloc de calendrier de nomination manuellement (facultatif)

Utilisez cette méthode si:

• Votre thème utilise un constructeur de page ou un formulaire de produit personnalisé
• Vous voulez le calendrier sur une page qui n'est pas une page de produit
• Vous voulez une carte de réservation style avec les détails du service
• Vous voulez le calendrier complet intégré directement sur la page

Ajouter le bloc

1. Allez à Shopify Admin → Boutique en ligne → Thèmes
2. Cliquez sur Personnaliser sur votre thème en direct
3. Naviguez vers la page où vous voulez le calendrier
4. Cliquez sur Ajouter un bloc ou Ajouter une section
5. Rechercher Applications → Calendrier des rendez-vous
6. Coller votre Numéro de service
7. Choisir un Mode intégré

Trouvez votre ID de service

• Ouvrir la page d'édition de service — l'ID de service est affiché en haut
• Ou aller à Mes services → Plus → Copier l'ID de service

Choisissez un mode d'intégration

• Modale — affiche une carte de réservation avec l'image de service, le titre, la description, le prix, Réservez maintenant bouton qui ouvre le calendrier dans un popup
• Direct — intègre le calendrier complet de réservation directement sur la page afin que les clients puissent choisir des dates et des heures sans ouvrir de popup

Configuration du style de base

Le bloc vous permet de personnaliser :

• Couleur de fond
• Couleur du titre et taille de la police
• Prix couleur et taille de police
• Option couleur d'étiquette et taille de police
• Réserver couleur bouton, fond et taille de police
• Afficher les détails lien couleur, fond, taille de police et visibilité

Pour des options de style plus profondes, voir Réservations de rendez-vous — Options de conception et de styling.

Enregistrer le thème

Cliquez sur Enregistrer dans l'éditeur de thème, puis afficher la page en direct.

⚠️ Le bloc Calendrier des rendez-vous nécessite toujours Réservations de rendez-vous app inclu à activer. Sinon, le bloc affiche un message "App Embed Not Enabled".

👀 Ce que les clients voient

Bouton de réservation automatique

1. Le client visite la page produit
2. Ils voient un Réservez maintenant bouton au lieu de Ajouter au panier
3. Ils le cliquent et un calendrier s'ouvre
4. Ils choisissent la date, l'heure et remplissent le formulaire de réservation
5. Si le paiement est activé, le produit est ajouté au panier
6. Si le paiement n'est pas activé, la réservation est confirmée immédiatement

Bloc modal manuel

1. Le client visite la page où vous avez placé le bloc
2. Ils voient une carte avec des détails de service, le prix et les options de variante ou de durée
3. Ils cliquent Réservez maintenant pour ouvrir le calendrier contextuel
4. Ils complètent le flux de réservation

Bloc manuel direct

1. Le client visite la page où vous avez placé le bloc
2. Le calendrier complet se charge en ligne alors qu'ils défilent en vue
3. Ils choisissent une date et une heure directement sur la page
4. Ils remplissent le formulaire de réservation et la caisse

⚠️ Remarques importantes

• L'application est nécessaire pour les deux méthodes. Même si vous utilisez le bloc manuel, l'intégration des réservations de rendez-vous doit être activée.
• Utilisez votre thème publié en direct. Le calendrier n'apparaîtra pas sur des thèmes provisoires ou inédits.
• Un service actif par variante de produit. Si une variante est connectée à plus d'un service actif, le comportement peut être imprévisible.
• Économisez après chaque changement. Variantes de produits, prix, disponibilité, et paramètres de service n'atteignent le magasin qu'après avoir cliqué sur Enregistrer.
• Le bouton Book Now cache l'original Ajouter au panier et les boutons de caisse dynamiques pour les variantes réservables seulement. Les autres produits restent inchangés.
• Quantités désactivées pour les produits réservables parce que les réservations sont des achats à un seul emplacement.

🐞 Dépannage

Le bouton Book Now n'apparaît pas

• Confirmer État de l' application montre Activité
• Assurez-vous que le service est sauvegardé et actif
• Vérifiez que vous regardez la page de produit et la variante correctes
• Assurez-vous que vous testez sur le thème en direct, pas un brouillon
• Hard rafraîchir la page ou le test dans une fenêtre Incognito

Le bloc manuel affiche "App Embed Not Enabled"

Revenez à l'étape 1 et activez l'application Réservations de rendez-vous.

Le bloc manuel affiche "Configuration du service de pointage non trouvée"

Vérifiez deux fois Numéro de service Vous avez collé. Vous pouvez le copier à nouveau de Mes services → Plus → Copier l'ID de service.

Le calendrier s'ouvre mais aucune date n'est disponible

Vérifiez votre service Disponibilité onglet. Assurez-vous que les jours ouvrables sont activés, que l'avis d'attente et d'horaire minimal sont raisonnables et que les dates bloquées ne couvrent pas tout.

Pour un dépannage complet, voir Calendrier de réservation de rendez-vous n'est pas affiché sur mon magasin [Fixé].

🎉 Résultat final

Une fois configuré :

✅ L'application Réservations de rendez-vous est activée dans votre thème
✅ Votre service est sauvegardé, actif et connecté au bon produit
✅ Les Réservez maintenant bouton apparaît automatiquement sur la page du produit
✅ En option, un bloc Calendrier des rendez-vous est placé sur n'importe quelle page que vous choisissez
✅ Les clients peuvent réserver directement depuis votre magasin

📚 Articles connexes

• Comment configurer les services de réservation de rendez-vous
• Calendrier de réservation de rendez-vous n'est pas affiché sur mon magasin [Fixé]
• Réservations de rendez-vous — Options de conception et de styling
• Comment définir CSS personnalisé pour les réservations de rendez-vous App
• Comment mettre en place un bouton d'action flottant comme Calendly pour les réservations de rendez-vous
• Réservations de rendez-vous — Toutes les options de paiement expliquées
• Réservations de rendez-vous — Types de réservations expliqués

Mis à jour le : 10/09/2026