# So erstellen Sie einen interaktiven Raum

Die Funktion Interactive Space ist einzigartig bei Plain Jane Interactive und ermöglicht es Ihnen, immersive, anklickbare Umgebungen zu erstellen, in denen Kund:innen Produkte im Kontext erkunden können.

## 🌟 Übersicht

Interactive Spaces verwandeln statische Produktdarstellungen in fesselnde, erkundbare Umgebungen. Ideal für:

* Raumsettings und Lifestyle-Aufnahmen
* Produktpräsentationen in natürlichen Umgebungen
* Immersives Markenerzählen
* Interaktive Lookbooks

## 📋 Einrichtung Ihres Interactive Space

### Schritt 1: Abschnitt für die interaktive Umgebung hinzufügen

1. **Zum Theme-Customizer navigieren**
   * Gehen Sie zu **Onlineshop → Themes**
   * Klicken Sie **Passen Sie** zu Ihrem Plain Jane Interactive-Theme
2. **Abschnitt für interaktive Umgebung hinzufügen**
   * Klicken Sie **Sektion hinzufügen**
   * Wählen Sie **Interaktive Umgebung**
   * Wählen Sie die gewünschte Position auf der Seite

### Schritt 2: Hintergrund konfigurieren

1. **Hintergrundbild hochladen**
   * Klicken Sie auf den **Interaktive Umgebung** Abschnitt
   * Unter **Hintergrund**, klicken Sie **Bild auswählen**
   * Wählen Sie ein hochauflösendes Bild (empfohlen: 1600x900 px oder größer)
   * Das Bild sollte eine Szene zeigen, in der Produkte natürlich platziert werden können
2. **Hintergrund-Einstellungen**
   * **Bildanpassung**: Wählen Sie, wie das Bild den Container füllt
     * `Cover`: Füllt den Container, Bild kann zugeschnitten werden
     * `Contain`: Zeigt das gesamte Bild, es kann leerer Raum verbleiben
   * **Hintergrundposition**: Legen Sie den Fokuspunkt Ihres Bildes fest

### Schritt 3: Interaktive Punkte hinzufügen

Interaktive Punkte sind anklickbare Hotspots, die Produktinformationen oder Links anzeigen.

1. **Erstellen Sie Ihren ersten Punkt**
   * In den Abschnittseinstellungen nach unten scrollen zu **Interaktive Punkte**
   * Klicken Sie **Interaktiven Punkt hinzufügen**
2. **Punkt-Einstellungen konfigurieren**
   * **Produkt**: Verlinkung zu einem bestimmten Produkt aus Ihrem Shop
   * **Position X**: Horizontale Position (0–100%)
   * **Position Y**: Vertikale Position (0–100%)
   * **Punktstil**: Wählen Sie das visuelle Erscheinungsbild
     * `Pulse`: Animierter pulsierender Punkt
     * `Plus`: Einfaches Plus-Symbol
     * `Punkt`: Minimaler Punktindikator
3. **Punktinhalt**
   * **Benutzerdefinierter Text**: Überschreibt bei Bedarf den Produkttitel
   * **Benutzerdefinierter Link**: Verwenden Sie einen externen Link statt eines Produkts
   * **PreisAnzeige**: Produktpreise anzeigen/ausblenden

## 🎯 Beste Praktiken

### Bildauswahl

* Verwenden Sie hochwertige, gut beleuchtete Fotografien
* Achten Sie auf guten Kontrast zwischen Produkten und Hintergrund
* Berücksichtigen Sie die mobile Ansicht – vermeiden Sie übermäßig komplexe Szenen
* Empfohlene Mindestauflösung: 1200x675 px

### Punktplatzierung

* Platzieren Sie Punkte direkt auf oder in der Nähe der gezeigten Produkte
* Vermeiden Sie das Clustern zu vieler Punkte in einem Bereich
* Testen Sie auf mobilen Geräten auf Touch-Freundlichkeit
* Verwenden Sie durchgehend konsistente Punktstile im gesamten Space

### Content-Strategie

* Präsentieren Sie Ihre Bestseller oder neuesten Produkte
* Erstellen Sie thematische Umgebungen (Schlafzimmer, Küche, Büro)
* Erzählen Sie eine Geschichte durch Produktplatzierung
* Halten Sie Texte knapp und überzeugend

## 📱 Mobiloptimierung

Der Interactive Space passt sich automatisch an Mobilgeräte an:

* Touch-freundliche Punktgrößen
* Responsive Bildskalierung
* Optimierte Animationen für Leistung
* Vereinfachte Interaktionen für kleine Bildschirme

## 🎨 Styling-Optionen

### Aussehen der Punkte

* **Puls-Animation**: Zieht mit subtiler Bewegung Aufmerksamkeit auf sich
* **Farb-Anpassung**: Auf Ihre Markenfarben abstimmen
* **Größenoptionen**: Anpassen an Bildskalierung und Sichtbarkeit

### Overlay-Stile

* **Produktkarten**: Umfangreiche Anzeige von Produktinformationen
* **Minimale Tooltips**: Saubere, einfache Produktinfos
* **Benutzerdefiniertes Styling**: Erweiterte CSS-Anpassungsoptionen

## 🔧 Fehlerbehebung

### Punkte werden nicht angezeigt

* Überprüfen Sie, dass die Werte für Position X und Y zwischen 0–100 liegen
* Stellen Sie sicher, dass das Produkt veröffentlicht und verfügbar ist
* Vergewissern Sie sich, dass der Abschnitt in den Theme-Einstellungen aktiviert ist

### Anzeigeprobleme auf Mobilgeräten

* Testen Sie den Punktabstand auf verschiedenen Bildschirmgrößen
* Passen Sie die Punktgrößen für Touch-Ziele an (mindestens 44 px)
* Erwägen Sie, die Anzahl der Punkte für Mobilgeräte zu reduzieren

### Leistungsoptimierung

* Optimieren Sie Hintergrundbilder (verwenden Sie wenn möglich WebP-Format)
* Begrenzen Sie auf 8–10 interaktive Punkte pro Abschnitt
* Verwenden Sie Lazy Loading für bessere Seitenladezeiten

## 💡 Kreative Ideen

### Raumeinstellungen

Erstellen Sie realistische Raumumgebungen, die zeigen, wie Produkte in Gebrauch aussehen:

* Wohnzimmer mit Möbeln und Dekor
* Küche mit Geräten und Accessoires
* Schlafzimmer mit Bettwäsche und Beleuchtung

### Produktkollektionen

Gruppieren Sie verwandte Produkte in natürlichen Umgebungen:

* Outfit-Kombinationen an Models
* Werkzeugsammlungen in Werkstatt-Settings
* Kosmetikprodukte in Schminkarrangements

### Saisonale Displays

Aktualisieren Sie Interactive Spaces für Feiertage und Jahreszeiten:

* Geschenkführungen für Feiertage
* Sommerliche Outdoor-Kollektionen
* Zurück-in-die-Schule-Essentials

## 📊 Analyse und Performance

Verfolgen Sie die Wirksamkeit Ihrer Interactive Spaces:

* Überwachen Sie Klickrate auf interaktive Punkte
* Verfolgen Sie Conversions vom Interactive Space zu Produktseiten
* Nutzen Sie Shopify-Analytics zur Messung des Engagements
* Führen Sie A/B-Tests mit verschiedenen Punktplatzierungen und Stilen durch