Schnelle Antwort
360° in Magento 2: in Studio veröffentlichen (Name = SKU, Aktiv) → widget.js in HTML Head oder Page Builder HTML einfügen → data-key + data-sku (AUTO bei JSON-LD-sku). Lazy Load und Modal. Cache leeren. Live-PDP testen, nicht die Admin-Vorschau.
Magento-Galerien blättern Standfotos. Kundinnen und Kunden können den Artikel trotzdem nicht drehen. Sie können eine fotografierte 360°-Drehung ohne Magento-Marketplace-Modul einbauen: Frames in Spinnify hosten und ein Skript einfügen.
Diese Anleitung gilt für Magento 2 und Adobe Commerce. Magento 1 ist abgeschaltet. Dasselbe widget.js-Snippet funktioniert auf der Produktdetailseite. Sie installieren keine zusätzliche Magento-Extension von Spinnify.
3 Schritte von den Fotos zur live Magento-Seite
Die Arbeit steckt im Embed: ein Skript auf der Produktdetailseite, dann die Zuordnung zur Katalog-SKU.
1. In Spinnify Studio vorbereiten
Bevor Sie das Magento-Admin öffnen:
- Bei Spinnify Studio anmelden.
- Produkt anlegen und eine Fotoserie hochladen (24–36 Frames, 4:3 für PC-Fotos).
- Wichtig: der Produktname in Studio muss der Magento-SKU entsprechen (Leerzeichen und Bindestriche zählen, Groß/Klein nicht).
- Produkt auf Aktiv lassen. Ein verstecktes Produkt zeigt den Button nicht.
2. Code in Magento einfügen
Zwei Wege für dasselbe Studio-Snippet. Kopieren unter Widget-Installation → Code anzeigen.
Methode A: HTML Head (am schnellsten für den ganzen Katalog). Inhalt → Design → Konfiguration → Store View bearbeiten → HTML Head → Skripte und Stylesheets. Skript einfügen, speichern, Magento-Cache leeren. data-sku="AUTO" nutzen, wenn Magento auf der Produktseite Schema.org-Product-JSON-LD mit sku ausgibt.
Methode B: Page Builder HTML-Code (ein Produkt oder ein Inhaltsblock). Am Produkt Page Builder öffnen, Elemente → HTML-Code ziehen, dasselbe Snippet einfügen, speichern. Manual data-sku auf die SKU dieses Produkts setzen, wenn AUTO fehlt.
3. Die Bindung einstellen
Der Code sieht so aus: <script src="https://www.spinnify.io/widget.js" data-key="YOUR_WIDGET_KEY" data-sku="SKU_FROM_PANEL" defer></script>
- data-key: Ihr Studio-Widget-Schlüssel. Nicht ändern.
- data-sku: die Magento-SKU, oder AUTO zum Lesen von sku aus JSON-LD, oder URL wenn Sie den Seitenpfad in Studio gespeichert haben.
Warum es schnell bleibt
Ein Fremdskript in Magento weckt PageSpeed-Fragen, weil Full Page Cache und die Galerie bereits um den ersten Paint konkurrieren. Spinnify hält die Extra-Arbeit davon fern: Frames bleiben auf dem CDN, bis jemand drehen will. Die Magento-Galerie rendert zuerst; die 360-Schicht öffnet sich danach im Modal.
- Lazy Loading: der Browser lädt die Frames erst nach dem Klick.
- Isolation: der Viewer öffnet sich im Modal und ersetzt die Magento-Galerie beim ersten Paint nicht.
- CDN: Frames kommen als WebP/AVIF, nicht als Extra-Dateien in Magento Media.
Checkliste: Button erscheint nicht?
Wenn der 3D-View-Button fehlt, gehen Sie die Liste auf einer Live-Produkt-URL durch, nicht in der Admin-Vorschau.
- Cache geleert? HTML-Head- und Layout-Änderungen bleiben sonst unsichtbar.
- Live-Produkt-URL? Die Admin-Vorschau ist ein schlechter Test für Storefront-Skripte.
- Namen gleich? Studio-Produktname und Magento-SKU müssen übereinstimmen (inkl. Leerzeichen und Bindestriche).
- Ist das Studio-Produkt Aktiv?
- Ist data-key aus Ihrem Konto kopiert?
- Ein Skript pro Seite: das Snippet nicht zweimal einfügen.
- Magento 2.4.7+ CSP: wenn die Konsole www.spinnify.io blockiert, Host in csp_whitelist.xml erlauben. CSP nicht abschalten.
Kann ich das Aussehen des Buttons anpassen?
Ja. Den Starter gestalten Sie in Studio, nicht in der Theme-CSS. So passen Sie ihn an, ohne die Produktvorlage zu ändern:
- Position: rechts, links oder mittig.
- Farben und Beschriftung passend zum Magento-Theme.
- Format: rundes Schwebesymbol oder schmale Lasche.
Danach liefert Magento weiter die Galerie. Die 360°-Ebene öffnet sich, wenn jemand danach fragt.
Spins aufnehmen: Smartphone-Anleitung. Andere HTML-Shops: Tilda Zero Block. Vollständige Spinnify-Anleitung.
