Immersive Elements

In collaboration with Instorier, the Norwegian experts in digital storytelling, we have developed an innovative app that transforms your online store into an unforgettable and dynamic brand experience.

Immersive Elements launches with five powerful components designed to engage your customers, build brand loyalty and increase conversions.

Fully optimized for mobile, desktop and spatial devices, the app delivers an immersive shopping experience.

Immersive Elements integrates seamlessly into your Shopware infrastructure and is a highly cost-effective alternative to using external resources.

Installation

If you have booked a Shopware Rise, Shopware Evolve, or Shopware Beyond plan, the extension will be automatically available to you via the Shopware Commercial extension.

If you do not yet have a Shopware plan, you can obtain the extension through the Shopware Store. In this case, the monthly fee is €49.

The Elements

The elements listed below can be found in the Shopping Experiences under the "Commerce" section in the block area.

Immersive Elements - Cylinder Gallery: This block enables an interactive gallery where your images are displayed in a 360° slider. The images are automatically played in the 360° slider in the storefront. When you click on it with your mouse, you can adjust the speed of the slider, slow it down, speed it up, or even change the direction.
Immersive Elements - Depth Gallery: Your customers will experience the images in your storefront with varying depths, creating an impressive parallax effect. This means that through mouse movements and scrolling with the mouse wheel, the images in this element move in the directions the mouse or cursor moves. This adds more depth and interactivity to your layout.
Immersive Elements - 3D Model Journey: This block allows you to create an animated tour around your product in 3D within your experience world, and you can add optional hotspots and text information.
Immersive Elements - Slide Behind Gallery: Unlike traditional horizontal sliders, the content in this element changes horizontally, adding more depth to the layout.
Immersive Elements - VR Cinema: Let your customers immerse themselves in a 3D and virtual reality cinema experience that brings products and stories to life. This block also allows you to use videos in the webp format.

For a more impactful display of the elements in the storefront, we recommend selecting the Full width (1) mode when choosing the "Size Mode" in the Shopping Experiences.

You will also achieve the best effect by placing the elements from Immersive Elements directly one after the other in a section, without any other elements in between. This creates a seamless experience, enhancing both the transitions and performance.

Configuration of the Elements

In the video by Instorier, the various configuration options for each block are demonstrated.

We will explain the 3D Model Journey block in detail below, as it is somewhat more complex.

3D Model Journey:

First, you need to click on the gear icon of the block within the Shopping Experiences to access the element settings.

You are now directly in the settings (1) of the element.

In the element settings, you will now find the option to upload a .glb file (2) to display 3D models in the storefront. You can also upload an .mp3 file (3) here to add an audio track (e.g., a song) to the element in the storefront.
In the storefront, an audio icon will appear in the top-right corner of the element, which your customers can turn on or off as desired.
In the Background color field (4), you can specify a background color for your 3D model.
Using the Add media button (5), you can upload additional images in .jpg, .png, or .webp format. These images will be displayed as small pictures in the background of your 3D model in the storefront.
When interactivity is enabled in the element, the images will be shown in the 360-degree view.

In the Content(1) section of the element, you can now make additional settings for displaying the 3D model.

First, you can add additional snapshots to your existing Section 1 (2) to present different views of your 3D model in the experience world. For example, you can create sections for the front view, side view, and top view of your 3D model. These sections can also have different lighting effects that are applied as the user scrolls through the Shopping experiences.

You can add one or more hotspots to your 3D model at freely selectable positions by clicking the Add Hotspot button (3) and assigning text to them. The configuration of the hotspots is explained further down in the article.

In addition to the hotspots, you can also edit and add lighting effects by clicking the Edit Lighting button (4). The configuration of the lighting effects is also explained further down in the article.

Once you have changed the position of your 3D model in the preview image, you can save the camera settings by clicking the Save camera button or discard the change by clicking Discard(5).

If you want to allow your customers to view the product from all angles, you can enable this by activating the Enable interactivity option (6).

In the Layout Type selection field (7), you can choose between "Title" and "Image (.jpg, .png, .webp)". The "Title" option allows you to add a heading (8) to your 3D model, for which you can set the Title Tag (9) as H1, H2, or H3.

In the Lead field (10), you can assign a subtitle that will be displayed between the Title (8) and the Body text (11). In the Body text (11), you write the detailed text. With the selection fields Title font size (12), Lead font size (13), and Body font size (14), you can adjust the font size of the respective texts. The available sizes are "Small," "Medium," and "Large."

Under Text color (15), you select the text color to be used uniformly for all previously entered texts. In the Button text field (16), you enter the label for the button, and with the Button link (17), you can add a hyperlink.

As mentioned earlier in the configuration of the elements, here is the description of the hotspots and light effects.

Add Hotspot:

When you click on the Add Hotspot button (1), you can place a hotspot in your 3D model. You can freely position multiple hotspots with the mouse pointer. After placing a hotspot, you can assign it a Hotspot title (3) and a Hotspot text (4). This heading and text will then be displayed in your storefront at the respective hotspot. If you want to remove a hotspot, you can simply click on it in the 3D model and then click the red Remove hotspot button (5).

If you change the view of your 3D model in the preview image, you can save the new view with Save camera (2). This will then be used as the default view in your storefront.

Edit lightings:

Clicking the Edit lighting button (1) allows you to adjust the lighting effects for your 3D model. You can set the intensity (3) using a slider and select the appropriate effect from predefined light presets (4). If you want to use a light preset, simply click Use Preset (5) for the desired effect.