Einzeilige 3D- & AR-Einbettung für Shopify, WooCommerce und eigene Webseiten
Schritt-für-Schritt-Anleitung für Händler und Entwickler: Interaktive 3D- und AR-Modelle in unter 30 Sekunden per Iframe in jeden Online-Shop einbinden.
Wichtigste Erkenntnisse
- ✓ Keine Three.js- oder WebGL-Bibliotheken im Shop-Template erforderlich.
- ✓ Einfach den Code in einen HTML-Block in Shopify oder WooCommerce einfügen.
- ✓ URL-Parameter steuern Hintergrundfarben, Drehung und AR-Funktionen flexibel.
- ✓ Asynchrones Lazy Loading schützt Core Web Vitals und PageSpeed Scores.
1. Warum Iframes klassischen JavaScript-Bibliotheken überlegen sind
Die direkte Einbindung von Three.js in Shop-Templates verlangsamt die Ladezeit durch große Skripte erheblich.
Der 3D StoreLink Iframe läuft vollständig isoliert in einer optimierten Cloud-Umgebung ohne Auswirkungen auf Ihre Shop-Geschwindigkeit.
<iframe
src="https://view.3dstorelink.com/model-slug?autoRotate=1&enableAR=1&bgColor=111111"
width="100%"
height="500"
frameborder="0"
allow="xr-spatial-tracking"
loading="lazy"
></iframe>2. Iframe-Architektur und URL-Parameter im Detail
Über einfache URL-Parameter passen Sie das Aussehen und Verhalten des 3D-Viewers nahtlos an Ihr Shop-Design an.
| Parameter | Standard | Beschreibung |
|---|---|---|
| autoRotate | 1 | 1 für automatische Drehung im Leerlauf, 0 für Stillstand. |
| enableAR | 1 | Aktiviert den "Im Raum ansehen (AR)" Button auf Mobilgeräten. |
| bgColor | 111111 | Hex-Farbe für den Hintergrund (z.B. FFFFFF oder 050505). |
| cameraOrbit | 0deg 75deg auto | Startwinkel und Kameraposition. |
| enableDownload | 0 | Verhindert den Download der 3D-Datei (0=geschützt). |
3. Schritt-für-Schritt-Einbindung in Shopify in unter 30 Sekunden
Im Shopify Admin unter Produkte das gewünschte Produkt aufrufen und im Textfeld auf "<> HTML anzeigen" klicken.
Den 3D StoreLink Code einfügen und speichern. Das 3D- und AR-Modell ist sofort online.
4. WooCommerce & WordPress Einbindung
In WordPress einen "Individuelles HTML"-Block in Gutenberg oder Elementor einfügen.
Code einfügen und veröffentlichen. Der Iframe passt sich automatisch allen Bildschirmgrößen an.
Häufig gestellte Fragen
Verschlechtert die Einbindung den Google PageSpeed Score?
Nein. Dank loading="lazy" lädt das Modell erst beim Scrollen, ohne die Ladezeit zu beeinträchtigen.