> For the complete documentation index, see [llms.txt](https://docs.openspaces.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.openspaces.design/plain-jane-docs-v2-fr/plain-jane-interactive/sections-and-features/how-to-create-an-interactive-space.md).

# Comment créer un espace interactif

La fonctionnalité Espace interactif est exclusive à Plain Jane Interactive et vous permet de créer des environnements immersifs cliquables où les clients peuvent explorer les produits dans leur contexte.

## 🌟 Aperçu

Les Espaces interactifs transforment des présentations de produits statiques en environnements engageants et explorables. Parfait pour :

* Décors de pièces et photos de style de vie
* Présentations de produits dans des environnements naturels
* Récits de marque immersifs
* Lookbooks interactifs

## 📋 Configuration de votre Espace interactif

### Étape 1 : Ajouter la section Environnement interactif

1. **Naviguer vers le personnalisateur de thème**
   * Aller à **Boutique en ligne → Thèmes**
   * Cliquer sur **Personnaliser** sur votre thème Plain Jane Interactive
2. **Ajouter la section Environnement interactif**
   * Cliquer sur **Ajouter une section**
   * Sélectionnez **Environnement interactif**
   * Choisissez l'emplacement souhaité sur la page

### Étape 2 : Configurez votre arrière-plan

1. **Télécharger l'image d'arrière-plan**
   * Cliquez sur la **Environnement interactif** section
   * Sous **Arrière-plan**, cliquez **Sélectionner l'image**
   * Choisissez une image haute résolution (recommandé : 1600x900 px ou plus)
   * L'image doit montrer une scène où les produits peuvent être naturellement placés
2. **Paramètres d'arrière-plan**
   * **Ajustement de l'image**: Choisissez comment l'image remplit le conteneur
     * `Couvrir`: Remplit le conteneur, peut rogner l'image
     * `Contain`: Affiche l'image entière, peut laisser des espaces vides
   * **Position de l'arrière-plan**: Définir le point focal de votre image

### Étape 3 : Ajouter des points interactifs

Les points interactifs sont des zones cliquables qui dévoilent des informations sur le produit ou des liens.

1. **Créez votre premier point**
   * Dans les paramètres de la section, faites défiler jusqu'à **Points interactifs**
   * Cliquer sur **Ajouter un point interactif**
2. **Configurer les paramètres du point**
   * **Produit**: Lier à un produit spécifique de votre boutique
   * **Position X**: Position horizontale (0-100%)
   * **Position Y**: Position verticale (0-100%)
   * **Style du point**: Choisir l'apparence visuelle
     * `Pulse`: Point animé avec pulsation
     * `Plus`: Icône simple en forme de plus
     * `Point`: Indicateur ponctuel minimal
3. **Contenu du point**
   * **Texte personnalisé**: Remplacer le titre du produit si nécessaire
   * **Lien personnalisé**: Utiliser un lien externe au lieu du produit
   * **Affichage du prix**: Afficher/masquer le prix du produit

## 🎯 Bonnes pratiques

### Sélection d'images

* Utilisez des photographies de haute qualité et bien éclairées
* Assurez un bon contraste entre les produits et l'arrière-plan
* Tenez compte de la consultation sur mobile — évitez les scènes trop complexes
* Résolution minimale recommandée : 1200x675 px

### Placement des points

* Placez les points directement sur ou près des produits présentés
* Évitez de regrouper trop de points dans une même zone
* Testez sur des appareils mobiles pour la compatibilité tactile
* Utilisez des styles de points cohérents dans tout l'espace

### Stratégie de contenu

* Mettez en avant vos produits les plus vendus ou les plus récents
* Créez des environnements thématiques (chambre, cuisine, bureau)
* Racontez une histoire grâce au placement des produits
* Gardez le texte concis et percutant

## 📱 Optimisation mobile

L'espace interactif s'adapte automatiquement aux appareils mobiles :

* Tailles de points adaptées au tactile
* Redimensionnement réactif des images
* Animations optimisées pour la performance
* Interactions simplifiées pour les petits écrans

## 🎨 Options de style

### Apparence des points

* **Animation pulsante**: Attire l'attention par un mouvement subtil
* **Personnalisation des couleurs**: Assortir les couleurs de votre marque
* **Options de taille**: Ajuster selon l'échelle de l'image et la visibilité

### Styles de superposition

* **Cartes produit**: Affichage riche des informations produit
* **Infobulles minimalistes**: Informations produit propres et simples
* **Styles personnalisés**: Options avancées de personnalisation CSS

## 🔧 Dépannage

### Points qui n'apparaissent pas

* Vérifiez que les valeurs de Position X et Y sont comprises entre 0 et 100
* Assurez-vous que le produit est publié et disponible
* Vérifiez que la section est activée dans les paramètres du thème

### Problèmes d'affichage sur mobile

* Testez l'espacement des points sur différentes tailles d'écran
* Ajustez la taille des points pour les cibles tactiles (minimum 44 px)
* Envisagez de réduire le nombre de points pour le mobile

### Optimisation des performances

* Optimisez les images d'arrière-plan (utilisez le format WebP lorsque possible)
* Limitez à 8-10 points interactifs par section
* Utilisez le chargement paresseux pour améliorer la vitesse de la page

## 💡 Idées créatives

### Ambiances de pièce

Créez des environnements de pièce réalistes montrant comment les produits apparaissent en utilisation :

* Salon avec meubles et décor
* Cuisine avec appareils et accessoires
* Chambre avec literie et éclairage

### Collections de produits

Regroupez des produits liés dans des décors naturels :

* Combinaisons de tenues sur des modèles
* Ensembles d'outils dans des ateliers
* Produits de beauté disposés sur une coiffeuse

### Présentations saisonnières

Mettez à jour les espaces interactifs pour les fêtes et les saisons :

* Guides cadeaux pour les fêtes
* Collections d'extérieur estivales
* Essentiels de la rentrée

## 📊 Analyses et performances

Suivez l'efficacité de vos espaces interactifs :

* Surveillez les taux de clics sur les points interactifs
* Suivez les conversions de l'espace interactif vers les pages produit
* Utilisez les analyses Shopify pour mesurer l'engagement
* Testez en A/B différents emplacements et styles de points


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.openspaces.design/plain-jane-docs-v2-fr/plain-jane-interactive/sections-and-features/how-to-create-an-interactive-space.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.