Schnelle Antwort
360° in OpenCart 3/4: in Studio veröffentlichen (Name = Model, Aktiv) → widget.js in Design → Theme Editor → product/product.twig einfügen → data-key + data-sku Manual (AUTO nur bei JSON-LD-sku). Lazy Load und Modal. Theme-Cache aktualisieren. Live-PDP testen, nicht die Admin-Vorschau.
OpenCart-Galerien blättern Standfotos. Kundinnen und Kunden können den Artikel trotzdem nicht drehen. Sie können eine fotografierte 360°-Drehung ohne OpenCart-Modul einbauen: Frames in Spinnify hosten und ein Skript einfügen.
Diese Anleitung gilt für OpenCart 3 und 4 (Twig Theme Editor). OpenCart 1.5 und 2.x nutzen .tpl-Dateien. Dasselbe widget.js-Snippet funktioniert auf der Produktdetailseite. Sie installieren keine zusätzliche OpenCart-Extension von Spinnify.
3 Schritte von den Fotos zur live OpenCart-Seite
Die Arbeit steckt im Embed: ein Skript auf der Produktdetailseite, dann die Zuordnung zum Katalog-Model (das übliche SKU-Feld).
1. In Spinnify Studio vorbereiten
Bevor Sie das OpenCart-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 dem OpenCart-Model entsprechen (Leerzeichen und Bindestriche zählen, Groß/Klein nicht).
- Produkt auf Aktiv lassen. Ein verstecktes Produkt zeigt den Button nicht.
2. Code in OpenCart einfügen
Zwei Wege für dasselbe Studio-Snippet. Kopieren unter Widget-Installation → Code anzeigen.
Methode A: Theme Editor (am besten für Produktseiten). Design → Theme Editor → product/product.twig (OpenCart 4: catalog/view/template/product/product.twig). Skript nahe der Galerie einfügen, speichern, Theme-Cache aktualisieren. Theme Editor speichert eine Datenbank-Überschreibung, nicht die Datei auf der Festplatte. Manual data-sku auf das Model setzen oder data-sku="{{ product.model }}" in Twig. Wenn product.model leer ist, den Studio-Namen fest eintragen.
Methode B: common/header.twig plus AUTO (nur wenn JSON-LD-sku existiert). Das lädt das Skript auf jeder Seite, also weglassen, wenn das Theme kein Schema.org-Product-JSON-LD mit sku ausgibt. Lieber die Produktvorlage nutzen.
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: das OpenCart-Model (Manual). AUTO nur bei JSON-LD-sku, oder URL wenn Sie den Seitenpfad in Studio gespeichert haben.
Warum es schnell bleibt
Ein Fremdskript in OpenCart weckt PageSpeed-Fragen, weil das Produkttemplate schon Galerie und Theme-JS mitbringt. Spinnify hält die Extra-Arbeit vom ersten Paint fern: Frames bleiben auf dem CDN, bis jemand drehen will. Die OpenCart-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 OpenCart-Galerie beim ersten Paint nicht.
- CDN: Frames kommen als WebP/AVIF, nicht als Extra-Dateien im OpenCart-Bildspeicher.
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.
- Theme-Cache aktualisiert? Zahnrad im Admin-Dashboard: Theme-Cache deaktivieren oder leeren. Extensions → Modifications → Refresh, wenn OCMod im Spiel ist. Journal hat einen eigenen Cache.
- Live-Produkt-URL? Die Admin-Vorschau ist ein schlechter Test für Storefront-Skripte.
- Theme Editor vs Datei: Theme Editor gewinnt gegen FTP. Wenn Sie product.twig auf der Platte geändert haben und nichts passiert, die Überschreibung im Theme Editor schließen oder Cache leeren.
- Namen gleich? Studio-Produktname und OpenCart-Model 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, und nicht in header.twig legen, außer Sie wollen AUTO auf jeder Seite.
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 OpenCart-Theme.
- Format: rundes Schwebesymbol oder schmale Lasche.
Danach liefert OpenCart 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.
