> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 📅 Comment intégrer le calendrier de réservation de rendez-vous dans votre boutique > ℹ️ **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: * **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**