# 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 --- # Agent Instructions: 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: ``` GET https://docs.openspaces.design/german/plain-jane-interactive/sections-and-features/how-to-create-an-interactive-space.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.