Immersive Elements

In Zusammenarbeit mit Instorier, den norwegischen Experten für digitales Storytelling, haben wir eine innovative App entwickelt, die deinen Onlineshop in ein unvergessliches und dynamisches Markenerlebnis verwandelt.

Immersive Elements startet mit fünf leistungsstarken Komponenten durch, die darauf abzielen, deine Kunden zu begeistern, Markentreue zu stärken und Conversions zu erhöhen.

Vollständig optimiert für Mobile, Desktops und Spatial-Geräte, bietet die App ein beeindruckendes Einkaufserlebnis.

Immersive Elements fügt sich nahtlos in deine Shopware-Infrastruktur ein und stellt eine äußerst kosteneffiziente Alternative zur Nutzung externer Ressourcen dar.

Installation

Wenn für deine Shop-Domain mindestens der Shopware Rise Plan im Shopware-Account hinterlegt ist, kannst du die Erweiterung unter Erweiterungen > Meine Erweiterungen herunterladen und installieren.
Wichtig ist, dass du im Reiter Shopware Account mit deinem Account angemeldet bist. 
Nachdem die Erweiterung installiert wurde, kannst du diese über den Schalter auf der linken Seite aktivieren.

Weitere Informationen zur Verwaltung von Erweiterungen findest du hier.

Wenn du noch keinen Shopware Plan besitzt, kannst du die Erweiterung über den Shopware Store beziehen. Die monatliche Miete beträgt in diesem Fall 49€.

Die Elemente

Die nachfolgend genannten Elemente findest du in den Erlebniswelten im Bereich der Blöcke unter dem Punkt "Commerce".

Lernpfad verfügbar!
Im Community Hub wartet ein interaktiver Lernpfad zu diesem Thema auf dich. Dort kannst du Schritt für Schritt tiefer eintauchen, Funktionen direkt ausprobieren und dein Wissen spielerisch erweitern.

• Immersive Elements - Cylinder Gallery: Dieser Block ermöglicht eine interaktive Galerie, in der deine Bilder in einem 360° Slider angezeigt werden. Die Bilder werden hierbei in der Storefront automatisch im 360° Slider abgespielt. Wenn du mit der Maus darauf klickst, kannst du die Geschwindigkeit im Slider verlangsamen, beschleunigen oder sogar die Richtung wechseln.

• Immersive Elements - Depth Gallery: Deine Kunden erleben die Bilder in deiner Storefront mit unterschiedlichen Tiefen, die einen beeindruckenden Parallaxen-Effekt erzeugen, d.h. durch die Bewegungen des Mauszeigers und das Scrollen mit dem Mausrad werden die Bilder in diesem Element in die Richtungen bewegt, in die sich die Maus bzw. der Mauszeiger bewegt. Somit entsteht mehr Tiefe und Interaktivität in deinem Layout.

• Immersive Elements - Exploded View: Dieser Block ermöglicht die interaktive Darstellung von Produkten in einer Explosionsansicht. Einzelne Bauteile können gruppiert und in unterschiedlichen Detailstufen animiert auseinandergezogen werden. Nutzer können die Animation per Klick durchlaufen oder automatisch abspielen lassen, während Titel und Annotationen zusätzliche Erklärungen zu den einzelnen Schritten liefern. Zudem lassen sich spezifische Teile mit weiterführenden Informationen oder Kauf-Links versehen. Trotz der Animation bleibt das 3D-Modell interaktiv, sodass es weiterhin frei erkundet werden kann. Dieser Block ist kostenpflichtig (49 € / Monat, In-App-Kauf).

• Immersive Elements - 3D Model Journey: Mit diesem Block kannst du in deiner Erlebniswelt eine animierte Tour um dein Produkt in 3D erstellen und du kannst optionale Hotspots und Textinformationen hinzufügen.

• Immersive Elements - Slide Behind Gallery: Im Gegensatz zu herkömmlichen horizontalen Slidern, ändern sich hier die Inhalte horizontal und bringt so mehr Tiefe in das Layout.

• Immersive Elements - VR Cinema: Lass deine Kunden eintauchen in ein 3D- und Virtual-Reality-Kinoerlebnis, das Produkte und Geschichten zum Leben erwecken. Dieser Block macht es ebenso möglich Videos im Format webp einzusetzen.

Für eine wirkungsvollere Anzeige der Elemente in der Storefront, empfehlen wir bei der Auswahl des „Größenmodus“ in der Erlebniswelt den Modus Volle Breite (1) auszuwählen.

Ebenso erzielst du die beste Wirkung, wenn du die Elemente aus Immersive Elements direkt hintereinander in einer Sektion platzierst, ohne andere Elemente dazwischen.
Dadurch werden die einzelnen immersiven Elemente zu einem fließenden Erlebnis, das die Übergänge und die Leistung verbessert.

Konfiguration der Elemente

In dem Video von Instorier werden dir die verschiedenen Einstellmöglichkeiten der einzelnen Blöcke gezeigt. 

Die Blöcke 3D Model Journey und Exploeded View erklären wir nachfolgend im Detail, da diese etwas komplexer sind.

3D Model Journey:

Zunächst musst du innerhalb der Erlebniswelt auf das Zahnrad-Symbol des Blocks klicken, um in die Element-Einstellungen zu gelangen.

Du befindest dich nun direkt in den Settings (1) des Elements.

In den Element-Einstellungen findest du nun die Möglichkeit, eine .glb-Datei hochzuladen (2), um 3D-Modelle in der Storefront anzeigen zu lassen. Ebenso kannst du hier eine .mp3-Datei hochladen (3), um das Element in der Storefront mit einer Audio-Spur (z. B. einem Lied) zu versehen. In der Storefront wird oben rechts im Element ein Symbol für die Tonausgabe angezeigt, das von deinen Kunden auf Wunsch ein- oder ausgeschaltet werden kann. Im Feld Background color (4) kannst du eine Hintergrundfarbe für dein 3D-Modell angeben. Über die Schaltfläche Add media (5) kannst du weitere Bilder im Dateiformat .jpg, .png oder .webp hochladen, die dann in der Storefront im Hintergrund deines 3D-Modells als kleine Bilder angezeigt werden. Wenn die Interaktivität im Element aktiviert ist, werden die Bilder in der 360-Grad-Ansicht angezeigt. Im Bereich Content (1) des Elements kannst du nun weitere Einstellungen für die Anzeige des 3D-Modells vornehmen.

Zunächst kannst du weitere Snapshots zu deiner bestehenden Section 1 (2) hinzufügen, um verschiedene Darstellungen deines 3D-Modells in der Erlebniswelt zu präsentieren. So kannst du beispielsweise Abschnitte für die Frontansicht, die Seitenansicht und die Draufsicht deines 3D-Modells erstellen. Diese Abschnitte können auch unterschiedliche Lichteffekte aufweisen, die beim Scrollen in der Erlebniswelt angewendet werden.

Du kannst deinem 3D-Modell an frei wählbaren Stellen über die Schaltfläche Add hotspot (3) einen oder mehrere Hotspots hinzufügen und diese mit Text versehen. Die Konfiguration der Hotspots erklären wir dir weiter unten im Artikel.

Neben den Hotspots kannst du auch die Lichteffekte bearbeiten und hinzufügen, indem du auf die Schaltfläche Edit lighting (4) klickst. Die Konfiguration der Lichteffekte erklären wir dir ebenfalls weiter unten im Artikel.

Sobald du die Position deines 3D-Modells im Vorschaubild geändert hast, kannst du die Kameraeinstellung speichern, indem du auf die Schaltfläche Save camera klickst oder die Änderung über Discard (5) verwerfen.

Möchtest du deinen Kunden ermöglichen, das Produkt aus allen Blickwinkeln zu betrachten, kannst du dies durch Aktivierung der Option Enable interactivity (6) bewirken.

Im Auswahlfeld Layout type (7) kannst du zwischen „Title“ und „Image (.jpg, .png, .webp)“ wählen. Der „Title“-Typ ermöglicht es dir, dein 3D-Modell mit einer Überschrift (8) zu versehen, für die du den Title-Tag (9) als H1, H2 oder H3 festlegen kannst.

Im Feld Lead (10) kannst du einen Untertitel vergeben, der zwischen dem Title (8) und dem Body text (11) angezeigt wird. Im Body text (11) schreibst du den ausführlichen Text. Mit den Auswahlfeldern Title font size (12), Lead font size (13) und Body font size (14) kannst du die Schriftgröße der jeweiligen Texte anpassen. Zur Auswahl stehen die Größen "Small", "Medium" und "Large".

Unter Text Color (15) wählst du die Textfarbe aus, die für alle zuvor eingegebenen Texte einheitlich verwendet wird. Im Feld Button Text (16) gibst du die Bezeichnung der Schaltfläche ein, und mit dem Button Link (17) kannst du eine Verlinkung hinzufügen.

Wie oben bei der Konfiguration der Elemente angekündigt, folgt hier noch die Beschreibung der Hotspots und der Lichteffekte.

Add Hotspot:

Wenn du auf die Schaltfläche Add Hotspot (1) klickst, kannst du einen Hotspot in deinem 3D-Modell setzen. Dabei kannst du mehrere Hotspots frei mit dem Mauszeiger platzieren. Nachdem du einen Hotspot gesetzt hast, kannst du ihm einen Hotspot title (3) und einen Hotspot text (4) zuweisen. Diese Überschrift und der Text werden dann in deiner Storefront an dem jeweiligen Hotspot angezeigt. Möchtest du einen Hotspot entfernen, kannst du ihn einfach im 3D-Modell anklicken und anschließend auf die rote Schaltfläche Remove hotspot (5) klicken.

Wenn du die Ansicht deines 3D-Modells im Vorschaubild änderst, kannst du die neue Ansicht mit Save camera (2) speichern. Diese wird dann als Ausgangsansicht in deiner Storefront verwendet.

Edit lighting:

Der Klick auf die Schaltfläche Edit Lighting (1) ermöglicht es dir, die Lichteffekte für dein 3D-Modell anzupassen. Du kannst die Intensität (Intensity (3)) mithilfe eines Schiebereglers festlegen und aus vordefinierten Lichtvoreinstellungen (Light Presets (4)) den passenden Effekt auswählen. Möchtest du eine Lichtvoreinstellung verwenden, klickst du einfach auf Use Preset (5) bei dem gewünschten Effekt.

Wenn du die Ansicht deines 3D-Modells im Vorschaubild änderst, kannst du die neue Ansicht mit Save camera (2) speichern. Diese wird dann als Ausgangsansicht in deiner Storefront verwendet.

Exploded View:

Der Block „Exploded View“ ermöglicht dir, 3D-Produkte in einer interaktiven Explosionsansicht darzustellen. Du kannst einzelne Bauteile gezielt auseinanderziehen und in mehreren Schritten („Views“) präsentieren, um den Aufbau deines Produkts verständlich darzustellen. 

Hinweis:
Dieser Block ist kostenpflichtig und kann als In-App-Kauf für 49 € pro Monat erworben werden.
Der Kauf erfolgt direkt im Admin-Bereich: Navigiere zu Erlebniswelten, ziehe den Block in das gewünschte Layout, öffne die Blockkonfiguration und klicke auf „Kaufen“.

Klickst du im Element auf das Zahnrad-Symbol (1), gelangst du in die Einstellungen des Moduls.

Im Settings-Bereich (1) lädst du dein 3D-Modell (.glb) hoch (2) und kannst bestehende Konfigurationen per JSON (3) importieren oder exportieren.

• Content-Bereich (1): Über die Tabs wechselst du zwischen der inhaltlichen Konfiguration (Content) und den allgemeinen Einstellungen (Settings).

• Views (2): Hier legst du die einzelnen Schritte deiner Explosionsansicht an. Jede View entspricht einem Animationsschritt. Du kannst Views hinzufügen, duplizieren und bearbeiten, um verschiedene Explosionsstufen deines Produkts darzustellen.

• Hierarchy (3): In der Hierarchie wählst du einzelne Bauteile deines 3D-Modells aus. Du kannst Elemente ein- oder ausblenden und gruppieren, um den Detailgrad deiner Explosionsansicht gezielt zu steuern.

  Beachte, dass der Umfang und die Struktur der Elemente von deinem 3D-Modell abhängen. Je nach Aufbau und Vorbereitung der Quelldatei kann die Hierarchie unterschiedlich detailliert oder grob ausfallen. 

  • Gruppierung: Hier steuerst du, wie sich einzelne Bauteile in der Explosionsansicht gemeinsam verhalten.

    In der Hierarchie kannst du mehrere Elemente auswählen und zu einer Gruppe zusammenfassen. Diese Gruppe wird dann wie eine Einheit behandelt: Wenn du die Explosionsstärke veränderst, bewegen sich alle enthaltenen Bauteile gemeinsam und behalten ihre relative Position zueinander bei.

    Das ist besonders hilfreich, wenn dein Produkt aus logischen Baugruppen besteht (z. B. Gehäuse, Motor, Schrauben). Statt jedes Teil einzeln zu animieren, kannst du zusammengehörige Komponenten bündeln und so eine klar strukturierte Darstellung erstellen.

    Durch geschicktes Gruppieren bestimmst du den Detailgrad deiner Explosionsansicht:

    • Grobe Gruppen zeigen größere Baugruppen und sorgen für eine einfache, übersichtliche Darstellung.
    • Feinere Gruppen oder einzelne Elemente ermöglichen eine detaillierte Aufschlüsselung bis auf einzelne Bauteile.

    Du kannst für jede View unterschiedliche Gruppierungen verwenden, um den Fokus Schritt für Schritt von groben Strukturen hin zu detaillierten Komponenten zu lenken.

    • Annotations: Du kannst einzelne Bauteile mithilfe von Annotations hervorheben, beschreiben und mit weiteren Informationen versehen. So erklärst du Details direkt am Modell und kannst zusätzlich Links hinterlegen, z. B. zu passenden Ersatzteilen oder weiterführenden Produktseiten.

• Scene (4): Passe die Darstellung deiner Szene an, z. B. über die Explosionsstärke, den Hintergrundstil, die Lichtintensität und das Player-Layout. Änderungen siehst du direkt in der Vorschau.

  • Über die Option „Enable Interactivity“ kannst du festlegen, ob Nutzer in einer bestimmten View weiterhin mit dem 3D-Modell interagieren können. So kombinierst du geführte Animationen mit freier Erkundung.

  • Zusätzlich kannst du "Auto-play until user interaction" aktivieren, damit die Explosionsanimation automatisch abgespielt wird und deine Kunden Schritt für Schritt durch das Produkt geführt werden.

Im Storefront zeigt dir das „Exploded View“-Modul dein 3D-Modell in einer interaktiven Explosionsansicht, die du Schritt für Schritt durchlaufen kannst. Über die Buttons „Back“ und „Forward“ (1) navigierst du durch die einzelnen Animationsschritte. 

Jeder Schritt stellt eine definierte Ansicht („View“) dar, in der bestimmte Bauteile hervorgehoben oder weiter auseinandergezogen werden. Zusätzlich kannst du über den „Views“-Button (2) eine Übersicht über alle verfügbaren Schritte öffnen und gezielt zu einer bestimmten Ansicht wechseln. 

So kannst du den Aufbau des Produkts entweder linear durchgehen oder direkt einzelne Details aufrufen. Währenddessen bleibt das 3D-Modell vollständig interaktiv: Du kannst es drehen, zoomen und aus verschiedenen Perspektiven betrachten, um jedes Bauteil genau zu erkunden.