Shopify AR powered by 3D Warehouse

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.

Betrachten einer Vase in 3D

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. Weitere 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.

Sie können einen Shopify-Experten beauftragen, der Sie bei der Erstellung von 3D-Modellen Ihrer Produkte unterstützt. Suchen Sie auf dem Shopify Experts Marketplace Experten, die den Service der Erstellung von 3D-Modellen anbieten, wählen Sie einen Experten aus und fordern Sie ein Angebot an.

Geben Sie im Formular „Angebot anfordern“ Details zu Ihrem Projekt an. Wenn Sie nun Produktfotos und Produktdimensionen bereitstellen möchten, dann folgen Sie den Schritten in der verlinkten Anleitung.

Wenn Sie ein Angebot anfordern, sind Sie nicht verpflichtet, einen Shopify-Experten zu beauftragen. In diesem Schritt wird lediglich eine Anfrage an den Experten gesendet, der dann Ihre Anfrage prüfen kann. Wenn sich ein Experte für die Zusammenarbeit mit Ihnen entscheidet, wird er Sie bezüglich weiterer Informationen über seine Gebühren und die Zusammenarbeit mit Ihnen kontaktieren.

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:

Produkt Fotowinkel

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:

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:

Produkt Fotowinkel

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

Vase

  • 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 Ihnen ein 3D-Modell zur Verfügung stellt, sollten Sie überprüfen, ob Sie mit der Qualität zufrieden sind. Der Experte sollte Ihnen Anweisungen dazu geben, wie Sie eine Vorschau des Modells betrachten können.

Ü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?

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, lesen Sie Erstellung von 3D-Modellen für Händler.

Wenn Sie der Meinung sind, dass die Qualität des Modells nicht ausreicht, wenden Sie sich an den Shopify-Experten und erklären Sie, was Sie 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 im Shopify-Adminbereich auf Apps.
  2. Klicke auf 3D-Warehouse.
  3. Klicke auf 3D-Modell hinzufügen.
  4. Gib im Feld Titel einen Titel für das 3D-Modell ein.
  5. 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.
  6. Klicke auf Datei hochladen und wähle die vom Shopify Experten bereitgestellte .usdz Datei aus.
  7. 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 Onlineshop.
  2. Klicke neben dem Namen des aktuellen Themes auf Aktionen > Code bearbeiten:
  3. Klicke im Ordner Layout auf {/} theme.liquid.
  4. Finde den <head>-Tag. Er sollte ziemlich am Anfang der Datei zu finden sein.
  5. Füge in der nächsten Zeile den folgenden Code ein:
<script
  src="https://cdn.shopifycloud.com/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-Bibliothek zur Produktvorlage hinzugefügt

  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:

AR-Logo

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

Schritte:

  1. Klicke in deinem Shopify-Adminbereich auf Onlineshop.
  2. Klicke neben dem Namen des aktuellen Themes auf Aktionen > Code bearbeiten:
  3. Klicke im Ordner Abschnitte auf {/} product-template.liquid.
  4. Suche den Abschnitt der Vorlage, der deinem Produktfoto zugeordnet ist. Suche nach Keywords wie ProductPhoto oder featured_image:
    Produktfoto Liquid
  5. Suche im Abschnitt Produktfoto den ersten <img... >-Tag.
  6. 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>

Produktfoto Liquid mit Code

  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 Online Shop mit einem Theme großartigOnlineshop 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.

Bereit, mit Shopify zu verkaufen?

Kostenlos ausprobieren