App für Shopware 6

Der rooom 3D Product Viewer ist als Plugin oder App für Onlineshops erhältlich, die mit Shopware gehosted werden. In diesem Artikel erfährst du, wie du ein 3D Produkt in deinen Onlineshop (Version 6) integrierst.

Wenn du einen Onlineshop mit Shopware 6 betreibst und ein kostenpflichtiges Abo bei Shopware abgeschlossen hast (Rise, Evolve oder Beyond), kannst du ganz einfach unsere App nutzen, um 3D Modelle auf deinen Produktseiten zu integrieren. Für den Download der 3D Product Viewer App entstehen keine Zusatzkosten. (Auch für die Shopware-Version 5 ist ein Plugin verfügbar, mehr dazu hier.)

Wie installiere ich die App?

1. Suche im Shopware Store nach "rooom 3D Product Viewer" und wähle die App für Version 6.

2. Füge die Anwendung deinem Warenkorb hinzu. Der Download ist kostenlos.

3. Im Shopware-Backend unter dem Menüpunkt My extensions findest du nun den rooom 3D Product Viewer. Um die Anwendung zu verwenden, klicke auf App installieren und aktiviere sie anschließend über den Schieberegler.

Über Configuration kannst du globale Einstellungen für die Einbindung von 3D Modellen vornehmen. Diese werden dann für sämtliche 3D Modelle in deinem Shop angewendet, solange sie nicht von individuellen Einstellungen direkt auf der Produktseite überschrieben werden.

• Vertriebskanal
• Autospin: Rotation des Objektes um die eigene Achse
• Autostart: Start der 3D Ansicht, ohne vorher auf den Play-Button klicken zu müssen
• Start AR: Augmented Reality-Modus wird direkt aktiviert
• Hintergrundfarbe und -transparenz
• Helligkeit
• spiegelnder Boden
• Animationen (falls verfügbar)
• Darstellung von Annotationen
• AR-Einstellungen
• Kamera-Zoom
• UI-Elemente (z.B. Buttons)

Wie integriere ich ein 3D Produkt?

Nachdem du die Anwendung erfolgreich installiert hast, kannst du direkt mit dem Einbetten der 3D Modelle auf deinen Produktseiten beginnen.

1. Wähle im Katalog die entsprechende Produktseite aus, auf der du ein 3D Modell einfügen möchtest, und klicke auf Edit (Bearbeiten).

2. Wähle den Reiter Specifications aus und scrolle nach unten bis zu den Custom Fields. Dort findest du nun Einstellungen für den rooom 3D Product Viewer.

1 - 3D Ansicht aktivieren

2 - Product Viewer Key: Hier trägst du den hinteren Teil der URL des 3D Product Viewers ein (Bsp.: https://www.rooom.com/product/0af7dde7c7e7d7970d54d6f5b9a5f5). 

Die URL erhältst du im rooom-Dashboard über den Teilen-Button:

3 - Hintergrundfarbe individualisieren (Wert im HEX-Format eingeben)

4 - URL zu einer Mediendatei einfügen, die während des Ladevorgangs angezeigt wird (Default: rooom-Logo)

5 - Skybox aktivieren (setzt das Produkt in eine transparente Box mit Schatten)

6 - Transparenz für Hintergrund aktivieren

7 - Spiegel-Effekt unter dem Objekt aktivieren

Die Einstellungen, die du an dieser Stelle triffst, überschreiben die globalen Einstellungen für das individuelle Objekt.

3. Nach dem Speichern erscheint der eingebettete 3D Product Viewer in der Bildergalerie auf der Produktseite.

Auf der Kategorieseite wird durch ein Icon deutlich, welche Produkte mit einem 3D Product Viewer ausgestattet sind.

4. Du möchtest das Produkt in Augmented Reality bestaunen? Klicke auf den AR-Button unten rechts und scanne den QR-Code ein. (Zum AR-Tutorial)