Plugin for Shopware 5

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

If you host a web shop with Shopware 5 and have a paid subscription to Shopware (Rise, Evolve, or Beyond), you can easily use our free plugin to integrate 3D models on your product pages. There are no additional costs for downloading the 3D Product Viewer plugin. (An app is also available for Shopware version 6, read more here.)

How to install the plugin

1. Search for "rooom 3D Product Viewer" in the Shopware store and select the plugin for version 5.

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

3. You will receive a ZIP file which you can upload in the Plugin Manager of your Shopware backend (under Settings).

4. You can now find the rooom 3D Product Viewer in the list. To use the plugin, click on the green plus to install it. Then activate it by clicking on the pencil.

5. After that, select Yes when asked to Clear cache now?, and then compile themes.

Via the Plugin Manager 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.

• 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)
• Show or hide additional product images

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 on under the menu item Articles and click on the pencil to edit.

2. Select the General Data tab and scroll down to the Custom Text fields. There you will find settings for the rooom 3D Product Viewer.

1 - Viewer ID: 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:

2 - Keep Images: If the checkmark is set here, the 3D view is displayed together with other product images. If the check mark is removed, the 3D Product Viewer is displayed as the only product image.

3 - Activate Config: If the checkmark is set here, the settings you make at this point will override the global settings for the individual object.

4 - Customize background color (enter HEX format value)

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

6 - Activate mirror effect under the object

7 - Activate transparent background

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

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)