Comment ajouter Koalendar à Shopify
Permettez à vos clients de prendre rendez-vous sans quitter votre boutique Shopify. Il suffit de deux étapes rapides :
- Copiez votre code d'intégration Koalendar (ou lien)
- Collez -le dans la zone Custom Liquid/HTML de Shopify et enregistrez.
📑 Menu
- Étape 1 – Copiez votre code d'intégration Koalendar
- Étape 2 – Ajoutez-le dans Shopify
- Dépannage
- Quel style dois-je utiliser ?
📋 Étape 1 – Copiez votre code d'intégration Koalendar
- Dans le tableau de bord Koalendar, cliquez sur Partager à côté de la page de réservation que vous souhaitez utiliser.
- Sélectionnez Ajouter au site Web.
- Choisissez un style d'intégration et cliquez sur Copier le code.
| Style intégré | Ce que voient les acheteurs |
|---|---|
| Intégration en ligne 🖥️ | Le calendrier complet apparaît directement sur la page du produit. |
| Widget contextuel 📍 | Bouton « Réserver maintenant » flottant qui ouvre le calendrier dans une fenêtre contextuelle. |
| Texte/bouton contextuel 🔗 | Tout lien ou bouton déclenche l'affichage d'un calendrier contextuel. |
🎨 Astuce : personnalisez les couleurs, le texte et la position dans Koalendar avant de copier afin que cela corresponde au thème de votre boutique.
➕ Vous avez juste besoin d'un lien normal ? Copiez votre URL de partage Koalendar et associez-la à n'importe quel bouton ou élément de menu pour ouvrir le planificateur dans un nouvel onglet.
📝 Étape 2 – Ajoutez-le dans Shopify
A. Intégration en ligne ou texte/bouton contextuel (page ou section)
- Dans l'interface d'administration Shopify, accédez à Boutique en ligne → Thèmes, puis cliquez sur Personnaliser pour votre thème publié.
- Accédez à la page ou au modèle où vous souhaitez insérer le calendrier.
- Cliquez sur Ajouter une section (ou Ajouter un bloc), choisissez Liquid personnalisé (ou HTML personnalisé pour les thèmes plus anciens).
- Collez votre code Koalendar dans la zone de texte.
- Enregistrez puis prévisualisez: le calendrier ou la fenêtre contextuelle devrait se charger instantanément.
B. Widget contextuel (bouton flottant sur l'ensemble du site)
- Boutique en ligne → Thèmes → Actions (... bouton) → Modifier le code.
- Ouvrez layout/theme.liquid (ou theme.liquid dans les thèmes plus récents).
- Faites défiler vers le bas et collez votre script widget Koalendar. juste avant ************
</body>. - Enregistrer. Le bouton flottant apparaît désormais sur votre vitrine.
📝 Certains thèmes proposent une boîte Paramètres du thème → Scripts personnalisés. Vous pouvez y coller le script du widget au lieu de modifier le code.
🛠️ Dépannage
| Problème | Correction |
| Le calendrier/widget ne s'affiche pas | Assurez-vous d'avoir collé l'intégralité du script et d'avoir enregistré le thème. Videz le cache de votre navigateur et rechargez la page. |
| Le lien contextuel s'affiche mais ne s'ouvre pas | Vérifiez que le snippet de déclenchement et le script Koalendar se trouvent sur la même page/le même modèle. |
| Widget sur toutes les pages, mais vous ne le voulez que sur une seule | Collez le code d'intégration sur cette page spécifique plutôt que sur theme.liquid. |
| La hauteur du calendrier semble incorrecte. | Ajustez la hauteur dans Koalendar avant de copier ou d'envelopper l'élément intégré dans une balise div avec un CSS personnalisé. |
🤔 Quel style dois-je utiliser ?
| Objectif | Meilleure méthode |
| Afficher le calendrier dans une page produit ou d'informations | Intégration en ligne 🖥️ |
| Appel à l'action dans tout le magasin | Widget contextuel 📍 |
| Ajouter un planning à un CTA existant | Texte/bouton contextuel 🔗 |
| Lien externe simple | Créez un lien hypertexte vers l'URL de votre Koalendar |