Recruiting? Hier starten →

Derselbe Shop, zweite Storefront

Liquid-Theme-Version öffnen

PORTVA läuft auch als selbst gebautes Liquid-Theme auf demselben Shopify-Shop. Shopify-Entwicklungsshops zeigen immer zuerst eine Passwortseite – Passwort einmal einfügen, der Browser merkt es sich.

Shop-Passwortpaucai
PORTVA

Dein Warenkorb

Dein Warenkorb ist leer.

Weiter einkaufen

PORTVA

Fallstudien

Sieben Probleme und warum sie so gelöst wurden

Die ersten drei stammen anonymisiert aus einem echten DTC-Marken-Shop, die übrigen entstanden auf PORTVA. Jeder Fall zeigt, was schwierig war, welche Optionen es gab und was die gewählte kostet.

01 · Live-Shop · Full-Stack

„Passt“ nur dann sagen, wenn die Daten es belegen

Alle Seiten lesen jetzt ein gemeinsames Ergebnis mit drei Zuständen. Datenlücken erscheinen nicht mehr als Versprechen.

Dieser Shop verkauft Teile, die nur zu bestimmten Modellen passen. Jede Seite muss daher eine Frage beantworten: Funktioniert das mit dem, was ich besitze? Ein leeres Feld bedeutete früher „passt überall“, und jeder Seitentyp ermittelte die Antwort selbst.

Ganze Begründung: Hürden, Optionen, Prüfung und Kosten

Was es schwierig machte

  • Viele Passformdaten sind unvollständig, und „unbekannt“ war kein möglicher Wert.
  • Modellseiten, Produktseiten, Größen-Guide und Bundle-Builder brauchen die Antwort.
  • Ein Modell kann in mehreren Konfigurationen vorkommen.
  • Kunden ohne gewähltes Modell müssen trotzdem kaufen können.

Optionen

  • „Passt / passt nicht“ beibehaltenNicht gewählt

    Einfach, aber fehlende Daten wirken weiter wie ein Versprechen und führen zu Retouren und Beschwerden.

  • Jede Seite einzeln anpassenNicht gewählt

    Für eine Seite am schnellsten, aber dasselbe Modell kann je nach Seite verschiedene Antworten erhalten.

  • Ein gemeinsames Ergebnis: passt, bedingt oder unbekanntGewählt

    Seiten zeigen das Ergebnis und raten nie. Ungeprüftes erscheint nie als „passt“, bei bedingten Fällen folgt eine weitere Frage.

Was umgesetzt wurde

  • Ein gemeinsames Ergebnis für Modell-, Produkt-, Guide- und Bundle-Seiten.
  • Bei bedingter Passform folgen ein bis zwei gezielte Rückfragen.
  • Ohne gewähltes Modell bleibt der Einzelkauf möglich, stattdessen wird die Prüfung angeboten.

Wie es geprüft wurde

  • Jedes Release durchlief mehrere Pull-Request-Reviews und Vorschau-Tests an repräsentativen Modellen.
  • Mehrdeutige Datenzeilen gingen an das Operations-Team, statt im Code entschieden zu werden.

Was es kostet

  • Modelle ohne geprüfte Zustände bleiben außen vor, bis ihre Daten fertig sind.
  • Drei Zustände bedeuten in jedem Kaufpfad einen zusätzlichen Fall „wird noch geprüft“.

02 · Live-Shop · Full-Stack

Ein neues Modell, ohne das Theme anzufassen

Ein neues Modell ist jetzt ein Daten-Release, das das Operations-Team über eine interne Shopify-App veröffentlicht und zurückrollt.

Der Shop führt Landingpages Modell für Modell ein. Von Hand hieße das: für jedes Modell eine Theme-Änderung und ein Entwickler, und eine fehlerhafte Datei ginge direkt an die Kunden.

Ganze Begründung: Hürden, Optionen, Prüfung und Kosten

Was es schwierig machte

  • Das Theme wird vom gesamten Live-Shop genutzt, jede Template-Änderung birgt Release-Risiko.
  • Das Operations-Team pflegt die Daten in Tabellen und muss vor dem Livegang sehen, was sich ändert.
  • Der Datenbestand ist zu groß, um ihn sicher von Hand im Shopify-Admin zu bearbeiten.

Optionen

  • Ein Template pro ModellNicht gewählt

    Für die ersten schnell, aber das Theme wächst mit jedem Modell, und jedes braucht ein Release.

  • Direkte Bearbeitung im AdminNicht gewählt

    Kein Entwicklungsaufwand, aber kein Diff, kein Review und kein Weg zurück nach einem Fehler.

  • Datengetriebene Seiten plus versionierte Publishing-AppGewählt

    Metaobjects geben jedem Modell eine Standard-URL. Daten werden hochgeladen, validiert, als Diff geprüft und als neue Version veröffentlicht.

Was umgesetzt wurde

  • Aus Daten gerenderte Modellseiten mit crawlbaren Links und passenden strukturierten Breadcrumbs.
  • Eine Shopify-App mit React Router, Node und Prisma: Upload, Validierung, Diff-Review, Veröffentlichung, Rollback.
  • Große Importe laufen in einem Background-Worker, die Storefront liest die aktuelle Version.

Wie es geprüft wurde

  • Die App ist für die Kompatibilitätsdatenbank des Shops produktiv im Einsatz.
  • Rollback ist Routine: Die Storefront wird auf die vorherige veröffentlichte Version gesetzt.

Was es kostet

  • Die App ist ein weiteres System, das gehostet und gepflegt werden muss.
  • Theme und App teilen einen Datenvertrag, Strukturänderungen betreffen also beide.

03 · Live-Shop · Tracking

Damit sich eine Kampagne hinterher messen lässt

Nachdem eine Kampagne nicht auswertbar war, gehen neue Seiten und Aktionen mit definiertem GA4-Funnel und Bestellzuordnung live.

Eine Promotion ging ohne Events und mit geteilten Rabattcodes live. Danach ließen sich Nutzer und Nichtnutzer nicht vergleichen, und Bestellungen waren ihr nicht verlässlich zuzuordnen.

Ganze Begründung: Hürden, Optionen, Prüfung und Kosten

Was es schwierig machte

  • Vorschau-Links des Teams und Tests am Launch-Tag zählten als echte Besuche.
  • Ein Crawler kann den Traffic eines Tages dominieren und jede Quote verzerren.
  • GA4 reserviert einige Parameternamen für eigene E-Commerce-Daten.
  • Events dürfen keine personenbezogenen Daten enthalten.

Optionen

  • Standardberichte von GA4 und ShopifyNicht gewählt

    Kein Aufwand, aber sie können eine einzelne Funktion oder einen Seiten-Funnel nicht isolieren.

  • Zuordnung über RabattcodesNicht gewählt

    Leicht lesbar, aber geteilte Codes verbreiten sich über die Funktion hinaus und verfälschen das Ergebnis.

  • Funnel vor der Entwicklung planenGewählt

    Impression, Klick, Teilnahme, Warenkorb und Kauf werden vorab definiert, eine Kampagnenmarkierung im Warenkorb dient der Zuordnung.

Was umgesetzt wurde

  • GA4-Funnel-Events auf den Modellseiten und im seitenweiten Modellwähler.
  • Bestellzuordnung über Warenkorb-Attribute, das passende Modell geht in die Warenkorbabbruch-E-Mail ein.
  • Eine Testmarkierung hält Team-Besuche aus den Berichten heraus.

Wie es geprüft wurde

  • Events wurden an echten Berichten geprüft, die Auswertung beginnt am Tag nach dem Launch.
  • Bekannter Crawler-Traffic wird vor jeder Quote ausgeschlossen.

Was es kostet

  • Jede neue Funktion braucht Zeit für Event-Design und Prüfung.
  • Berichte werden erst nach genügend sauberen Tagen aussagekräftig.

04 · PORTVA · Full-Stack

Eine Variante, die nicht im falschen Land verkauft werden darf

Eine Bestellung mit dem falschen Stecker wird im Checkout gestoppt, egal aus welcher Storefront oder über welchen Warenkorb-Link sie kommt.

Den Portva 140 gibt es mit US- oder EU-Stecker. Ein US-Stecker ist in Deutschland nutzlos, die Variante darf dort also nicht verkäuflich sein. Beide Stecker gehören aber zu einem Produkt, einer Seite und einer Variantenauswahl.

Den gesperrten US-Stecker in Deutschland ansehen →

Ganze Begründung: Hürden, Optionen, Prüfung und Kosten

Was es schwierig machte

  • Shopify Markets steuert die Verfügbarkeit pro Produkt, nicht pro Variante.
  • Es gibt zwei Storefronts, Next.js und Liquid, und ein Warenkorb lässt sich auch ohne Oberfläche anlegen.
  • Die deutsche Übersetzung benennt die Option um (Plug → Stecker), der Optionsname taugt also nicht als Schlüssel.
  • Functions sehen den Variantentitel, etwa „Graphite / US“, nicht die gewählten Optionen.

Optionen

  • Ein Produkt pro Stecker, je Markt veröffentlichtNicht gewählt

    Die Verfügbarkeit wäre nativ, aber der Stecker wäre keine Option mehr. Bestand, URLs und Analytics zerfallen nach Markt, und jede neue Farbe bedeutet weitere Produkte.

  • Falschen Stecker nur in der Oberfläche ausblendenNicht gewählt

    Schnell und für die meisten Kunden ausreichend, aber ein geteilter Warenkorb-Link oder die andere Storefront umgeht es.

  • Storefront-Regel plus serverseitige PrüfungGewählt

    Beide Storefronts kennzeichnen den Stecker als hier nicht verkäuflich und wählen ihn nie vor. Eine Cart Validation Function setzt dieselbe Regel in Shopify durch.

Was umgesetzt wurde

  • Jeder Optionswert hat drei Zustände: verfügbar, ausverkauft oder in diesem Markt nicht verkäuflich.
  • Ladegerät-Finder und Quick Add wählen eine Variante, die im aktuellen Markt verkäuflich ist.
  • Im Checkout zählt die Lieferadresse statt des Browsing-Markts, die Fehlermeldung erscheint auf Englisch oder Deutsch.

Wie es geprüft wurde

  • Vier Fixtures laufen durch die kompilierte Function: EU-Stecker nach Deutschland geht durch, US-Stecker nach Deutschland wird blockiert, ein Warenkorb aus dem US-Markt mit Lieferung nach Deutschland wird blockiert, Länder ohne Regel bleiben unberührt.
  • Dabei fiel ein echter Fehler auf: Die Regel brach, als die deutsche Übersetzung die Option umbenannte. Sie prüft jetzt den Stecker-Code.

Was es kostet

  • Die Zuordnung von Land zu Stecker liegt an drei Stellen: Next.js, Liquid und Function. Ein dritter Markt bedeutet drei Änderungen.
  • Die Function liest den Stecker aus dem Variantentitel, umbenannte Optionswerte erfordern also eine passende Änderung.

05 · PORTVA · Front-End

Echtzeit-3D, das den ersten Ladevorgang nicht belastet

PageSpeed Insights konnte die mobile Startseite nicht zu Ende testen. Jetzt erreicht sie 95 Punkte, und das 3D ist noch da.

Die Startseite erzählt ihre Geschichte mit einem WebGL-Modell in Echtzeit. Auf einem Mittelklasse-Smartphone blockierte das den Main Thread sekundenlang, bevor Kunden überhaupt etwas zum Kaufen gesehen hatten.

Den vollständigen Performance-Bericht lesen →

Ganze Begründung: Hürden, Optionen, Prüfung und Kosten

Was es schwierig machte

  • three.js und der Renderer brachten rund 260 KB JavaScript in den ersten Ladevorgang.
  • Eine Schleife, die jeden Frame zeichnet, lässt eine Seite auf Rechnern ohne GPU nie zur Ruhe kommen, und genau so laufen Labortests.
  • Der erste Paint musste trotzdem das Produkt zeigen und zum später geladenen Live-Modell passen.

Optionen

  • 3D durch ein Video ersetzenNicht gewählt

    Leicht und zuverlässig, aber die Interaktion geht verloren, und um die geht es in diesem Abschnitt.

  • 3D behalten und laden, sobald die Seite im Leerlauf istNicht gewählt

    Besserer erster Paint, aber Smartphones laden das Modell auch für Besucher, die die Seite nie berühren, und die Render-Schleife bleibt.

  • Erst das Poster, three.js bei der ersten Interaktion, Zeichnen nur beim ScrollenGewählt

    Das Poster ist ein Render desselben Modells, der Wechsel ist also eine Überblendung. Der Canvas zeichnet nur, wenn sich die Scroll-Timeline bewegt.

Was umgesetzt wurde

  • three.js und das Modell laden beim ersten Scrollen, Tippen oder Bewegen der Maus.
  • Besucher mit reduzierter Bewegung oder ohne WebGL erhalten einen statischen Hero mit demselben Inhalt.
  • Fotos laden gestaffelt und in passender Größe, der Kaufbereich der Produktseite liegt jetzt im vorgerenderten HTML.

Wie es geprüft wurde

  • Mobiles PageSpeed der Startseite: vorher kein Abschluss möglich, nachher 95 (Lauf mit dem mittleren LCP von dreien).
  • Lokales Lighthouse, Median aus drei Läufen: JavaScript 557 → 295 KB, Main-Thread-Arbeit 4.435 → 1.596 ms, Blockierzeit 522 → 55 ms.

Was es kostet

  • Auf dem Smartphone ersetzt das Live-Modell das Poster etwa eine Sekunde nach der ersten Berührung.
  • Künftige Animationen im Ruhezustand müssen ihre Frames selbst anfordern.
  • Auf Produkt- und Kollektionsseiten liegt die PageSpeed-Änderung im Rauschen. Alles sind Labordaten, echter Traffic zur Bestätigung fehlt.

06 · PORTVA · Full-Stack

Ein ehrlicher Preis pro Markt, von der Produktseite bis zum Checkout

Deutsche Kunden sehen denselben festen Euro-Preis inklusive MwSt., in beiden Storefronts und bis in den Checkout.

Deutsche Preise waren eine tägliche Umrechnung aus Dollar. Das ergab Beträge wie 108,95 €, die sich von selbst änderten. Außerdem müssen Preise in Deutschland die MwSt. enthalten.

Den deutschen Preis live ansehen →

Ganze Begründung: Hürden, Optionen, Prüfung und Kosten

Was es schwierig machte

  • Preise werden an vier Stellen getrennt gelesen: Headless-Site, Liquid-Theme, Warenkorb und Checkout-Extension.
  • Produktdaten müssen cachebar bleiben, also muss jede URL genau einem Markt entsprechen.
  • Ein Warenkorb gehört zu einem Käuferland, und manche Positionen sind in einem anderen Land nicht verkäuflich.

Optionen

  • Automatische Umrechnung beibehaltenNicht gewählt

    Kein Pflegeaufwand, aber der Preis ändert sich täglich und ist nie eine Zahl, die eine Marke wählen würde.

  • Einen Warenkorb behalten und das Land ändernNicht gewählt

    Die Preise würden sich aktualisieren, aber eine Position mit US-Stecker käme in einen deutschen Warenkorb.

  • Markt in der URL, eigene Preisliste, ein Warenkorb pro MarktGewählt

    Jede Anfrage kennt ihren Markt, bevor sie Shopify erreicht, deutsche Preise sind bewusst gesetzt, und ein Warenkorb mischt nie Märkte.

Was umgesetzt wurde

  • Deutschland hat einen eigenen Katalog und feste Euro-Preise: Portva 140 129 €, Portva 65 55 €, Link 21 € und 27 €.
  • Jede Storefront-Abfrage läuft mit Land und Sprache der Seite. Warenkörbe werden für dieses Land angelegt und pro Markt gespeichert.
  • Beide Storefronts zeigen je nach Markt „inkl. MwSt., zzgl. Versand“, der deutsche Checkout weist die MwSt. aus.

Wie es geprüft wurde

  • Ein deutscher Test-Checkout deckte einen echten Fehler auf: Die Upsell-Extension fragte Shopify ohne Markt ab und bot das Kabel in Dollar an. Sie fragt jetzt im Land des Käufers und zeigt 21,00 €.
  • Das Setup-Skript ist idempotent, ein erneuter Lauf lässt Katalog und Preise unverändert.

Was es kostet

  • Ein Marktwechsel startet einen anderen Warenkorb, Artikel werden nicht übernommen.
  • Feste Preise muss jemand prüfen, wenn sich Kosten oder Wechselkurse ändern.
  • Die Versandkosten-Anzeige im Warenkorb wiederholt die Schwelle von 70 im Front-End, eine Regeländerung betrifft also beide Stellen.

07 · PORTVA · Full Stack

Verfügbarkeitsalarm, der jedes Lagerereignis genau einmal verarbeitet

Nach einer Nachlieferung aktualisierte der Shopify-Webhook das Abo auf der Live-Seite innerhalb von 6 Sekunden. Gefälschte Anfragen und Mehrfachzustellungen bewirken nichts.

Bei ausverkauften Varianten soll man einen Alarm anfordern können. Bestandsänderungen kommen als Shopify-Webhooks, die wiederholt oder gleichzeitig eintreffen können, und ein öffentlicher Endpunkt lässt sich fälschen.

Das Formular an einer ausverkauften Variante ansehen →

Ganze Begründung: Hürden, Optionen, Prüfung und Kosten

Was es schwierig machte

  • Die Seite läuft auf Vercel und hat keine eigene Datenbank.
  • Shopify erwartet eine schnelle Antwort, und ein Fehler muss wiederholbar bleiben.
  • Als Konzept-Shop soll die Seite für eine Demo keine echten Adressen speichern.

Optionen

  • Verarbeitete Ereignisse im Speicher merkenNicht gewählt

    Serverless-Instanzen teilen keinen Speicher, gleichzeitige Zustellungen und Wiederholungen kommen also durch.

  • Eine Datenbank für diese Funktion ergänzenNicht gewählt

    Das liefert eine Eindeutigkeitsprüfung, aber auch ein weiteres Konto und Betriebsaufwand für zwei kleine Datenarten.

  • Abos in Metaobjects speichern, Ereignis-ID als eindeutiges HandleGewählt

    Shopify erzwingt eindeutige Handles, sodass von zwei gleichzeitigen Zustellungen nur eine es anlegen kann, ohne zusätzliche Infrastruktur.

Was umgesetzt wurde

  • Ausverkaufte Varianten zeigen ein Alarmformular. Wiederholte Eingaben für dieselbe Variante und Adresse bleiben ein Datensatz, gespeichert wird nur eine maskierte Adresse.
  • Die Route prüft das HMAC über den Rohinhalt, beansprucht das Ereignis und aktualisiert dann die wartenden Abos.
  • Bei einem Fehler gibt sie den Anspruch frei und antwortet mit 500, sodass Shopifys Wiederholung nur noch wartende Abos verarbeitet.

Wie es geprüft wurde

  • Falsche Signatur und veränderter Inhalt ergeben beide 401.
  • Ein Ereignis, zweimal gleichzeitig zugestellt und einmal wiederholt, erzeugt einen einzigen Ereignisdatensatz.
  • Eine ausverkaufte Live-Variante um 1 erhöht: Der echte Webhook setzte das Abo innerhalb von 6 Sekunden auf benachrichtigt. Der Bestand wurde danach auf 0 zurückgesetzt.

Was es kostet

  • Es wird keine echte E-Mail versendet. Dafür braucht es einen Mail-Dienst, vollständige Adressen und eine Abmeldung.
  • Pro Ereignis werden höchstens 50 Abos verarbeitet.
  • Ereignisdatensätze werden nicht bereinigt und sammeln sich an.

Zur Einordnung

Bei den Live-Shop-Fällen fehlen Marke, interne Daten und Zahlen. PORTVA ist ein Konzept-Shop mit Test-Checkout und ohne echten Traffic, seine Ergebnisse stammen daher aus Testläufen und Labormessungen. Der Quellcode bleibt privat, jedes Detail lässt sich aber im Gespräch durchgehen.