Virtuelle Anprobe mit Shopify: die Produktseite gezielt anbinden

Mit einer Produktvorlage beginnen

Wähle eine kleine Kollektion mit verlässlichen Bildern und einer klaren visuellen Frage, etwa dem Vergleich verschiedener Jackenfarben. Benenne die Verantwortlichen für Theme, Produktdaten und Freigabe. Arbeite zunächst in einer Theme-Vorschau und halte fest, wie sich die Änderung zurücknehmen lässt. Der Dienst stellt derzeit ein JavaScript-Snippet für einen separat gehosteten Vorschaudialog bereit. Eine offiziell veröffentlichte Shopify-App oder ein WooCommerce-Plugin wird dafür nicht angeboten. Ob die Anbindung funktioniert und wie lange sie dauert, hängt vom konkreten Theme und dessen Anpassungen ab.

Den Einbauort mit der Theme-Betreuung festlegen

Shopify beschreibt App-Blöcke und App-Einbettungsblöcke. Daraus folgt jedoch nicht, dass dieses Snippet eine installierbare App ist. Lass einen geeigneten Einbauort nahe der Produktauswahl bestimmen. Entscheide anhand der mobilen Produktseite, ob ein eingebundener oder schwebender Button passt. Prüfe Konflikte mit feststehenden Kaufleisten, Einwilligungsfenstern und dem Kundenchat. Dokumentiere alle betroffenen Vorlagen. Eine funktionierende Hauptproduktseite belegt noch nicht, dass eine Schnellansicht in einer Kollektion oder eine individuell entwickelte Storefront ebenfalls korrekt angebunden ist.

Die übergebenen Daten eindeutig definieren

Übergib mit data-product-image eine direkte, öffentlich erreichbare HTTPS-Bildadresse. Ergänze data-product-name für den ausgewählten Artikelnamen, data-category für die Vorschaukategorie, data-product-url für den Kauflink und data-locale für en, de, fr, es, it oder pt. Der Kauflink dient dem Rückweg zum Shop; er löst kein automatisches Auslesen der Produktseite aus. Setze ihn ausdrücklich, obwohl das Widget sonst die aktuelle Seitenadresse verwendet. API-Schlüssel und private Kundendaten gehören weder in diese Attribute noch in URL-Parameter.

Das Shopify-Variantenobjekt enthält Bild und Variantenadresse. Prüfe die daraus erzeugten vollständigen URLs. Fehlt ein Variantenbild, braucht es ein geprüftes, gleichwertiges Ersatzbild oder einen Ausschluss aus dem Pilot. Eine andere Farbe stillschweigend einzusetzen würde den Vergleich verfälschen.

Variantenwechsel vor dem Öffnen verarbeiten

Die Storefront muss Bild, Name, Kategorie und Kauflink am Script-Element aktualisieren, sobald sich die gewählte Variante ändert. Das aktuelle Widget liest diese Produktattribute bei jedem Öffnen neu. Es beobachtet die Shopify-Auswahl jedoch nicht selbst und gleicht einen bereits geöffneten Dialog nicht automatisch ab. Verbinde die Aktualisierung mit dem tatsächlichen Auswahlablauf des Themes. Der Button darf erst eine Vorschau anbieten, wenn alle Felder dieselbe Auswahl beschreiben. Nur die Daten beim ersten Seitenaufruf einzusetzen genügt bei Farbvarianten nicht.

Sprache und Buttonbeschriftungen werden beim Initialisieren festgelegt. Ein später geändertes data-locale ändert diese Widget-Instanz nicht. Prüfe deshalb den Sprachwechsel des Shops und plane gegebenenfalls einen neuen Seitenaufruf oder eine sauber neu erstellte Einbindung. Wiederholtes Einfügen von Scripts ohne Bereinigung kann zusätzliche Buttons und Dialoge hinterlassen.

Den vollständigen Einkaufsweg abnehmen

Öffne Variante A, schließe die Vorschau, wähle B und öffne erneut. Kontrolliere Bild, Namen und Rücklink gemeinsam. Wiederhole das nach einem direkten Variantenlink, einer nicht verfügbaren Kombination und dem Neuladen eines Theme-Abschnitts. Prüfe Tastaturbedienung, Fokus nach dem Schließen, Scrollen und ein kleines Smartphone. Die Sicherheitskonfiguration muss den Vorschaurahmen und die Bildabrufe zulassen. Eine generierte Darstellung belegt weder körperliche Passform noch exakte Farbe oder Warenbestand. Größenangaben, Produktdetails und die üblichen Kaufmöglichkeiten müssen erreichbar bleiben.

Verantwortung für den begrenzten Pilot festhalten

Protokolliere freigegebene Produkte, Vorlagen, Sprachen und Geräte sowie offene Fehler und die Abschaltmöglichkeit. Prüfe Abruffehler und Nutzungslimits vor einer größeren Ausspielung; ein öffentlicher Test bedeutet keine reservierte Händlerkapazität. Lege fest, welche Produktänderungen eine erneute Prüfung auslösen. Vergleiche Käufe und Deckungsbeitrag mit einer vergleichbaren berechtigten Gruppe, einschließlich Personen ohne Vorschauinteraktion. Diese Messung ist nicht automatisch im Snippet enthalten und höhere Umsätze sind nicht garantiert. Die zuständigen Teams müssen Datenverarbeitung und Hinweise eigenständig prüfen; der Einbau ist kein Nachweis rechtlicher Konformität.