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.

🎯 Que sont les points interactifs ?

Les points interactifs sont des zones cliquables superposées à votre image d'arrière-plan 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 et prix du produit

• Options d'ajout rapide au panier

• Liens vers les pages produit

• Texte personnalisé ou messages d'appel à l'action

🛠️ Ajouter votre premier point interactif

Étape 1 : Accéder aux paramètres du point

1. Ouvrir le personnalisateur de thème

   • Accédez à Boutique en ligne → Thèmes

   • Cliquer sur Personnaliser sur Plain Jane Interactive

2. Sélectionner la section Environnement Interactif

   • Cliquez sur votre section Environnement Interactif

   • Faites défiler jusqu'à Points interactifs

3. Ajouter un nouveau point

   • Cliquer sur Ajouter un point interactif

   • Une nouvelle configuration de point apparaîtra

Étape 2 : Configurer le contenu du point

Points basés sur un produit

1. Sélectionner un produit

   • Cliquer sur Sélectionner le produit

   • Choisissez dans le catalogue de produits de votre boutique

   • Le titre, le prix et l'image du produit se remplissent automatiquement

2. 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 avec lien personnalisé

1. Activer le lien personnalisé

   • Basculer Utiliser un lien personnalisé sur ON

   • Saisissez votre URL de destination

   • Ajouter un titre et une description personnalisés

Étape 3 : Positionner votre point

Positionnement visuel

1. Position X (Horizontale)

   • Plage de valeurs : 0-100%

   • 0% = Bord gauche

   • 50% = Centre

   • 100% = Bord droit

2. 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 des points

Types de style

1. Pulse (Par défaut)

   • Cercle animé qui pulse

   • Idéal pour attirer l'attention

   • Un mouvement subtil capte le regard

2. Icône Plus

   • Symbole "+" épuré

   • Minimal et moderne

   • Adapté aux thèmes professionnels/corporatifs

3. Point

   • Indicateur circulaire simple

   • Option la plus discrète

   • Se fond naturellement dans les images

Personnalisation des couleurs

• Couleur primaire: Couleur principale du point

• Couleur secondaire: Couleur d'accent ou de pulse

• Couleur du texte: Texte de 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é du pulse: Contrôler la puissance de l'animation

• Opacité: Définir la transparence du point

• Z-index: Ordre des calques (plus haut = plus visible)

📱 Considérations mobiles

Conception adaptée au tactile

• Taille minimale: 44px pour un tap facile

• Espacement: Au moins 8px entre les points

• Contraste: Assurez-vous que les points sont visibles sur mobile

Paramètres spécifiques au mobile

• Afficher sur mobile: Activer/désactiver 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: Utilisez du HTML dans les descriptions

• Superpositions d'image: Ajouter des images produit aux infobulles

• 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

1. Mettre en avant les produits clés

   • Mettre en lumière les best-sellers ou les nouveautés

   • Se concentrer sur les articles à forte marge

   • Créer des regroupements logiques de produits

2. Positionnement naturel

   • Placez les points sur ou près des produits réels dans l'image

   • Évitez les espaces vides ou les placements aléatoires

   • Considérez le chemin du regard du spectateur

3. Distribution équilibrée

   • Ne regroupez pas tous les points dans une seule zone

   • Créez un rythme visuel à travers l'espace

   • Laissez de l'espace entre les éléments

Stratégie de contenu

1. Texte attrayant

   • Utilisez un langage orienté action

   • Mettez en avant les caractéristiques ou avantages uniques

   • Gardez le texte concis et facile à scanner

2. Stratégie de tarification

   • Affichez les prix pour une transparence immédiate

   • Utilisez les prix soldés pour créer de l'urgence

   • Envisagez de cacher les prix pour les articles de luxe

3. Optimisation des appels à l'action

   • CTA clairs et spécifiques ("Acheter maintenant", "En savoir plus")

   • Créez de l'urgence lorsque c'est approprié

   • Adaptez le style du CTA à la voix de votre marque

🎪 Idées créatives de mise en œuvre

Campagnes saisonnières

• Collections de vacances: Guides cadeaux interactifs

• Été/Hiver: Vitrines de produits saisonniers

• Rentrée: Essentiels pour étudiants en contexte de dortoir

Intégration au style de vie

• Relooking de pièces: Avant/après avec produits achetables

• Constitueurs de tenues: Coordination d'une tenue complète

• Intégration de recettes: Ustensiles de cuisine dans des contextes culinaires

Narration de marque

• Dans les coulisses: Processus de production avec mise en avant d'outils

• Patrimoine de la marque: Frise historique avec évolution des produits

• Durabilité: Caractéristiques écoresponsables des produits

📊 Optimisation des performances

Considérations de chargement

• Optimisation des images: Compressez les images d'arrière-plan

• Limites de points: Maximum 10-12 points par section

• Chargement paresseux: Charger les points au fur et à mesure qu'ils entrent dans la vue

Intégration analytique

// Suivre les interactions avec les points
function trackPointClick(productId, pointPosition) {
  // Envoyer à la plateforme d'analytique
  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érifiez les valeurs de positionnement: Doivent être entre 0 et 100%

• Vérifiez le statut du produit: Assurez-vous que les produits sont publiés

• Visibilité de la section: Confirmez que la section est activée

Problèmes d'affichage sur mobile

• Taille de la cible tactile: Augmentez la taille du point pour le mobile

• Problèmes de viewport: Testez sur différentes tailles d'appareils

• Performance: Réduisez les animations sur les appareils lents

Chevauchement de contenu

• Conflits de Z-index: Ajustez l'ordre des calques

• Positionnement des infobulles: Configurez le placement des superpositions

• Points de rupture responsive: Définissez différentes positions pour différents écrans

Problèmes de performance

• Chargement lent: Optimisez les images et réduisez le nombre de points

• Ralentissement des animations: Simplifiez les effets ou désactivez-les sur mobile

• Utilisation de la mémoire: Mettez en œuvre le chargement paresseux pour les grandes sections

🔍 Tests et optimisation

Idées de tests A/B

• Placement des points: Testez différentes positions

• Styles visuels: Comparez pulse vs points statiques

• Types de contenu: Informations produit vs messages personnalisés

• Schémas de couleurs: Testez les couleurs de marque vs des couleurs contrastées

Mesures à suivre

• Taux de clics: Clics sur les points vers visites de 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 performances selon l'appareil