Die virtuelle Anprobe von Brillen in einen Shopify-Shop integrieren

Ein Shop kann das Plugin installiert haben, über 3D-Modelle verfügen und einen funktionierenden Anprobe-Button anbieten, ohne dass die Integration bereits auf seinen Katalog abgestimmt ist. Die bei der Anprobe angezeigte Fassung kann eine andere Glasbreite haben als die im Shop gewählte Variante; die bei der Anprobe gewählte Farbe kommt womöglich nicht im Warenkorb an; eine neue Kollektion kann bei der Zuordnung fehlen. Die Qualität der Integration zeigt sich im Zusammenspiel von Artikeldaten, digitalen Assets und Theme-Verhalten über den gesamten Lebenszyklus der Artikel.

Für Brillenhändler ergänzt die virtuelle Anprobe den Katalog um eine Darstellung, die eindeutig zum verkauften Artikel gehören muss. Shopify verwaltet die zum Verkauf angebotene Variante, ihre Daten und den Bestellablauf. Der VTO-Dienst verwaltet die digitale Darstellung und deren Nutzung. Um beide Bereiche zu verbinden, braucht es klare Regeln für Zuordnungen, Verfügbarkeit, Auswahl und Aktualisierungen. Mit einem kompatiblen Theme zeigt Shopify bereits 3D-Modelle in den Produktmedien an;¹ bei der hier behandelten Integration geht es um etwas anderes: die Anprobe im Gesicht und die dauerhaft gepflegte Verknüpfung zwischen der zum Verkauf angebotenen Variante und dem freigegebenen Asset.

Verkaufskatalog und 3D-Katalog haben unterschiedliche Zustände

Eine Variante kann im Shop veröffentlicht sein, ohne dass bereits ein freigegebenes 3D-Modell vorliegt. Ebenso kann ihr Asset fertig sein, während sie vorübergehend nicht bestellbar ist. Diese Zustände sind nicht gleichbedeutend.

Im Datenmodell von Shopify besitzt eine Variante eine Kennung, Optionen und Angaben zur Verfügbarkeit; die Bestandsrichtlinie kann den Verkauf bei fehlendem Lagerbestand erlauben oder verhindern.² Eine vorhandene 3D-Darstellung beantwortet keine dieser Verkaufsfragen.

Der Shop muss daher festlegen, wann die Anprobe angezeigt wird. Ist eine Variante bestellbar, aber das Asset fehlt, funktioniert die Produktseite weiterhin mit ihren üblichen Inhalten. Ist das Asset fertig, der Artikel aber nicht bestellbar, kann er gegebenenfalls weiterhin sichtbar bleiben, sofern klar erkennbar ist, dass er nicht bestellt werden kann. Die Entscheidung hängt vom Sortiment und von der Aufgabe der Seite ab: aktueller Verkauf, Vorschau oder Archiv.

Die Abdeckung der Anprobe ist als Schnittmenge aus verkaufsrelevanten Artikeln und tatsächlich nutzbaren digitalen Varianten zu verstehen. Eine Liste gelieferter Dateien und eine Liste bestellbarer Artikel beschreiben zwei unterschiedliche Voraussetzungen. Die veröffentlichte Funktion muss beide erfüllen.

SKU und Varianten-ID erfüllen unterschiedliche Aufgaben

Im Austausch mit einem Lieferanten oder einer gemeinsam genutzten Library lässt sich über SKUs und Barcodes nach dem passenden Artikel suchen. Innerhalb von Shopify bezeichnet die Varianten-ID dagegen das Objekt, mit dem der Shop und die Warenkorbfunktionen arbeiten.

Jede Variante hat ihren eigenen Code: Darauf beruht die Zuordnung zum 3D-Modell.

Shopify unterscheidet ausdrücklich zwischen SKUs und Barcodes und empfiehlt eindeutige SKUs für Varianten. Die Dokumentation weist darauf hin, dass doppelte Codes bei Integrationen mit Diensten Dritter Probleme verursachen können.³ Für Händler mit mehreren Marken ist auch die Bedeutung des Codes wichtig: Eine vom Shop vergebene interne SKU kann von der Referenz abweichen, mit der der Hersteller dieselbe Fassung kennzeichnet.

Die Zuordnung erfordert eine stabile Beziehung zwischen diesen Referenzen. Eine Korrektur des Titels auf der Produktseite sollte die Identität der Variante nicht verändern; eine geänderte SKU kann dagegen einen Prozess beeinträchtigen, der genau diesen Code zur Suche nach dem Asset nutzt. Wird ein Artikel gelöscht und neu angelegt, müssen Verknüpfungen auf Grundlage der Shop-Kennungen unter Umständen neu aufgebaut werden.

Das ARShades-Plugin sucht anhand von SKU, EAN oder UPC nach einer Entsprechung, ohne die Zuordnung aus dem Artikelnamen oder dem Artikelbild abzuleiten. Die Synchronisierung erstellt Verknüpfungen zu den in der Library verfügbaren Modellen und speichert sie im ARShades-Katalog, der dem Shop zugeordnet ist.⁴

Die Prüfung muss bis zur physischen Variante reichen. Ein formal gültiger Code kann mit der falschen Farbe oder einer anderen Glasbreite verknüpft sein. Deshalb ergänzen sich Datenprüfung und Sichtprüfung: Die erste prüft die Verknüpfung, die zweite das, was der Kunde tatsächlich sieht.

Die Auswahl muss bis zum Warenkorb übereinstimmen

Auf einer Produktseite kann ein Kunde eine Farbe wählen, bevor er das Virtual Try-On öffnet, sie während der Anprobe ändern und anschließend zur Bestellung übergehen. Im Projekt muss festgelegt werden, wie diese Änderungen weitergegeben werden.

Öffnet sich das VTO mit einer voreingestellten Variante, muss die Seite deutlich machen, wie diese mit der im Shop gewählten Variante zusammenhängt. Lässt sich während der Anprobe eine andere Variante wählen, kann die Rückkehr zur Produktseite deren Auswahl aktualisieren oder einen weiteren ausdrücklichen Schritt erfordern. Zwei abweichende Auswahlen dürfen nicht ohne Hinweis bestehen bleiben.

Laut der Dokumentation des Shopify-Warenkorbs wird zum Hinzufügen eines Artikels dessen Varianten-ID verwendet.⁵ Eine visuell korrekte Anprobe kann daher trotzdem zu einem fehlerhaften Kaufablauf führen, wenn das Bedienelement für den Kauf die vorherige Kennung beibehält. Das zuletzt betrachtete Bild und der hinzugefügte Artikel müssen sich derselben Variante zuordnen lassen.

Ein sinnvoller Testfall beginnt mit einer Fassung in mehreren Farben und mindestens zwei Glasbreiten. Sie rufen die Seite über einen Link auf, der eine Variante vorauswählt, ändern die Auswahl während der Anprobe und prüfen anschließend Name, Preis, Verfügbarkeit und Warenkorbposition. Shopify dokumentiert Direktlinks zu Varianten über den Parameter ?variant=; ohne diesen Parameter öffnet das Theme die ausgewählte oder die erste verfügbare Variante, wodurch sich das Prüfergebnis ändert.⁶ Das erforderliche Ergebnis hängt von den Funktionen ab, die in der Integration tatsächlich aktiviert sind; lässt sich ein Artikel direkt im VTO in den Warenkorb legen, ist dieselbe Prüfung nötig.

Dasselbe Prinzip gilt für komplexere optische Konfigurationen. Die Anprobe der Fassung und die Konfiguration des Korrektionsglases können in getrennten Systemen stattfinden. Die angezeigte Darstellung muss deutlich machen, auf welche Kombination sie sich bezieht. Die Prüfung der vorgesehenen Verkaufsoptionen bleibt dem Bestellablauf überlassen.

Das Theme bestimmt, wo und wie die Funktion eingebunden ist

Shopifys Theme-App-Erweiterungen unterscheiden zwischen App-Blöcken, die sich in kompatiblen Abschnitten platzieren lassen, und App-Einbettungen, die auch für überlagerte Elemente und seitenübergreifende Komponenten genutzt werden. Einbettungen müssen im Theme aktiviert werden; das Hinzufügen eines Blocks und das Aktivieren der zugehörigen Integrationsebene können getrennte Schritte sein.⁷

Diese Struktur verringert den Bedarf an direkten Änderungen der Theme-Dateien. Die Umsetzung hängt jedoch weiterhin von mehreren Faktoren ab: dem verwendeten Template, der Position des Blocks, der Logik der Variantenauswahl und dynamischen Seitenaktualisierungen. Ein Shop kann für Kategorien oder Marken unterschiedliche Templates verwenden. Eine im Haupttemplate veröffentlichte Änderung erreicht dann möglicherweise nicht alle betroffenen Produktseiten.

Auch das Verhalten in Komponenten, die nur einen Teil der Seite aktualisieren, muss geprüft werden, etwa in manchen Produktschnellansichten. Das Theme kann beim Variantenwechsel ein Auswahlfeld oder einen Button ersetzen; die Integration muss weiterhin den richtigen Zustand auslesen, ohne Bedienelemente zu duplizieren oder Referenzen auf den vorherigen Artikel beizubehalten.

Ein Test mit einem unveröffentlichten Theme hilft, diese Punkte zu prüfen. Vor der Veröffentlichung müssen anschließend die tatsächlich genutzte Domain, die zugewiesenen Templates und die Bedingungen für die Aktivierung der Skripte geprüft werden. Bei einem Headless-Shop oder einem stark angepassten Ablauf muss die Integration außerdem anhand der eigenen Architektur bewertet werden, zusätzlich zur angegebenen Kompatibilität mit Standard-Themes.

Die Abdeckung hängt davon ab, welche Artikel Aufmerksamkeit erhalten

Die Aussage, dass die virtuelle Anprobe für hundert Varianten verfügbar ist, zeigt noch nicht, welcher Anteil des Einkaufserlebnisses abgedeckt wird. Diese hundert Varianten können die gefragtesten Artikel oder einen wenig beachteten Teil des Sortiments umfassen. Auch die Zahl der Fassungen muss berücksichtigt werden: Für die Abonnementgrenze zählen verknüpfte Varianten, nicht Artikel. Hundert Varianten können also zwanzig Fassungen in jeweils fünf Farben sein.⁴

Für eine aussagekräftige Analyse sollten Sie den Anteil der abgedeckten Varianten vom Anteil der Besuche auf Produktseiten mit Anprobe unterscheiden. Für die zweite Kennzahl werden Besuchsdaten des Shops benötigt; sie lässt sich nicht aus der Anzahl digitaler Modelle ableiten. Beide Anteile können stark voneinander abweichen, besonders wenn eine Kampagne Besuche auf wenige Artikel konzentriert.

Bei der Auswahl der ersten Fassungen sollten deshalb Verkaufsrelevanz, Vielfalt und Asset-Verfügbarkeit gemeinsam berücksichtigt werden. Ein Sortiment aus Modellen, die sich leicht darstellen lassen, kann für eine erste technische Prüfung geeignet sein, sagt aber wenig über die Qualität des Dienstes für den gesamten Katalog aus. Transluzente Acetate, dünne Metalle und unterschiedliche Gläser stellen verschiedene Eigenschaften der Darstellung auf die Probe.

Die Abdeckung muss auch im Zeitverlauf neu bewertet werden. Veröffentlicht der Shop eine neue Kollektion, ohne die Zuordnungen abzuschließen, kann die absolute Zahl der VTO-Modelle gleich bleiben, während der Anteil der Besuche mit verfügbarer Anprobe sinkt. Die Katalogüberwachung muss mit Kampagnen und Neuzugängen Schritt halten.

Die Synchronisierung gehört zur Artikelverwaltung

Der Katalog verändert sich auch nach dem Start: neue Codes, entfernte Artikel, zusätzliche Varianten, korrigierte digitale Modelle. Jede Änderung kann eine andere Seite der Verknüpfung betreffen.

Die ARShades-Dokumentation sieht vor, die Synchronisierung zu wiederholen, wenn Artikel hinzukommen, SKUs oder Barcodes geändert werden oder neue Modelle verfügbar werden. Die Verknüpfung erfolgt im ARShades-Katalog und verändert die Shopify-Artikel nicht.⁴ Die Synchronisierung sollte daher als Aufgabe im Sortimentszyklus mit klarer Zuständigkeit behandelt werden.

Die Verfügbarkeit des Dienstes hängt außerdem vom Plattformzugang ab: von der Lizenz, der freigegebenen Domain und dem Umfang der aktiven Varianten. Ein Artikel kann korrekt zugeordnet sein und über ein verfügbares Asset verfügen, während ein Problem auf einer dieser Ebenen das Öffnen der Anprobe verhindert. Die Prüfung sollte unterscheiden, ob das Problem die Lizenz, die freigegebene Domain oder den Umfang der aktiven Varianten betrifft, da jeweils andere Maßnahmen nötig sind.

Ein tragfähiger Prozess verknüpft die Veröffentlichung neuer Artikel mit einer Prüfung der Abdeckung: Welche Varianten sind zugeordnet, welche warten auf die Erstellung ihres Assets und welche sollen ohne Anprobe weiterhin sichtbar bleiben? Wird eine Fassung aus dem Sortiment genommen, ist eine vergleichbare Entscheidung nötig: Was bleibt sichtbar, und welche Links sind noch im Umlauf?

Den Dienst im Kaufablauf bewerten

Zur Zuverlässigkeit der Integration gehört auch das Verhalten für Kunden, die das VTO nicht nutzen. Skripte und Assets sollten weder das Betrachten der Produktseite noch die Auswahl von Optionen oder einen regulären Kauf beeinträchtigen. Die Shopify-Dokumentation zu Theme-App-Erweiterungen empfiehlt, Skripte nur auf den Seiten zu laden, auf denen sie gebraucht werden.⁷ Die Anforderungen von Built for Shopify legen einen Grenzwert fest: Eine App darf den Lighthouse-Wert des Shops um höchstens zehn Punkte senken, und im Theme ergänzte Elemente müssen mit Theme-App-Erweiterungen erstellt werden.⁸ Diesen Maßstab kann ein Händler von jedem Lieferanten verlangen. Die Belastung beim ersten Laden und die zusätzliche Belastung beim Öffnen der Anprobe sollten getrennt bewertet werden.

Für Kunden, die die Anprobe starten, zählt, ob die richtige Variante geladen wird und die Auswahl bei der Rückkehr in den Shop weiterhin übereinstimmt. Für E-Commerce-Verantwortliche kommen diese Prüfungen vor der Bewertung möglicher Verkaufseffekte: Eine höhere Conversion-Rate bei Kunden, die sich für eine Anprobe entscheiden, belegt allein noch keinen kausalen Beitrag der Funktion. Darauf gehen wir im Artikel über das Pilotprojekt näher ein.

Die Integration wird zuverlässig, wenn der Shop sie auch bei eigenen Veränderungen konsistent halten kann. Der Erfolgsmaßstab umfasst daher den ersten Start ebenso wie die Arbeit der folgenden Wochen: eine neue Variante verknüpfen, einen Code korrigieren, ein aktualisiertes Theme veröffentlichen und dem Kunden weiterhin die Brille zeigen, die er bestellen kann.

Quellen

1. Shopify Help Center, Produktmedien: 3D-Modelle. ↩

2. Shopify Developer Documentation, Liquid-Objekt variant: Kennung, Verfügbarkeit und Bestandsrichtlinie. ↩

3. Shopify Help Center, Bestände mit SKUs verwalten. ↩

4. Knowledge Base ARShades, New synchronisation und Catalogue synchronisation. ↩ ↩² ↩³

5. Shopify Developer Documentation, Referenz zur Cart API. ↩

6. Shopify Developer Documentation, Produktpräsentation, Varianten, Abschnitt zu Direktlinks auf Varianten. ↩

7. Shopify Developer Documentation, Theme-App-Erweiterungen konfigurieren, Abschnitte App-Blöcke, App-Einbettungsblöcke und Performance. ↩ ↩²

8. Shopify Developer Documentation, Built for Shopify-Anforderungen, 2.2.1 Auswirkungen auf die Shop-Geschwindigkeit minimieren und 3.2.1. ↩