Shopify AR powered by 3D Warehouse

Achtung

Die 3D Warehouse-App ist veraltet und steht nicht zum Download zur Verfügung. Du kannst 3D-Modelle direkt über die Seite Produkte hochladen. Hier findest du mehr Informationen über Produktmedien.

Mit Shopify AR können Kunden den Safari-Browser auf iOS 12-Geräten verwenden, um realistische und interaktive Versionen deiner Produkte in Augmented Reality (AR) anzuzeigen. Mit AR kannst du deinen Kunden ein besseres Gefühl für die Größe, den Umfang und die Details deiner Produkte geben. Die 3D Warehouse-App ermöglicht AR-Erlebnisse, indem du 3D-Modelle hochlädst und mit Produkten in deinem Geschäft verknüpfen kannst.

Damit deine Kunden die Produkte in AR sehen können, musst du die 3D Warehouse App installieren, 3D-Modelle deiner Produkte abrufen,, die 3D-Modelle zu der App hinzufügen, dein Design so bearbeiten, dass AR Quick Look aktiviert ist und dann das AR-Logo zu deinen 3D-Produkten hinzufügen.

Schritt 1: Installiere die 3D Warehouse App

Hinweis

Die 3D Warehouse-App ist veraltet und steht nicht zum Download zur Verfügung. Du kannst 3D-Modelle direkt über die Seite Produkte hochladen. Mehr Informationen zum Hinzufügen von Medien zu deinen Produkten findest du unter Produktmedien.

Schritt 2: Hole dir 3D-Modelle deiner Produkte

Bevor Kunden deine Produkte in AR sehen können, benötigst du 3D-Modelle deiner Produkte. 3D-Modelle sind virtuelle dreidimensionale Darstellungen eines Objekts oder einer Oberfläche. Sie ermöglichen es dir, das Objekt aus allen Blickwinkeln zu betrachten.

Du kannst einen Shopify-Experten engagieren, der dich bei der Erstellung von 3D-Modellen deiner Produkte unterstützt. Suche auf dem Shopify Experts Marketplace Experten, die den Service der Erstellung von 3D-Modellen anbieten, wähle einen Experten aus und kontaktiere ihn.

Gib im Kontaktformular für Experten Details zu deinem Projekt an. Wenn du nun Produktfotos und Produktdimensionen bereitstellen möchtest, dann folge den Schritten in der verlinkten Anleitung.

Wenn du einen Experten kontaktierst, bist du nicht dazu verpflichtet, einen Shopify-Experten zu engagieren. In diesem Schritt wird lediglich eine Anfrage an den Experten gesendet, der dann deine Anfrage prüfen kann. Wenn sich ein Experte für die Zusammenarbeit mit dir entscheidet, kontaktiert er dich und teilt dir weitere Informationen über seine Gebühren und den Beginn der Zusammenarbeit mit.

Wenn du nicht bereits im Rahmen deiner Jobanfrage Produktfotos und Produktmaße zur Verfügung gestellt hast, wird der Experte diese Informationen von dir anfordern. Halte dich an die unten beschriebenen Vorgaben, wenn du Fotos machst und etwas vermisst.

Produktfotos

3D-Modelle werden unter Verwendung von Fotos erstellt. Um das 3D-Modell zu erstellen, benötigt der Shopify-Experte Fotos deiner Produkte aus verschiedenen Blickwinkeln:

Beachte beim Fotografieren deines Produkts die folgenden Ratschläge:

• Stelle sicher, dass dein Produkt gut ausgeleuchtet ist.
• Stelle sicher, dass dein gesamtes Produkt fokussiert wird.
• Benutze nach Möglichkeit keine Handykamera. Verwende für große Produkte wie Möbel eine Kamera mit einem 50-mm-Objektiv und für kleine bis mittelgroße Produkte ein 70-mm- oder 100-mm-Objektiv.
• Mach zusätzliche Fotos von einzigartigen Details oder Texturen.
• Lege für die Fotodateien klare Titel fest – z. B. blue vase - top, oder blue vase - left und speichere sie in einem eindeutig benannten Ordner.

Produktmaße

Um präzise 3D-Modelle zu erstellen, benötigt der Shopify-Experte die detaillierten Maße deines Produkts. Befolge bei der Bereitstellung der Maße die folgenden Tipps:

• Beschreibe jede Dimension deines Produkts in klaren, einfachen Worten.
• Stelle deine Maße in mm zur Verfügung.
• Füge ein Diagramm bei, um zu zeigen, welchen Dimensionen die Maße entsprechen.
• Wenn du technische Zeichnungen oder CAD-Dateien für dein Produkt hast, füge diese ebenfalls bei.

Beispiel für das Erstellen von 3D-Modellen

Naomi verkauft diese blaue Vase:

Sie installiert die 3D-Warehouse-App und nutzt dann den Experts Marketplace, um einen Shopify-Experten zu beauftragen, der ein 3D-Modell der Vase erstellt. Naomi stellt dem Experten sechs hochwertige Fotos zur Verfügung, die mit einer Kamera mit einem 70-mm-Objektiv aufgenommen wurden:

Naomi gibt dem Experten ein Messdiagramm mit entsprechenden Produktmaßen in Millimetern:

• Die Höhe der Vase (1) beträgt ____mm
• Von der Oberseite der Vase bis zur Unterseite des Halses (2) sind es ____mm
• Von der Unterseite des Halses bis zum Boden der Vase (3) sind es ____mm
• Der Durchmesser der Öffnung der Vase (4) beträgt ____mm
• Die Breite des Randes der Öffnung (5) beträgt ____mm
• Der Durchmesser der Unterseite des Halses (6) beträgt ____mm
• Es gibt 8 Sechskantflächen auf der Vase
• Die Höhe der Sechskantflächen (8) beträgt ____mm
• Die Breite der Sechskantflächen (9) beträgt ____mm
• Der Durchmesser der breitesten Stelle der Vase (10) beträgt ____mm
• Der Durchmesser des Bodens der Vase (11) beträgt ____mm
• Der Durchmesser der Schaumstofffüße beträgt ____mm

Der Shopify-Experte erstellt anhand dieser Fotos und Dimensionen ein 3D-Modell der blauen Vase. Der Experte sendet Naomi eine .glb- und eine .usdz-Datei, die sie zu der 3D-Warehouse-App hinzufügen kann.

Schritt 3: Überprüfe die Qualität des Modells

Wenn ein Shopify-Experte dir ein 3D-Modell zur Verfügung stellt, solltest du überprüfen, ob du mit der Qualität zufrieden bist. Der Experte sollte dir Anweisungen zur Vorschau des Modells zur Verfügung stellen.

Überprüfe das Modell aus allen Blickwinkeln. Du kannst den glTF Viewer verwenden, um eine Vorschau deiner 3D-Modelle anzuzeigen. Bei der Überprüfung deines Modells solltest du dir die folgenden Fragen stellen:

• Stimmt die Form des Modells mit den Produktreferenz Fotos überein, die Sie dem Experten zur Verfügung gestellt haben?
• Haben alle Teile des Modells die richtigen Proportionen im Vergleich zum Rest?
• Wenn du die Möglichkeit haben, eine Vorschau des Modells in Augmented Reality zu betrachten: Hat das Modell im Vergleich zum Rest der Szene den richtigen Maßstab?
• Sieht das Modell aus, als sei es aus den gleichen Materialien hergestellt wie das Produkt?
• Wirken die Materialien des Modells gestreckt, verschwommen oder verzerrt?
• Gibt es Details wie Schrammen oder Kratzer, durch die die Materialien des Modells realistischer wirken würden?
• Falls Teile des Produkts transparent sind, reflektieren oder Licht absondern: Sind diese richtig dargestellt?
• Sehen alle Kanten realistisch aus? Gibt es Kanten, die zu scharf sind und geglättet werden sollten?
• Falls es dekorative Details wie ein Logo oder Text gibt: Sind diese gut zu erkennen?
• Gibt es irgendwo Lücken oder Löcher, wo eigentlich keine sein sollten?
• Entspricht das 3D-Modell den technischen Anforderungen an die Shopify-Plattform?
  • Das 3D-Modell muss eine GLB-Datei sein.
  • Die GLB-Datei sollte etwa 4 MB groß sein.
  • Die GLB-Datei darf 15 MB nicht überschreiten.

Der Shopify-Experte sollte das 3D-Modell entsprechend bestimmter Standards erstellen. Um mehr über diese Standards zu erfahren und Modelle besser beurteilen zu können, lies Erstellung von 3D-Modellen für Händler.

Wenn du der Meinung bist, dass die Qualität des Modells nicht ausreicht, wende dich an den Shopify-Experten und erkläre, was dich stört.

Schritt 4: Füge in der 3D-Warehouse-App ein 3D-Modell hinzu

Wenn du die 3D-Warehouse-App installiert und ein 3D-Modell erworben hast, musst du das Modell zur 3D-Warehouse-App hinzufügen.

Hinweis

Wenn du das AR-Bild nicht sehen kannst, nachdem du es zur 3D Warehouse-App hinzugefügt hast, wende dich an den Apple Support.

Schritte:

1. Klicke in deinem Shopify-Adminbereich auf Einstellungen > Apps und Vertriebskanäle.

2. Klicke auf der Seite Apps und Vertriebskanäle auf 3D Warehouse.

3. Klicke auf App öffnen.

4. Klicke auf 3D-Modell hinzufügen.

5. Gib im Feld Titel einen Titel für das 3D-Modell ein.

6. Wähle im Feld Verlinktes Produkt das zu diesem 3D-Modell gehörige Produkt und die Variante aus und klicke dann auf Produkt auswählen.

7. Klicke auf Datei hochladen und wähle die vom Shopify-Experten bereitgestellte .usdz-Datei aus.

8. Klicke auf Speichern.

Wiederholen Sie den Hochladevorgang für die .gltf- oder .glb-Datei, die Ihr Shopify-Experte bereitgestellt hat. Stellen Sie sicher, dass Sie sie mit demselben Produkt verknüpfen, sodass Sie beide Typen von 3D-Modelldateien mit dem Produkt verknüpft haben.

Hinweis

Wenn du eine .gltf-Datei hochlädst, wirst du aufgefordert, zusätzliche Dateien im Abschnitt Verlinkte Dateien hinzuzufügen. Klicke auf Datei hochladen, um die vom Experten bereitgestellten verknüpften Textur-Ressourcen hochzuladen.

Akzeptierte Dateitypen

Die Shopify-Experten stellen zwei verschiedene Dateitypen für jedes 3D-Modell zur Verfügung, eine .usdz-Datei und eine .gltf- oder .glb-Datei. Diese verschiedenen Dateitypen werden von unterschiedlichen Plattformen und Funktionen verwendet. Damit Kunden beispielsweise 3D-Produkte im Safari-Browser auf iOS 12-Geräten anzeigen können, müssen Sie eine .usdz-Datei hochladen. Am besten laden Sie beide Dateitypen hoch. So ist sichergestellt, dass Ihr Onlineshop mit zukünftigen Augmented Reality- und 3D-Funktionen kompatibel ist.

Schritt 5: Bearbeite dein Theme, um AR Quick Look zu aktivieren

Du musst deinen Theme-Code bearbeiten, um AR Quick Look zu aktivieren. Damit können Kunden den Safari-Browser auf iOS 12-Geräten zum Anzeigen deiner 3D-Produkte verwenden.

Schritte:

1. Klicke in deinem Shopify-Adminbereich auf Einstellungen > Apps und Vertriebskanäle.

2. Klicke auf der Seite Apps und Vertriebskanäle auf Online store.

3. Klicke auf Vertriebskanal öffnen.

4. Klicke neben deinem aktuellen Theme auf die Schaltfläche ... > Code bearbeiten.

5. Klicke im Ordner Layout auf {/} theme.liquid.

6. Finde den <head>-Tag. Er sollte ziemlich am Anfang der Datei zu finden sein.

7. Füge in der nächsten Zeile den folgenden Code ein:

<script
  src="https://cdn.shopify.com/shopifycloud/ar-quicklook-js/assets/v1/shopify3d.js"
  crossorigin="anonymous"
></script>

1. Klicke auf Speichern.
2. Klicke im Ordner Abschnitte auf {/} product-template.liquid.
3. Kopiere den folgenden Code oben in die Datei:

<script>
  (function(s3d) {
    if (!s3d) {
      console.warn('"window.Shopify3d" does not exist. Please ensure you\'ve added the <script> to your theme');
      return;
    }
    {% for variant in product.variants %}
      s3d.mapMetafieldAssets('{{ variant.id }}', '{{ variant.metafields.shopify3d['assets'] }}');
    {% endfor %}
  })(window.Shopify3d);
</script>

![Quicklook library added to product template](/manual/apps/3d-warehouse/quicklook-product-template.png)

1. Klicke auf Speichern.

Wenn du mehr als eine Produktvorlage verwendest, füge den Code auch zu diesen Vorlagedateien hinzu.

Schritt 6: Füge das AR-Logo zu deinen 3D-Produkten hinzu

Kunden, die iOS 12-Geräte verwenden, wissen, dass sie dein Produkt in 3D sehen können, wenn sie das AR-Logo sehen:

Du msust deinen Themencode bearbeiten, um das AR-Logo auf Produktbildern anzuzeigen.

Schritte:

1. Klicke in deinem Shopify-Adminbereich auf Einstellungen > Apps und Vertriebskanäle.

2. Klicke auf der Seite Apps und Vertriebskanäle auf Online store.

3. Klicke auf Vertriebskanal öffnen.

4. Klicke neben deinem aktuellen Theme auf die Schaltfläche ... > Code bearbeiten.

5. Klicke im Ordner Abschnitte auf {/} product-template.liquid.

6. Suche den Abschnitt der Vorlage, der deinem Produktfoto zugeordnet ist. Suche nach Keywords wie ProductPhoto oder featured_image:

   

7. Suche im Abschnitt Produktfoto den ersten <img... >-Tag.

8. Füge in der Zeile über diesem Tag den folgenden Code ein:

<div class="ar-quicklook-overlay" data-shopify-3d-variant-id="{{ product.selected_or_first_available_variant.id }}" style="display: none;"></div>

![Product photo liquid with code](/manual/apps/3d-warehouse/product-image-liquid-with-code.png)

1. Klicke auf Speichern.
2. Öffne die Datei, die das CSS deines Themes enthält. Diese Datei befindet sich normalerweise im Ordner Assets und hat meistens einen Titel wie {/}theme.scss.liquid.
3. Füge ganz am Ende der Datei den folgenden Code ein:

.ar-quicklook-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 2;
}

1. Klicke auf Speichern.

Öffne deinen Onlineshop im Safari-Browser auf einem Gerät mit iOS 12 und navigiere dann zur Produktseite, um dein 3D-Modell zu testen. Tippe auf das AR-Logo im Produktbild, um es in 3D anzuzeigen.