Shopify 3D-Produktmodelle: GLB, AR und Viewer-Workflow-Leitfaden

“

TL;DR

– Shopify unterstützt nativ 3D-Produktmodelle: Es ist keine App erforderlich, um sie anzuzeigen oder AR zu aktivieren. – Shopify akzeptiert die Modelle GLB und USDZ. Ein GLB-first-Workflow ist praktisch, da Shopify das Begleitformat erstellt, das für kompatible Geräte erforderlich ist. – Der eigentliche Engpass ist oft nicht die Leistung, sondern die Erstellung eines 3D-Modells. Sie können eines erstellen, generieren oder auslagern. – Vor dem Hochladen optimieren: Halten Sie die Anzahl der Polygone und Texturgrößen sinnvoll, damit Mobilgeräte schnell bleiben. – Wählen Sie Ihren Weg: native 3D-Medien (kostenlos) für die meisten Geschäfte; eine Drittanbieter-App oder ein benutzerdefinierter Liquid Viewer/Konfigurator für erweiterte Anforderungen.

Shopify unterstützt 3D-Produktmodelle als Produktmedien, sodass Käufer ein Modell auf der Produktseite drehen und AR auf kompatiblen Telefonen verwenden können. Der schwierigere Teil besteht normalerweise darin, ein geeignetes 3D-Modell zu bekommen. Dieser Leitfaden deckt den Arbeitsablauf von der Modellerstellung und -optimierung bis zum Hochladen, der Viewer-Einrichtung und dem mobilen Testen ab.

Wie 3D-Produktmodelle auf Shopify funktionieren

Shopify unterstützt 3D-Modelle als native Produktmedien neben Bildern und Videos. Ein kompatibles Theme kann das Modell in der Produktgalerie darstellen, ohne dass eine separate Storefront-App erforderlich ist.

Käufer können das Modell im Browser drehen, zoomen und inspizieren. Auf unterstützten Mobilgeräten kann die Produktseite auch „In Ihrem Bereich anzeigen“ anbieten, sodass der Artikel über AR in der Umgebung des Käufers platziert werden kann.

Shopify akzeptiert sowohl die Produktmodelle GLB als auch USDZ und verarbeitet ein hochgeladenes Modell, sodass kompatible Formate auf allen Geräten verfügbar sind. Dieses Handbuch verwendet einen GLB-First-Workflow, da GLB Geometrie, Materialien und Texturen in einer Datei verpackt. Überprüfen Sie vor der Lieferung die aktuellen Produktmedienanforderungen von Shopify.

Woher kommen Ihre 3D-Modelle?

Sie können ein Modell erstellen, eines mit AI generieren oder einen 3D-Künstler beauftragen. Wählen Sie basierend auf der erforderlichen Genauigkeit des Produkts, der Kataloggröße, dem Budget und dem Einführungsplan.

Machen Sie sie selbst: Blender oder CAD

Die Tools Blender und CAD bieten die größte Kontrolle über Abmessungen, Topologie, UVs und Materialien. Dieser Weg eignet sich für technisch orientierte Produkte und Artikel, die genauen Maßen entsprechen müssen, erfordert jedoch Modellierungskenntnisse und mehr Produktionszeit.

Generieren mit AI

Für eine schnellere Iteration kann Tripo Image to 3D ein Produktbild in einen 3D-Ausgangspunkt umwandeln. Die Ergebnisse sollten dennoch mit dem tatsächlichen Produkt verglichen werden, insbesondere im Hinblick auf verdeckte Oberflächen, dünne Teile, Symmetrie und exakte Maßstäbe.

Ein typischer Arbeitsablauf ist einfach:

1. Laden Sie ein Produktfoto hoch (oder geben Sie eine Textaufforderung ein).
2. Erzeugen Sie das 3D-Modell mit AI.
3. Überprüfen und verfeinern Sie das Ergebnis bei Bedarf.
4. Exportieren Sie das Modell als GLB und laden Sie es auf Shopify hoch.

Dieser Weg kann die Produktion großer Kataloge verkürzen, aber komplexe oder dimensionskritische Produkte müssen möglicherweise manuell bereinigt werden, bevor sie für kundenorientiertes 3D oder AR geeignet sind.

Kaufen oder auslagern

Vorhandene Assets können für generische Produkte geeignet sein, während für einzigartige Waren normalerweise ein Auftragsmodell erforderlich ist. Fragen Sie nach realem Maßstab, PBR-Materialien, sauberer Topologie und einem Shopify-kompatiblen Ergebnis.

AI ist nützlich, wenn es auf Geschwindigkeit und Katalogabdeckung ankommt; Manuelles Modellieren oder professionelle Verfeinerung ist sicherer, wenn Maßgenauigkeit oder erstklassige Nahaufnahmequalität wichtig sind. Ein hybrider Workflow kann schnelle Generierung mit gezielter Künstlerbereinigung kombinieren.

Optimieren Sie das Modell vor dem Hochladen

Webmodelle müssen die visuelle Qualität mit der Downloadgröße und der Geräteleistung in Einklang bringen. Überprüfen Sie vor dem Hochladen Geometrie, Texturen, Maßstab, Ausrichtung und Ursprung.

Polygone und Dateigröße

Entfernen Sie Geometrie, die die Produktsilhouette oder sichtbaren Details nicht verbessert. Netze mit geringerer Komplexität laden und rendern im Allgemeinen effizienter auf mobiler Hardware.

Für AI-generierte oder dichte Netze kann Tripo Smart Mesh eine sauberere Topologie mit niedrigeren Polygonen für Web3D- und Echtzeit-Workflows erstellen. Komprimieren Sie Texturen und verwenden Sie Draco nur, wenn die vollständige Export- und Viewer-Pipeline dies unterstützt.

Shopify akzeptiert derzeit das Hochladen von 3D-Modellen bis zu 500 MB und optimiert automatisch Dateien, die größer als 15 MB sind. Behandeln Sie 15 MB als Optimierungsschwellenwert und nicht als Upload-Limit und überprüfen Sie die aktuellen Anforderungen in der Produktmediendokumentation von Shopify.

Maßstab und Ausrichtung in der realen Welt

Falsche Einheiten, Ausrichtung oder Ursprungsplatzierung können dazu führen, dass ein Produkt zu groß, zu klein oder schlecht positioniert in AR erscheint.

Exportieren Sie im realen Maßstab, bestätigen Sie die Aufwärts- und Vorwärtsachsen des Modells und platzieren Sie den Ursprung an einem logischen Kontaktpunkt, z. B. der Mitte der Basis. Testen Sie das Ergebnis auf den Oberflächen, auf denen Kunden es wahrscheinlich platzieren werden.

Texturen & PBR

Entfernen Sie nicht verwendete Materialien, verwenden Sie sinnvolle Texturauflösungen und kombinieren Sie Karten in einem Atlas, wenn dies den Aufwand reduziert, ohne sichtbare Details zu beeinträchtigen.

Verwenden Sie Standardmaterialien von PBR und testen Sie deren Aussehen im Viewer von Shopify. Stark reflektierende, transparente oder geschichtete Materialien erfordern möglicherweise eine zusätzliche Anpassung über Browser und Geräte hinweg.

Ein 3D-Modell zu einem Shopify-Produkt hinzufügen (Schritt für Schritt)

Laden Sie das Modell nach der Optimierung als Produktmedium hoch und konfigurieren Sie seine anfängliche Präsentation vor der Veröffentlichung.

1. Öffnen Sie Shopify Admin, gehen Sie zu Produkte und wählen Sie dann das Produkt aus, das Sie aktualisieren möchten.
2. Klicken Sie im Abschnitt Medien auf Medien hinzufügen und laden Sie eine unterstützte Datei GLB oder USDZ hoch. Shopify verarbeitet es und fügt es der Mediengalerie hinzu.
3. Wählen Sie das hochgeladene 3D-Modell aus, klicken Sie auf Datei bearbeiten und verwenden Sie den No-Code-Editor von Shopify, um die Umgebung oder Beleuchtung, den Hintergrund sowie die anfängliche Drehung und den Zoom des Modells anzupassen.
4. Vorschau der Produktseite. Überprüfen Sie die Drehung und den Zoom auf dem Desktop und testen Sie dann „Ansicht in Ihrem Raum“ auf unterstützten iOS- und Android-Geräten.

Den aktuellen Editorpfad und die verfügbaren Steuerelemente finden Sie in der Dokumentation zum 3D-Modelleditor von Shopify.

Aktivieren Sie AR: „In Ihrem Bereich anzeigen“

Ein einzelnes hochgeladenes Modell kann sowohl den interaktiven Storefront-Viewer als auch AR unterstützen, nachdem Shopify es in kompatible Formate verarbeitet. Normalerweise müssen Sie nicht für jedes unterstützte Gerät separate Storefront-Assets verwalten.

Das Steuerelement „In Ihrem Bereich anzeigen“ wird nur angezeigt, wenn das Gerät, der Browser, das Design und das Modell AR unterstützen. Testen Sie auf physischen Geräten, anstatt sich auf eine Desktop-Vorschau zu verlassen.

Kompatible Apple-Geräte verwenden USDZ mit Apple Quick Look; Unterstützte Android-Geräte können Google Scene Viewer verwenden. Shopify bereitet kompatible Modellformate vor, während das Theme für die Darstellung der Produktmedien und AR-Steuerelemente verantwortlich ist.

Bevor Sie Ihr Produkt veröffentlichen, testen Sie das Erlebnis auf einem echten Mobilgerät:

1. Öffnen Sie die Produktseite auf einem unterstützten Smartphone.
2. Bestätigen Sie, dass die Schaltfläche „In Ihrem Bereich anzeigen“ angezeigt wird.
3. Tippen Sie auf die Schaltfläche AR und stellen Sie das Produkt auf einen Boden oder Tisch.
4. Stellen Sie sicher, dass Größe, Ausrichtung und Beleuchtung des Modells natürlich aussehen.

Natives 3D vs. Drittanbieter-Apps vs. benutzerdefinierter Viewer

Wählen Sie zwischen nativen Produktmedien, einem Drittanbieter-Konfigurator oder einer benutzerdefinierten Theme-Implementierung basierend auf der Interaktion, die das Produkt erfordert.

Native 3D-Medien

Native 3D-Medien sind die einfachste Möglichkeit zum Drehen und Zoomen und werden AR unterstützt. Es funktioniert am besten, wenn das Theme die Produktmedien Shopify bereits korrekt verarbeitet.

Apps und Konfiguratoren von Drittanbietern

Verwenden Sie eine Drittanbieterplattform, wenn Käufer Materialien ändern, Komponenten konfigurieren, Hotspots auslösen oder mit Produktoptionen innerhalb des 3D-Erlebnisses interagieren müssen.

• Farb- und Materialwechsel
• Produktkonfiguration
• Komponentenauswahl
• Interaktive Hotspots
• Geführte Produkterlebnisse

Benutzerdefinierter Liquid Viewer

Beginnen Sie für benutzerdefinierte Designs mit dem unterstützten Liquid-Pfad von Shopify: Rendern Sie Produktmodellmedien mit model_viewer_tag und befolgen Sie die Produktmedien von Shopify und die Shopify-XR-Anleitung für gerätespezifische AR.

Eine reine Google <model-viewer>-Integration kann immer noch eine erweiterte Option sein, wenn das Theme benutzerdefinierte Steuerelemente, Hotspots, Animationen oder Ladeverhalten benötigt, der Entwickler jedoch die Barrierefreiheit, den Medienstatus, Fallbacks und die AR-Konfiguration verwalten muss.

Was sollten Sie wählen?

• Benötigen Sie etwas Einfaches? Verwenden Sie die nativen 3D-Medien von Shopify.
• Benötigen Sie Produktanpassungen oder Konfiguratoren? Wählen Sie eine 3D-Plattform eines Drittanbieters.
• Benötigen Sie vollständige Kontrolle? Erweitern Sie die native Medienintegration von Shopify oder erstellen Sie einen erweiterten benutzerdefinierten Viewer.

Helfen 3D-Modelle tatsächlich? Leistung und Konvertierung

3D kann nützlichen Produktkontext hinzufügen, sein Wert hängt jedoch vom Produkt und der Implementierung ab. Messen Sie Leistung und Kundenverhalten, anstatt davon auszugehen, dass jeder Katalog gleichermaßen profitiert.

Performance: Mythos vs. Realität

Das Ladeverhalten variiert je nach Thema und Betrachter. Optimierte Geometrie und Texturen reduzieren Übertragungs-, Speicher- und Renderingkosten, Händler sollten jedoch dennoch repräsentative Produktseiten auf Mobilgeräten der Mittelklasse und langsameren Verbindungen testen.

Umrechnung und Rückgabe

Interaktives 3D und AR können Käufern helfen, Maßstab, Form und Details zu verstehen, die mit flachen Bildern nur schwer zu kommunizieren sind.

Die Ergebnisse der Conversion- und Rücklaufquote variieren stark je nach Kategorie, Zielgruppe, Asset-Qualität und Platzierung. Behandeln Sie externe Fallstudien als Kontext und nicht als Prognose und bewerten Sie die Funktion anhand geschäftsspezifischer Interaktions-, Konversions- und Retourendaten.

Wenn sich 3D lohnt

Nicht jedes Produkt benötigt ein 3D-Modell. Der größte Wert ergibt sich aus Artikeln, bei denen Käufer davon profitieren, vor dem Kauf Größe, Materialien oder räumliche Passform zu verstehen.

3D-Modelle sind besonders nützlich für:

• Möbel und Wohndekoration
• Schuhe und Modeaccessoires
• Schmuck und Luxusgüter
• Unterhaltungselektronik
• Industrieausrüstung und technische Produkte
• Produkte mit konfigurierbaren Optionen

Bei preiswerten oder stark standardisierten Produkten können herkömmliche Fotos bereits ausreichend Informationen liefern. Eine gute Strategie besteht darin, mit Ihren SKUs mit dem höchsten Wert oder der höchsten Rendite zu beginnen, Engagement und Konversionen zu messen und dann 3D auf den Rest Ihres Katalogs auszuweiten, wenn die Ergebnisse die Investition rechtfertigen.

Häufige Fallstricke und Fehlerbehebung

Die meisten Fehler sind auf die Komplexität der Assets, eine falsche Skalierung, nicht unterstützte Gerätebedingungen oder die Handhabung von Themenmedien zurückzuführen. Führen Sie vor der Veröffentlichung die folgenden Überprüfungen durch.

Das Modell wird auf Mobilgeräten langsam oder nicht geladen

Wenn der Ladevorgang langsam ist, überprüfen Sie Geometrie, Texturauflösung, Materialanzahl und Gesamtdateigröße. Shopify akzeptiert Dateien bis zu 500 MB und optimiert Dateien über 15 MB, kleinere, effiziente Assets sind für die mobile Bereitstellung jedoch immer noch vorzuziehen.

Checkliste:

• Reduzieren Sie die Anzahl der Polygone.
• Texturen komprimieren.
• Exportieren Sie ein optimiertes GLB.
• Testen Sie sowohl WLAN als auch mobile Daten.

Das Produkt sieht in AR in der falschen Größe aus

Wenn das Produkt in AR riesig oder winzig erscheint, ist der Maßstab oder die Ausrichtung des Modells wahrscheinlich falsch. Stellen Sie vor dem Export sicher, dass es reale Einheiten verwendet, die richtige Vorwärtsachse hat und der Ursprung an der Basis des Objekts liegt.

Checkliste:

• Einheiten überprüfen (realer Maßstab).
• Modellausrichtung prüfen.
• Bestätigen Sie, dass der Ursprung/Drehpunkt korrekt positioniert ist.
• Testen Sie noch einmal auf einem echten Mobilgerät.

Die Schaltfläche „In Ihrem Bereich anzeigen“ wird nicht angezeigt

Wenn sich das Modell dreht, aber AR nicht verfügbar ist, überprüfen Sie, ob es sich beim Upload um ein unterstütztes GLB- oder USDZ-Modell handelt, testen Sie es auf einem kompatiblen physischen Gerät und bestätigen Sie, dass das Design die Shopify-Steuerelemente AR darstellt.

Checkliste:

• Bestätigen Sie, dass das Modell ein unterstütztes Format hat.
• Testen Sie auf einem physischen iPhone oder Android-Gerät.
• Stellen Sie sicher, dass das Betriebssystem und der Browser AR unterstützen.
• Veröffentlichen Sie das Produkt erneut, wenn Sie das Modell kürzlich ersetzt haben.

AR Funktioniert nicht auf dem iPhone

Testen Sie unter iOS in Safari auf einem Quick Look-kompatiblen Gerät. Wenn AR immer noch fehlschlägt, warten Sie, bis die Verarbeitung von Shopify abgeschlossen ist, überprüfen Sie Maßstab und Materialien erneut und bestätigen Sie, dass das Design die von Shopify unterstützte Produkt-Medien-Integration verwendet.

Checkliste:

• Testen Sie in Safari auf einem unterstützten iPhone oder iPad.
• Überprüfen Sie, ob Apple Quick Look auf dem Gerät verfügbar ist.
• Lesen Sie die neueste Shopify-Dokumentation, wenn das Problem weiterhin besteht.

Ein paar Minuten Testen auf echten Mobilgeräten vor der Veröffentlichung können die meisten Probleme frühzeitig erkennen und sicherstellen, dass Kunden ein reibungsloses 3D- und AR-Erlebnis erhalten.

Häufig gestellte Fragen

Welches Dateiformat verwendet Shopify für 3D-Modelle?

Shopify akzeptiert sowohl die Produktmodelle GLB als auch USDZ. Ein GLB-first-Workflow ist praktisch für die Webbereitstellung, da er das Modell und die Texturen in einer Datei verpackt, während USDZ von Apple Quick Look verwendet wird. Shopify verarbeitet Uploads, um kompatible Formate auf allen unterstützten Geräten bereitzustellen.

Wie füge ich ein 3D-Modell zu einem Shopify-Produkt hinzu?

Öffnen Sie Shopify Admin → Produkte, wählen Sie das Produkt aus und laden Sie eine unterstützte GLB- oder USDZ-Datei in Medien hoch. Wählen Sie das hochgeladene Modell aus und verwenden Sie Datei bearbeiten, um seine anfängliche Darstellung anzupassen. Sehen Sie sich die Storefront in der Vorschau an und testen Sie AR vor der Veröffentlichung auf physischen Mobilgeräten.

Sind 3D-Produktmodelle auf Shopify kostenlos oder benötige ich eine App?

Die native Produktmedienfunktion von Shopify erfordert keine separate Viewer-App für grundlegendes 3D und unterstützt AR. Für Konfiguratoren, Materialwechsel, Hotspots, Analysen oder spezielle Integrationen kann eine Drittanbieter-App dennoch nützlich sein. Überprüfen Sie, ob das aktive Design Shopify-Produktmedien unterstützt.

Wie aktiviere ich AR für meine Shopify-Produkte?

Laden Sie ein unterstütztes 3D-Modell hoch und verwenden Sie ein Design, das Shopify Produktmedien und AR Steuerelemente darstellt. Shopify bereitet kompatible GLB- und USDZ-Assets vor; Unterstützte Apple-Geräte verwenden Quick Look, während kompatible Android-Geräte Scene Viewer verwenden können. Bestätigen Sie das Ergebnis auf realen Geräten.

Verlangsamen 3D-Modelle meinen Shopify-Shop?

Dies ist möglich, wenn die Assets groß sind oder das Theme sie ineffizient lädt. Reduzieren Sie unnötige Geometrie, optimieren Sie Texturen und testen Sie die tatsächliche Produktseite auf mobiler Hardware und langsameren Netzwerken. Das Ladeverhalten hängt von der Implementierung ab. Messen Sie also, anstatt sich auf einen universellen Leistungsanspruch zu verlassen.

Wo kann ich 3D-Modelle für meine Shopify-Produkte erhalten?

Sie können das Produkt in Blender oder CAD modellieren, einen Ausgangspunkt mit Tripo Image to 3D generieren, ein geeignetes lizenziertes Asset kaufen oder einen 3D-Künstler beauftragen. Welche Route Sie auch wählen, überprüfen Sie vor der Veröffentlichung Abmessungen, Materialien, Topologie und Nutzungsrechte.

Was ist der Unterschied zwischen GLB und USDZ auf Shopify?

GLB ist ein kompaktes weborientiertes Format, das Geometrie, Materialien und Texturen in einer Datei enthalten kann. USDZ wird für Apple Quick Look AR verwendet. Shopify akzeptiert beide Formate und verarbeitet den Upload für kompatible Storefront- und Geräteerlebnisse.

Fazit

Shopify bietet die Produkt-Medien-Grundlage für interaktives 3D und unterstützt AR; Die Qualität des Erlebnisses hängt vom Modell, Thema und Test ab. Erstellen oder beschaffen Sie ein genaues Asset, optimieren Sie es, laden Sie ein unterstütztes Format hoch und validieren Sie das Ergebnis auf realen Geräten. Um ein Startmodell aus einem Produktbild zu erstellen, versuchen Sie es mit Tripo AI Studio.