App for Shopware 6

The rooom 3D Product Viewer is available as a plugin or app for online shops hosted with Shopware. In this article you will learn how to integrate a 3D product into your e-commerce store (version 6).

If you host a web shop with Shopware 6, you can easily use our free app to integrate 3D models on your product pages. (A plugin is also available for Shopware 5, read more here.)

How to install the app

1. Search for "rooom 3D Product Viewer" in the Shopware Store and select the app for version 6.

2. Add the application to your shopping cart. The download is free of charge.

3. You can now find the rooom 3D Product Viewer in the Shopware backend under the menu item My extensions. To use the application, click on Install app and then activate it using the toggle.

Via Configuration you can make global settings for the integration of 3D models. These will then be applied to all 3D models in your store, as long as they are not overwritten by individual settings directly on the product page.

• Sales channel
• Autospin: Rotation of the object
• Autostart: Start of the 3D view without having to click on the play button first
• Start AR: Augmented Reality mode is activated automatically
• Background color and transparency
• Brightness
• Mirroring floor
• Enable/disable animations (if available)
• Display of annotations
• AR settings
• Camera zoom
• UI elements (e.g. buttons)

How to integrate a 3D product

After the successful installation of the plugin, you can directly start embedding the 3D models on your product pages.

1. Select the product page you want to integrate a 3D model in the Catalogue and click on Edit.

2. Select the Specifications tab and scroll down to Custom Fields. There you will find settings for the rooom 3D Product Viewer.

1 - Activate 3D viewer

2 - Product Viewer Key: Here you enter the last part of the URL of the 3D Product Viewer (e.g.: https://www.rooom.com/product/0af7dde7c7e7d7970d54d6f5b9a5f5). 

You can get the URL in the rooom dashboard via the share button:

3 - Customize background color (enter HEX format value)

4 - Insert URL to a media file that will be displayed during the loading process (default: rooom logo)

5 - Activate skybox (puts the product in a transparent box with shade)

6 - Activate transparent background

7 - Activate mirror effect under the object

The settings you make here will overwrite the global settings for the individual object.

3. After you save, the embedded 3D Product Viewer will appear in the image gallery on the product page.

On the category page, an icon indicates which products include a 3D Product Viewer.

4. You want to experience the product in Augmented Reality? Click on the AR button at the bottom right and scan the QR code. (To the AR tutorial)