So fügst du interaktive 3D- und AR-Produkte auf einer Shopify-Website hinzu

Vectary Web-Embed ist eine einfache Möglichkeit, ein interaktives 3D-Element auf deiner Website oder deinem Blog einzubinden. Vectary 3D/AR-Viewer funktioniert, indem du einen generierten Code kopierst und in den Web-Editor einfügst. Es ist derselbe Vorgang wie das Einbetten eines YouTube-Videos. Diese Technologie wird als WebAR bezeichnet, da sie ein 3D- und Augmented-Reality-Erlebnis auf jedem Smartphone, iPhone oder Android-Gerät ermöglicht – ganz ohne zusätzliche App.

Wie passe ich mein Produkt auf Shopify an?

Der Shopify 3D-Produktkonfigurator Maker lässt dich interaktive Produktpräsentationen mit Material-Switchern, Formvariationen, Animationen und Hotspots erstellen. So kannst du deine Produktpalette in einem Echtzeit-3D-Viewer präsentieren, ohne mehrere Renderings oder Fotos zu benötigen. Zudem kannst du dein Produktangebot sofort aktualisieren, ohne den Code des Konfigurators auf deiner Website anzupassen. Ein Bonus is, dass alle Varianten in Augmented Reality in ihrer tatsächlichen Größe in der Vorschau angezeigt werden können, sodass  Besucher das Produkt vor dem Kauf im eigenen Raum ausprobieren können. All das lässt sich ganz ohne Code im Vectary Studio umsetzen.

Verbinde den Shopify-Produktkonfigurator mit dem Checkout

Ein 3D-Konfigurator kann in einen Preiskalkulator umgewandelt werden, der auf den im 3D-Viewer ausgewählten Parametern basiert. So kannst du den Preis und die ausgewählten Varianten mit dem Checkout verbinden. Dies lässt sich über eine Ebene der Vectary API über dem No-Code-3D-Konfigurator realisieren.

So bettest du einen interaktiven 3D-Konfigurator ein

Jeder Designer kann den Konfigurator als Showcase einbetten, da die Vectary-Plattform über einen No-Code-Konfigurator-Editor verfügt. Wenn du den Konfigurator mit deinem Warenkorb verbinden möchtest, musst du die Vectary API implementieren, was eventuell die Unterstützung eines Entwicklers erfordert.

1. Basis-Level: Nur eine 3D-Konfigurator-Einbettung in Shopify

1. Importiere dein 3D-Modell in das Vectary Studio oder erstelle dein eigenes Modell von Grund auf.

2. Erstelle einen interaktiven 3D-Konfigurator. Viele Ressourcen dazu findest du auf unserem YouTube-Kanal.

3. Klicke auf den Share-Tab, aktiviere das Teilen und kopiere den Code.

4. Öffne deinen Admin-Bereich in Shopify und klicke im Menü „Sales channels“ auf „Themes“.

5. Gehe zu deinem Theme und klicke auf den Customize -Button.

5. Klicke in deinem Template auf „Add Section“ und wähle „Custom Liquid“. Füge nun den Code von Vectary ein, und der 3D-Viewer sollte geladen werden.

6. Sieh dir die Vorschau deiner Website an und veröffentliche sie, wenn du mit dem Ergebnis zufrieden bist.

7. Du kannst den Konfigurator jederzeit im Vectary Studio anpassen und die Änderungen mit nur einem Klick im Share-Bereich synchronisieren.

2. Fortgeschrittenen-Level: Shopify-3D-Konfigurator verbunden mit einem Preiskalkulator und Warenkorb

Diese Funktion ist nur für Vectary Business-Kunden über die API verfügbar. Detaillierte Anweisungen findest du in der API-Dokumentation.

Tipp: Aktiviere die Augmented-Reality-Vorschau in deinem Shopify

Der eingebettete Viewer erhält automatisch ein AR-Icon, das eine Augmented Reality Vorschau des Produkts auf jedem Gerät ohne App-Installation auslösen kann.

FAQ‍

Verlangsamt es die Website?

Alle Inhalte, die du der Website hinzufügst, müssen optimiert werden, einschließlich des 3D-Viewers. Tipps zur Optimierung findest du in Dokumentation. Um mehr über alle Lösungen für Business-Kunden und Teams zu erfahren, kontaktiere unser Sales-Team.

Wo wird das Modell gehostet?

Das Modell wird auf der Vectary-Plattform gehostet, aber die Subdomain kann mit einer „Custom Domain“-Funktion maskiert werden, die in Business-Workspaces verfügbar ist.