Integration5. Juni 202610 min1.968 liest

So fügen Sie Ihrem WooCommerce-Shop 360°-Produktansichten hinzu

360°-Spins zu WooCommerce in 3 Schritten hinzufügen: in Spinnify Studio veröffentlichen, widget.js einbetten, SKU/URL-Bindung. Lazy Load, WebP CDN. Checkliste zur Fehlerbehebung.

IntegrationAnleitung

WooCommerce Produktseite, die Spinnify 360°-Viewer über widget.js einbettet

Schnelle Antwort
360° auf WooCommerce ohne umfangreiche Plugins: Studio (Name = SKU, Aktiv) → widget.js Nur auf is_product() einbetten → Manuell/AUTO/URL. Lazy Load + WebP/CDN. Live-URL testen; Cache leeren.

Möchten Sie, dass Käufer Produkte wie Top-Stores wechseln? WooCommerce erfordert keine umfangreichen Plugins. Die Spinnify-Integration fügt professionelle 360°-Ansichten hinzu und hält gleichzeitig die Website-Geschwindigkeit hoch.

3 Schritte zum Starten von 360° auf WooCommerce

1. Bereiten Sie sich in Spinnify Studio vor

Vor den Site-Einstellungen bereiten Sie den Inhalt vor:

Melden Sie sich bei Spinnify Studio an.
Erstellen Sie ein Produkt und laden Sie eine Fotoserie hoch (24–36 Bilder).
Kritisch: Studio-Produktname = der SKU in WooCommerce Admin.
Setzen Sie den Status auf „Aktiv“. Entwürfe sind für das System unsichtbar.

2. Code zur Website hinzufügen

Fügen Sie einmal ein kleines Snippet in die Produktseitenvorlage ein.

Wo Sie den Code erhalten: Registerkarte „Einbetten“ für das Produkt in Spinnify Studio.
Wo Sie den Code einfügen können: Theme Functions.php oder WPCode / Code Snippets-Plugin.
Wichtig: Nur Produktseiten – verwenden Sie is_product() in PHP, damit das Widget nicht geladen wird die Homepage oder den Blog.

3. Automatische Verknüpfung konfigurieren

Das System muss wissen, welcher Spin angezeigt werden soll. Drei Modi:

Manuell (empfohlen): Bindung durch SKU. Zuverlässig für variable WooCommerce-Produkte.
AUTO: liest SKU aus dem Schema.org-Markup – praktisch mit soliden SEO-strukturierten Daten.
URL: Bindung nach Seiten-URL, wenn sich SKUs ändern oder unpraktisch sind.

widget.js in WooCommerce einzelnes Produkt einbetten — Studio → einbetten → is_product() → 360° modal.

Warum es die Website nicht verlangsamt

Viele Angst-Widgets verlangsamen WooCommerce. Spinnify ist anders aufgebaut:

Lazy Loading: Der Browser ruft keine Fotos ab, bis der Käufer auf „360° anzeigen“ klickt.
Minimaler LCP-Einfluss: Das Widget wird getrennt vom Inhalt der Hauptseite geladen.
Komprimierte Formate: WebP-Frames über globales CDN.

Checkliste: Viewer wird nicht angezeigt?

Live-URL: Test auf veröffentlichtem Site – Customizer blockiert häufig Skripte.
Namensübereinstimmung: Studio und WooCommerce SKU müssen Zeichen für Zeichen übereinstimmen (Leerzeichen und Bindestriche sind wichtig).
Cache leeren: Nach dem Hinzufügen von Code WP Rocket, LiteSpeed usw. löschen.
Variation SKU: Verwenden Sie für variable Produkte das SKU der Variation (Farbe), die Sie verwenden Anzeigen.
Aktives Spinnify Studio-Abonnement.

Fazit: Integration für Unternehmen

Im Gegensatz zu sperrigen Plugins, die mit Ihrem Theme kollidieren, ist dieser Ansatz sauberer: eine interaktive Inspektionsebene über der WooCommerce-Galerie. Beste UX für Schuhe, Taschen, Elektronik und Schmuck – bei statischen Fotos fehlen Details.

Bereit für den Start? Fotos hochladen in Spinnify Studio starten können. Aufnahme: DIY-Smartphone-Guide. Shopify: Integrationsleitfaden.

Häufig gestellte Fragen

Benötige ich ein dediziertes WooCommerce-Plugin für 360°?

Nein. Die von Spinnify Studio in die Einzelproduktvorlage eingebettete widget.js reicht aus – kein schweres Plugin, das Ihr Thema bekämpft.

Wie soll das Studio-Produkt heißen?

Genau wie das Produkt oder die Variante SKU in WooCommerce. Der Entwurfsstatus oder ein nicht übereinstimmender Name verbirgt die Schaltfläche.

Wo füge ich Code in WordPress ein?

Untergeordnete Theme-Funktionen.php oder WPCode/Code-Snippets. Beschränken Sie die Ausgabe mit is_product(), damit das Widget nicht auf der Startseite oder im Blog geladen wird.

Manuell, AUTO oder URL – welcher Modus?

Manual (data-sku) ist für variable Produkte am zuverlässigsten. AUTO, wenn das Schema.org-Produkt SKU enthält. URL, wenn SKUs umständlich sind oder sich häufig ändern.

Wird das Widget WooCommerce verlangsamen?

Spinnify Lazy-Loads: Frames werden per Klick heruntergeladen. WebP über CDN, minimale LCP-Auswirkungen – das Widget bleibt vom Inhalt der Hauptseite getrennt.

Button fehlt – was tun? prüfen?

Live-URL (nicht Customizer), Studioname stimmt mit SKU überein, Cache leeren (WP Rocket, LiteSpeed), SKU der aktiven Variante, aktives Spinnify-Abonnement.

Welche Produktkategorien profitieren am meisten?

Schuhe, Taschen, Elektronik, Schmuck – wo statische Fotos aus jedem Blickwinkel sichtbare Details verbergen.

Spinnify 360°-Viewer auf einer Shopify-Produktseite: Schaltfläche „3D-Ansicht“, die eine interaktive Produktdrehung öffnet

Integration28. Juni 20269 min1.720 liest

So fügen Sie eine 360-Produktansicht zu Shopify hinzu (Größen, App-Block und SKU-Übereinstimmung)

Fügen Sie eine interaktive 360°-Drehung zu Shopify Produktseiten hinzu: empfohlene Bildgrößen, Spinnify App-Block-Setup, SKU Matching und Lazy-Loaded 3D-Ansicht – kein Pro-SKU-Code.

ShopifyIntegration

Artikel lesen

Smartphone auf Stativ, Aufnahme von 360°-Produktbildern auf einem Drehteller

Produkt-UX13. Juni 202610 min1.729 liest

Studio mit kleinem Budget: So schießen Sie interaktive 360°-Produktfotos mit einem gewöhnlichen Smartphone

Nehmen Sie 360°-Produktdrehungen mit einem Smartphone und einem Plattenspieler auf – kein Studio erforderlich. SKU-erster Workflow, manuelle Kamera, 24–36 Bilder. Schritt für Schritt mit der Spinnify Mobil-App.

AnleitungFotografieren