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

Sofern Du einen Shopware Rise, Shopware Evolve oder Shopware Beyond Plan gebucht hast, steht dir die Erweiterung automatisch über die Erweiterung Shopware Commercial zur Verfügung.

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".

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 - 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.

Den Block 3D Model Journey erklären wir nachfolgend im Detail, da dieser etwas komplexer ist.

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.

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.