So installieren Sie den 3D-Viewer von Complete in Shopify

Bevor Sie beginnen

Öffnen Sie in Complete Dashboard „Meine Produkte“, wählen Sie das Stück und kopieren Sie den Einbettungscode. Er hat dieses Format:

<iframe src="https://www.completemagazine.com.br/ar/PRODUKTCODE" width="100%" height="520" frameborder="0" allow="xr-spatial-tracking; fullscreen; camera" style="border:0;border-radius:12px"></iframe>

Der Teil nach /ar/ ist der Code dieses Stücks. Notieren Sie ihn: Beim zweiten Weg ist er das Einzige, was in Shopify eingetragen wird.

Weg 1: in der Produktbeschreibung

1. 01

   Produkt öffnen

   Gehen Sie in der Shopify-Verwaltung zu Produkte und öffnen Sie das Produkt, das 3D erhalten soll.

2. 02

   Editor auf HTML umstellen

   Klicken Sie im Beschreibungsfeld auf die Schaltfläche zum Anzeigen von HTML, die mit dem Symbol <> gekennzeichnet ist. Der Text erscheint nun als Code.

3. 03

   Code einfügen

   Fügen Sie den Einbettungscode an der Stelle ein, an der der Viewer erscheinen soll, vorzugsweise am Anfang der Beschreibung.

4. 04

   Speichern und prüfen

   Speichern Sie das Produkt und öffnen Sie die Seite im Shop, am Computer und auf dem Smartphone. Tippen Sie auf dem Smartphone auf die Augmented-Reality-Schaltfläche, um zu prüfen, ob sich die Kamera öffnet.

Dieser Weg eignet sich für einen Test mit wenigen Produkten. Der Nachteil: Der Viewer steht dort, wo das Theme die Beschreibung anzeigt, und das ist bei vielen Themes unterhalb von Preis und Kaufschaltfläche.

Weg 2: ein Block im Theme für alle Produkte

1. 01

   Feld am Produkt anlegen

   Fügen Sie unter Einstellungen, Benutzerdefinierte Daten, Produkte eine Metafeld-Definition hinzu, mit dem Namen „Complete 3D“, dem Namespace und Schlüssel custom.complete_3d und dem Typ „Einzeiliger Text“.

2. 02

   In jedem Produkt ausfüllen

   Am Ende der Seite jedes Produkts erscheint nun das neue Feld. Tragen Sie dort nur den Code des Stücks ein, also den Teil nach /ar/.

3. 03

   Block im Theme hinzufügen

   Öffnen Sie unter Onlineshop, Themes, Anpassen die Vorlage der Produktseite und fügen Sie im Abschnitt mit den Produktinformationen, nahe der Galerie, einen Block „Benutzerdefiniertes Liquid“ hinzu.

4. 04

   Code des Blocks einfügen

   Fügen Sie den folgenden Code in den Block ein und speichern Sie. Er zeigt den Viewer nur an, wenn das Feld des Produkts ausgefüllt ist.

{% if product.metafields.custom.complete_3d.value != blank %}
  <iframe src="https://www.completemagazine.com.br/ar/{{ product.metafields.custom.complete_3d.value }}" title="Produkt in 3D" width="100%" height="520" frameborder="0" allow="xr-spatial-tracking; fullscreen; camera" style="border:0;border-radius:12px"></iframe>
{% endif %}

Danach bedeutet ein neues Produkt in 3D nur noch: das Stück im Dashboard erzeugen und seinen Code in das Feld des Produkts eintragen, ohne das Theme erneut anzufassen.

Wenn etwas nicht erscheint

Bleibt das Fenster leer, prüfen Sie, ob der Code vollständig eingefügt wurde, einschließlich des Attributs allow, das die Kamera auf dem Smartphone freigibt. Fehlt die Augmented-Reality-Schaltfläche, öffnen Sie die Seite direkt auf dem Smartphone und nicht in der Vorschau des Editors, die diese Berechtigungen nicht immer weitergibt. Erscheint der Block nicht, prüfen Sie, ob das Metafeld genau custom.complete_3d heißt.