Startseite / Ratgeber / AR auf Produktseiten in Shopify und WooCommerce einbauen

AR auf Produktseiten in Shopify und WooCommerce einbauen

Aktualisiert: 2026-10-12 · Vom jpgtousdz-Team (Appxiom Spark LLC)

Kurz gesagt: Für AR auf einer Produktseite brauchen Sie ein 3D-Modell des Produkts als GLB (Android und Web) und als USDZ (iPhone), in der realen Größe des Produkts. Shopify unterstützt 3D-Modelle als Produktmedien; bei WooCommerce oder jeder anderen Website binden Sie die kostenlose Komponente model-viewer mit beiden Dateien ein.

Schritt 1: die 3D-Dateien erstellen

Flache Produkte (Kunstdrucke, Poster, Leinwände, Teppiche, Tapetenmuster): Laden Sie das Produktfoto bei jpgtousdz hoch und geben Sie die reale Breite oder Höhe ein. Sie erhalten GLB und USDZ in dieser Größe.
Objekte (Vasen, Stühle, Schuhe): Nehmen Sie ein Video langsam rund um das Produkt auf, nutzen Sie Video zu 3D und geben Sie die reale Höhe ein.
Halten Sie jede Datei klein (Texturen 2048 px oder weniger), damit die Produktseite schnell bleibt.

Schritt 2a: Shopify

Öffnen Sie im Shopify-Admin das Produkt, dann Medien, und laden Sie die GLB-Datei als 3D-Modell hoch.
Shopify zeigt es mit seinem 3D-Viewer an, und Themes, die das unterstützen, fügen auf Handys einen Button "In deinem Raum ansehen" hinzu.
Prüfen Sie das Produkt auf einem iPhone und einem Android-Handy. Das Hilfe-Center von Shopify nennt die aktuellen Dateigrößenlimits und unterstützten Themes.

Schritt 2b: WooCommerce, WordPress oder jede Website

Laden Sie GLB und USDZ in Ihre Mediathek hoch und fügen Sie der Produktbeschreibung einen Block "Eigenes HTML" mit model-viewer hinzu:

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer src="/media/print-50x70.glb" ios-src="/media/print-50x70.usdz"
  ar ar-modes="quick-look scene-viewer webxr" ar-placement="wall"
  camera-controls alt="Druck 50 x 70 cm"></model-viewer>

Schritt 2c: die Variante ohne Code

Wenn Sie die Seite nicht bearbeiten können, fügen Sie einen Button oder QR-Code hinzu, der auf den jpgtousdz-AR-Viewer-Link des Produkts verweist. Er öffnet sich auf iPhone und Android in AR, ohne App.

Checkliste vor dem Livegang

Prüfpunkt	Warum
Die reale Größe stimmt	Kunden beurteilen die Größe anhand von AR; ein falscher Maßstab führt zu Retouren.
Die Platzierung stimmt (Wand oder Boden)	Kunst gehört an die Wand, Möbel auf den Boden.
Funktioniert auf iPhone und Android	Jedes nutzt eine andere Datei.
Alt-Text gesetzt	Barrierefreiheit und Suche.

Jetzt ausprobieren

Verwandeln Sie ein Foto in wenigen Sekunden in ein USDZ und GLB in Originalgröße oder ein Video in ein 3D-Modell. Die erste Foto-Umwandlung ist kostenlos.

Produktfoto in AR

FAQ

Braucht Shopify USDZ?

Laden Sie die GLB bei Shopify hoch; Shopify übernimmt die Darstellung. Behalten Sie auch eine USDZ, falls Ihr Theme oder ein anderer Kanal sie braucht.

Unterstützt WooCommerce AR von Haus aus?

Nein. Nutzen Sie ein Plugin oder binden Sie model-viewer mit GLB- und USDZ-Dateien ein, wie oben gezeigt.

Was kostet das?

model-viewer ist kostenlos. Eine Umwandlung von Foto zu AR bei jpgtousdz ist beim ersten Mal kostenlos, danach Teil eines Tarifs. Die API kostet $0.15 pro Foto und $1.50 pro Video-3D-Modell.