Shopify AR powered by 3D Warehouse

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.

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

Betrachten einer Vase in 3D

Damit Ihre Kunden die Produkte in AR sehen können, müssen Sie die 3D Warehouse App installieren, 3D-Modelle Ihrer Produkte abrufen, , die 3D-Modelle zu der App hinzufügen, Ihr Design so bearbeiten, dass AR Quick Look aktiviert ist und dann das AR-Logo zu Ihren 3D-Produkten hinzufügen.

Schritt 1: Installieren Sie 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: Holen Sie sich 3D-Modelle Ihrer Produkte

Bevor Kunden Ihre Produkte in AR sehen können, benötigen Sie 3D-Modelle Ihrer Produkte. 3D-Modelle sind virtuelle dreidimensionale Darstellungen eines Objekts oder einer Oberfläche. Sie ermöglichen es Ihnen, 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 Sie nicht bereits im Rahmen Ihrer Jobanfrage Produktfotos und Produktmaße zur Verfügung gestellt haben, wird der Experte diese Informationen von Ihnen anfordern. Halten Sie sich an die unten beschriebenen Vorgaben, wenn Sie Fotos machen und etwas vermessen.

Produktfotos

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

Produkt Fotowinkel

Beachten Sie beim Fotografieren Ihres Produkts die folgenden Ratschläge:

  • Stellen Sie sicher, dass Ihr Produkt gut ausgeleuchtet ist.
  • Stellen Sie sicher, dass Ihr 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 Ihres Produkts. Befolgen Sie bei der Bereitstellung der Maße die folgenden Tipps:

  • Beschreiben Sie jede Dimension Ihres Produkts in klaren, einfachen Worten.
  • Stellen Sie Ihre Maße in mm zur Verfügung.
  • Fügen Sie ein Diagramm bei, um zu zeigen, welchen Dimensionen die Maße entsprechen.
  • Wenn Sie technische Zeichnungen oder CAD-Dateien für Ihr Produkt haben, fügen Sie 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üfen Sie 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üfen Sie das Modell aus allen Blickwinkeln. Sie können den glTF Viewer verwenden, um eine Vorschau Ihrer 3D-Modelle anzuzeigen. Bei der Überprüfung Ihres Modells sollten Sie sich die folgenden Fragen stellen:

  • Entspricht die Form des Modells den Produktfotos, die Sie dem Experten übermittelt hatten?
  • 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ügen Sie in der 3D-Warehouse-App ein 3D-Modell hinzu

Wenn Sie die 3D-Warehouse-App installiert und ein 3D-Modell erworben haben, müssen Sie 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. Klicken Sie im Shopify-Adminbereich auf Apps.
  2. Klicken Sie auf 3D-Warehouse.
  3. Klicken Sie 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. Klicken Sie 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 Sie eine .gltf-Datei hochladen, werden Sie aufgefordert, zusätzliche Dateien im Abschnitt Verlinkte Dateien hinzuzufügen. Klicken Sie 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: Bearbeiten Sie Ihr Theme, um AR Quick Look zu aktivieren

Sie müssen Ihren Theme-Code bearbeiten, um AR Quick Look zu aktivieren. Damit können Kunden den Safari-Browser auf iOS 12-Geräten zum Anzeigen Ihrer 3D-Produkte verwenden.

Schritte:

  1. Klicken Sie in Ihrem Shopify-Adminbereich auf Onlineshop.
  2. Klicken Sie neben dem Namen des aktuellen Themes auf Aktionen > Code bearbeiten:
  3. Klicke im Ordner Layout auf {/} theme.liquid.
  4. Finden Sie 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. Klicken Sie auf Speichern.

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

  3. Kopieren Sie 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. Klicken Sie auf Speichern.

Wenn Sie mehr als eine Produktvorlage verwenden, fügen Sie 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 Ihr Produkt in 3D sehen können, wenn sie das AR-Logo sehen:

AR-Logo

Sie müssen Ihren Themencode bearbeiten, um das AR-Logo auf Produktbildern anzuzeigen.

Schritte:

  1. Klicken Sie in Ihrem Shopify-Adminbereich auf Onlineshop.
  2. Klicken Sie 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. Suchen Sie im Abschnitt Produktfoto den ersten <img... >-Tag.
  6. Fügen Sie 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. Klicken Sie auf Speichern.

  2. Öffnen Sie die Datei, die das CSS Ihres Themes enthält. Diese Datei befindet sich normalerweise im Ordner Assets und hat meistens einen Titel wie {/}theme.scss.liquid.

  3. Fügen Sie ganz am Ende der Datei den folgenden Code ein:

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

Öffnen Sie Ihren Onlineshop im Safari-Browser auf einem Gerät mit iOS 12 und navigieren Sie dann zur Produktseite, um Ihr 3D-Modell zu testen. Tippen Sie auf das AR-Logo im Produktbild, um es in 3D anzuzeigen.

Bereit, mit Shopify zu verkaufen?

Kostenlos ausprobieren