Ajout de points interactifs
Les points interactifs sont les zones cliquables qui donnent vie à vos Espaces interactifs. Ce guide couvre tout ce que vous devez savoir sur la création, le positionnement et le style de ces éléments interactifs.
🎯 Qu'est-ce que les points interactifs ?
Les points interactifs sont des zones cliquables superposées à votre image de fond qui révèlent des informations produit, des liens ou du contenu personnalisé. Lorsque les visiteurs survolent ou cliquent sur ces points, ils voient :
Détails du produit et tarification
Options d'ajout rapide au panier
Liens vers les pages produits
Texte personnalisé ou messages d'appel à l'action
🛠️ Ajouter votre premier point interactif
Étape 1 : Accéder aux paramètres du point
Ouvrir le personnalisateur de thème
Accédez à Boutique en ligne → Thèmes
Cliquez sur Personnaliser les sur Plain Jane Interactive
Sélectionner la section Environnement interactif
Cliquez sur votre section Environnement interactif
Faites défiler jusqu’à Points interactifs
Ajouter un nouveau point
Cliquez sur Ajouter un point interactif
Une nouvelle configuration de point apparaîtra
Étape 2 : Configurer le contenu du point
Points basés sur les produits
Sélectionner un produit
Cliquez sur Sélectionner le produit
Choisir parmi le catalogue de produits de votre boutique
Le titre du produit, le prix et l'image se rempliront automatiquement
Options de remplacement
Titre personnalisé: Remplacer le nom du produit
Description personnalisée: Ajouter des détails spécifiques
Afficher le prix: Activer/désactiver l'affichage du prix
Points à lien personnalisé
Activer le lien personnalisé
Basculer Utiliser le lien personnalisé sur ON
Entrez votre URL de destination
Ajouter un titre et une description personnalisés
Étape 3 : Positionner votre point
Positionnement visuel
Position X (Horizontale)
Plage de valeurs : 0-100%
0% = Bord gauche extrême
50% = Centre
100% = Bord droit extrême
Position Y (Verticale)
Plage de valeurs : 0-100%
0% = Bord supérieur
50% = Milieu
100% = Bord inférieur
Conseils de positionnement
Utilisez le mode aperçu pour voir le placement des points en temps réel
Ajustez finement avec de petits incréments (ajustements de 1-2%)
Testez sur différentes tailles d'écran pour assurer un placement correct
🎨 Styliser vos points
Options d'apparence du point
Types de style
Pulse (par défaut)
Cercle animé en pulsation
Idéal pour attirer l'attention
Un mouvement subtil capte l'œil
Icône plus
Symbole "+" épuré
Minimal et moderne
Adapté aux thèmes professionnels/corporate
Point
Indicateur circulaire simple
Option la plus subtile
Se fond naturellement dans les images
Personnalisation des couleurs
Couleur primaire: Couleur principale du point
Couleur secondaire: Couleur d'accent ou de pulsation
Couleur du texte: Texte de la superposition de contenu
Couleur d'arrière-plan: Fond du point
Taille et visibilité
Taille du point: Ajuster le diamètre (par défaut : 40px)
Intensité de la pulsation: Contrôler la force de l'animation
Opacité: Définir la transparence du point
Z-index: Ordre de calque (plus élevé = plus visible)
📱 Considérations mobiles
Conception adaptée au toucher
Taille minimale: 44px pour un tap facile
Espacement: Au moins 8px entre les points
Contraste: Assurer la visibilité des points sur mobile
Paramètres spécifiques au mobile
Afficher sur mobile: Basculer la visibilité des points
Multiplicateur de taille mobile: Ajuster la taille pour les petits écrans
Animations simplifiées: Réduire le mouvement pour les performances
🔧 Configuration avancée des points
Effets au survol
/* Animations personnalisées au survol */
.interactive-point:hover {
transform: scale(1.2);
transition: transform 0.3s ease;
}Superpositions de contenu personnalisées
Formatage de texte enrichi: Utiliser du HTML dans les descriptions
Superpositions d'images: Ajouter des images produit aux info-bulles
Contenu vidéo: Intégrer des vidéos produit
Preuve sociale: Inclure des avis ou des évaluations
Affichage conditionnel
Afficher/masquer selon l'appareil: Mobile vs bureau
Affichage basé sur le temps: Contenu saisonnier ou promotionnel
Comportement utilisateur: Afficher un contenu différent pour les visiteurs de retour
💡 Bonnes pratiques
Placement stratégique
Mettre en avant les produits clés
Mettre en valeur les meilleures ventes ou les nouveautés
Se concentrer sur les articles à forte marge
Créer des groupements de produits logiques
Positionnement naturel
Placer les points sur ou près des produits réels dans l'image
Éviter les espaces vides ou un placement aléatoire
Considérer le parcours oculaire du spectateur
Distribution équilibrée
Ne regroupez pas tous les points dans une seule zone
Créer un rythme visuel à travers l'espace
Laisser de l'air entre les éléments
Stratégie de contenu
Texte accrocheur
Utiliser un langage orienté action
Mettre en avant les caractéristiques ou bénéfices uniques
Garder le texte concis et facile à scanner
Stratégie de tarification
Afficher les prix pour une transparence immédiate
Utiliser les prix en promotion pour créer de l'urgence
Envisager de masquer les prix pour les articles de luxe
Optimisation des appels à l'action
CTA clairs et spécifiques ("Acheter maintenant", "En savoir plus")
Créer de l'urgence lorsque c'est approprié
Adapter le style du CTA à la voix de votre marque
🎪 Idées créatives de mise en œuvre
Campagnes saisonnières
Collections de fêtes: Guides cadeaux interactifs
Été/Hiver: Vitrines de produits saisonniers
Rentrée: Essentiels pour étudiants dans des décors de dortoir
Intégration au style de vie
Rénovations de pièces: Avant/après avec produits achetables
Créateurs de tenues: Coordination de looks complets
Intégration de recettes: Ustensiles de cuisine dans des contextes culinaires
Narration de la marque
Dans les coulisses: Processus de production avec mise en avant d'outils
Héritage de la marque: Frise chronologique historique avec évolution des produits
Durabilité: Caractéristiques de produits écologiques
📊 Optimisation des performances
Considérations de chargement
Optimisation des images: Compresser les images de fond
Limites de points: Maximum 10-12 points par section
Chargement paresseux: Charger les points lorsqu'ils arrivent dans la zone visible
Intégration analytique
// Suivre les interactions avec les points
function trackPointClick(productId, pointPosition) {
// Envoyer à la plateforme d'analyse
gtag('event', 'interactive_point_click', {
'product_id': productId,
'position_x': pointPosition.x,
'position_y': pointPosition.y
});
}🐛 Dépannage
Problèmes courants
Points non affichés
Vérifier les valeurs de positionnement: Doivent être entre 0 et 100%
Vérifier le statut du produit: S'assurer que les produits sont publiés
Visibilité de la section: Confirmer que la section est activée
Problèmes d'affichage sur mobile
Taille de la cible tactile: Augmenter la taille du point pour le mobile
Problèmes de fenêtre d'affichage: Tester sur différentes tailles d'appareils
Performance: Réduire les animations sur les appareils lents
Chevauchement de contenu
Conflits de Z-index: Ajuster l'ordre des calques
Positionnement des info-bulles: Configurer le placement des superpositions
Points de rupture responsives: Définir des positions différentes pour différents écrans
Problèmes de performance
Chargement lent: Optimiser les images et réduire le nombre de points
Ralentissement des animations: Simplifier les effets ou désactiver sur mobile
Utilisation de la mémoire: Implémenter le chargement paresseux pour les grandes sections
🔍 Tests et optimisation
Idées de tests A/B
Placement des points: Tester différentes positions
Styles visuels: Comparer pulsation vs points statiques
Types de contenu: Informations produit vs messages personnalisés
Schémas de couleurs: Tester les couleurs de marque vs des couleurs contrastées
Métriques à suivre
Taux de clics: Clics sur les points vers visites des pages produit
Taux de conversion: Achats provenant des points interactifs
Temps d'engagement: Temps passé à interagir avec les points
Mobile vs bureau: Différences de performance selon l'appareil
Mis à jour