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

Sie können die 3D Warehouse App über die Anmeldeseite installieren.

Schritte:

  1. Öffnen Sie die Anmeldeseite.
  2. Geben Sie Ihre myshopify.com Shop-Domain ein.
  3. Klicken Sie auf Installieren.
  4. Überprüfen Sie die Details und klicken Sie dann auf App installieren.

Sie können auf die 3D Warehouse App über die Seite Apps in Ihrem Shopify-Adminbereich zugreifen.

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 über das Shopify-Partnerprogramm 3D-Modelle Ihrer Produkte erhalten.

Schritte:

  1. Klicken Sie in Ihrem Shopify-Adminbereich auf Ihr Kontomenü und dann auf Shopify-Experten einstellen:

    Shopify-Experten engagieren

  2. Mit einem Klick lässt sich der Abschnitt Neue Funktionen ausklappen.

  3. Klicken Sie auf 3D-Modelle Ihrer Produkte für Augmented Reality erstellen (ab 100 USD).

  4. Beantworten Sie die erforderlichen Fragen. Wenn Sie nun Produktfotos und Produktdimensionen bereitstellen möchten, dann folgen Sie den Schritten in der verlinkten Anleitung.

  5. Klicken Sie auf Auftrag senden.

Wenn Sie eine Jobanfrage einreichen, sind Sie nicht dazu verpflichtet, einen Shopify-Experten zu beauftragen. In diesem Schritt wird nur eine Beschreibung Ihres Projekts an verfügbare Experten übermittelt, die dann Ihre Anfrage prüfen. Wenn sich ein Experte für die Zusammenarbeit mit Ihnen entscheidet, kontaktiert er Sie und teilt Ihnen weitere Informationen über seine Gebühren und den Beginn der Zusammenarbeit mit.

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.
  • Benutzen Sie nach Möglichkeit keine Handykamera. Verwenden Sie 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.
  • Machen Sie zusätzliche Fotos von einzigartigen Details oder Texturen.
  • Legen Sie für die Fotodateien klare Titel fest – z. B. blue vase - top, oder blue vase - left und speichern Sie 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 finden, 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 für Sie, 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 Sie 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 Sie das AR-Bild nicht sehen können, nachdem Sie es zur 3D-Warehouse-app hinzugefügt haben, wenden Sie sich 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. Geben Sie im Feld Titel einen Titel für das 3D-Modell ein.
  5. Wählen Sie im Feld Verlinktes Produkt das zu diesem 3D-Modell gehörige Produkt und die Variante aus und klicken Sie dann auf Produkt auswählen.
  6. Klicken Sie auf Datei hochladen und wählen Sie die vom Shopify Experten bereitgestellte .usdz Datei aus.
  7. Klicken Sie auf Speichern.

Wiederholen Sie den Vorgang für die Datei .gltf oder .glb, die Ihr Shopify-Experte bereitgestellt hat. Stellen Sie sicher, dass Sie sie mit demselben Produkt verknüpfen, sodass Sie beide 3D-Modelldateitypen 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, Sie laden 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. Klicken Sie im Ordner Layout auf {/} theme.liquid.
  4. Finden Sie den <head>-Tag. Er sollte ziemlich am Anfang der Datei zu finden sein.
  5. Fügen Sie 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. Klicken Sie 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ügen Sie das AR-Logo zu Ihren 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. Klicken Sie im Ordner Abschnitte auf {/} product-template.liquid.
  4. Suchen Sie den Abschnitt der Vorlage, der Ihrem Produktfoto zugeordnet ist. Suchen Sie 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.

Sind Sie bereit, mit Shopify zu verkaufen?

Probieren Sie es kostenlos aus