Schnelle Antwort
360° im 1C-Bitrix-Katalog (nicht Bitrix24): in Studio veröffentlichen (Name = Artikelnummer, Aktiv) → widget.js im Include-Bereich (bitrix:main.include) oder catalog.element einfügen → data-key + data-sku (AUTO bei JSON-LD-sku). Lazy Load und Modal. Live-Produkt-URL testen. Composite eingeschaltet testen; Composite nicht als Standardfix abschalten.
Bitrix-Galerien blättern Standfotos. Kundinnen und Kunden können den Artikel trotzdem nicht drehen. Sie können eine fotografierte 360°-Drehung ohne Bitrix-Marketplace-Modul einbauen: Frames in Spinnify hosten und ein Skript einfügen.
Diese Anleitung gilt für 1C-Bitrix-CMS-Katalogseiten (catalog.element). Bitrix24 ist ein anderes Produkt (CRM) und nicht dieser Stack. Dasselbe widget.js-Snippet funktioniert auf der Produktdetailseite. Sie installieren keine zusätzliche Bitrix-Marketplace-Extension von Spinnify.
3 Schritte von den Fotos zur live Bitrix-Seite
Die Arbeit steckt im Embed: ein Skript auf der Produktdetailseite, dann die Zuordnung zur Katalog-Artikelnummer.
1. In Spinnify Studio vorbereiten
Bevor Sie das Bitrix-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 Katalog-Artikelnummer entsprechen (Leerzeichen und Bindestriche zählen, Groß/Klein nicht).
- Produkt auf Aktiv lassen. Ein verstecktes Produkt zeigt den Button nicht.
2. Code in Bitrix einfügen
Zwei Wege für dasselbe Studio-Snippet. Kopieren unter Widget-Installation → Code anzeigen.
Methode A: Include-Bereich (am schnellsten für den ganzen Katalog). Am Produktdetail-Template (catalog.element) eine bitrix:main.include-Komponente setzen. Auf eine Include-Datei zeigen (zum Beispiel in /include/), die das Skript enthält, speichern. data-sku="AUTO" nutzen, wenn die Produktseite Schema.org-Product-JSON-LD mit sku ausgibt.
Methode B: catalog.element template.php (ein Einfügen im Detail-Template). Produktdetail-Template öffnen, dasselbe Snippet einfügen, speichern. Manual data-sku auf die Artikelnummer dieses Produkts setzen, wenn AUTO fehlt. Nicht in catalog.section einfügen: sonst lädt das Skript auf Listen.
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 Katalog-Artikelnummer, oder AUTO zum Lesen von sku aus JSON-LD, oder URL wenn Sie den Seitenpfad in Studio gespeichert haben. Bei SKU-Angeboten die Artikelnummer des sichtbaren Angebots binden.
Warum es schnell bleibt
Ein Fremdskript in 1C-Bitrix weckt PageSpeed-Fragen, weil Composite Cache und catalog.element den ersten Paint schon besitzen. Spinnify hält die Extra-Arbeit davon fern: Frames bleiben auf dem CDN, bis jemand drehen will. Die Bitrix-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 Bitrix-Galerie beim ersten Paint nicht.
- CDN: Frames kommen als WebP/AVIF, nicht als Extra-Dateien im Bitrix-Upload.
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.
- Live-Produkt-URL? Die Vorschau im visuellen Editor ist ein schlechter Test für Storefront-Skripte.
- Composite-Site: die veröffentlichte Seite mit Composite testen. Fehlt der Button, Skript außerhalb eines dynamischen Frames legen oder mit ?ncc=1 erneut prüfen, dann die Platzierung korrigieren. Composite nicht standardmäßig für die ganze Site abschalten.
- Namen gleich? Studio-Produktname und Katalog-Artikelnummer 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. Nicht in catalog.section-Listen.
- SKU-Angebote: die Artikelnummer des sichtbaren Angebots binden, oder URL-Modus wenn jedes Angebot einen eigenen Pfad hat.
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 Bitrix-Theme.
- Format: rundes Schwebesymbol oder schmale Lasche.
Danach liefert Bitrix weiter die Galerie. Die 360°-Ebene öffnet sich, wenn jemand danach fragt.
Spins aufnehmen: 360-Ansicht erstellen. Andere HTML-Shops: Tilda Zero Block. WooCommerce 360-Spins.
