# 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

```css
/* 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

```javascript
// 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