Ausgangssituation
ESN und More Nutrition gehören zu den bekanntesten Supplement-Marken in Deutschland. Beide Shops liefen bereits auf Shopify — allerdings auf einem historisch gewachsenen Liquid-Codebase, der über die Jahre immer schwerer wartbar und skalierbar geworden war.
Das zentrale Problem: Jede Woche gab es ein neues Angebot. Und jedes dieser Angebote veränderte nicht nur Preise, sondern die gesamte Darstellung der Webseite — von Bannern über Produktkarten bis hin zum Checkout. Die bestehende Codebasis war auf diese Dynamik nicht ausgelegt. Jede Angebotsänderung bedeutete manuellen Aufwand, fehleranfällige Anpassungen und ein wachsendes Risiko für Bugs in der Live-Umgebung.
Die Herausforderung
Drei Kernprobleme mussten parallel gelöst werden:
1. Ein nicht skalierbares Frontend
Das bestehende Liquid-System war über Jahre organisch gewachsen. Templates waren tief verschachtelt, Logiken dupliziert, und Änderungen an einer Stelle führten regelmäßig zu unerwarteten Seiteneffekten an anderer Stelle. Für ein Unternehmen mit dem Umsatzvolumen von ESN ist das ein erhebliches Geschäftsrisiko.
2. Wöchentlich wechselnde Angebotslogiken
Die Marketing-Strategie von ESN und More Nutrition basiert auf wöchentlichen Angeboten. Das klingt simpel — ist es aber nicht. Ein Angebot bei ESN bedeutet:
- Dynamische Strikethrough-Preise auf jeder Produktkarte und jeder Produktdetailseite
- Automatische Discount-Berechnung die sich von der PDP über den Warenkorb bis in den Checkout durchzieht
- Kostenlose Geschenke ab bestimmten Warenkorbwerten
- Free-Shipping-Schwellen die sich pro Angebot ändern können
- Banner und visuelle Anpassungen auf der gesamten Seite
All das musste zuverlässig funktionieren, einfach vom Marketing-Team steuerbar sein und keine Entwickler-Intervention bei jedem Angebotswechsel erfordern.
3. Checkout 1.0 zu 2.0 Migration
Shopify hatte die Deprecation von Checkout 1.0 angekündigt. Das Problem: Der ESN-Checkout war über Jahre hinweg stark customized worden. Jede dieser Anpassungen musste identifiziert, bewertet und in das neue Checkout-Extensibility-Framework portiert werden — ohne dass Kunden im Live-Betrieb etwas davon merken.
Die Lösung
Neues Liquid-Architektur-System
Das bestehende Frontend wurde grundlegend umstrukturiert. Statt das System komplett auf eine JavaScript-basierte Architektur umzustellen — was bei der Größe der Shops und der Abhängigkeit vom Shopify-Ökosystem ein zu großes Risiko gewesen wäre — wurde ein neues, modulares Liquid-System aufgebaut.
Der Fokus lag auf klarer Trennung von Verantwortlichkeiten: Angebotslogik, Preisdarstellung und Layout wurden entkoppelt, sodass Änderungen an einem Bereich keine Seiteneffekte in anderen Bereichen erzeugen. Das Ergebnis ist ein System, das weiterhin auf Liquid basiert, aber deutlich wartbarer und skalierbarer ist.
Angebotssteuerung über Shopify Functions und Metafields
Die wöchentlichen Angebote werden heute über eine Kombination aus Shopify Functions und Metafields gesteuert. Das Marketing-Team kann Angebote konfigurieren, ohne den Code anfassen zu müssen. Die Logik greift automatisch:
- Metafields definieren die Angebotsparameter (Rabatte, Schwellenwerte, Geschenke)
- Shopify Functions berechnen die Discounts serverseitig
- Das Frontend liest die Metafields und passt Darstellung dynamisch an
Das System zieht sich konsistent durch alle Touchpoints: Produktseite, Collection-Seiten, Warenkorb und Checkout zeigen immer die korrekten Preise — ohne manuelle Synchronisation.
Custom Back-in-Stock App
Ein besonders interessanter Use Case war die Entwicklung einer eigenen Back-in-Stock-Benachrichtigungs-App. Die Standard-Lösung von Klaviyo erfüllte die Anforderungen nicht, weil der Lagerbestand bei ESN nicht in Echtzeit über Shopify synchronisiert wird. Das ERP-System synct den Stock in Batches — und die Standard-App hätte Benachrichtigungen genau dann ausgelöst, wenn der Sync läuft, nicht wenn das Produkt tatsächlich verfügbar ist.
Die Lösung: Eine Remix-basierte Shopify App, die sich direkt mit Klaviyo verbindet. Das Content-Team kann steuern, wann Back-in-Stock-E-Mails versendet werden — unabhängig vom ERP-Sync-Zeitpunkt. Ein kleines Feature mit großer Wirkung: Die Öffnungsraten der Benachrichtigungen stiegen deutlich, weil sie zu einem Zeitpunkt versendet werden, an dem die Empfänger auch tatsächlich kaufen können.
Checkout 2.0 Migration
Die Migration des Checkouts war eines der aufwändigsten Teilprojekte. Der alte Checkout 1.0 war über Jahre hinweg angepasst worden — Custom-Felder, angepasste Validierungen, spezielle Darstellungen für Geschenke und Rabatte. Jedes dieser Elemente musste im neuen Checkout-Extensibility-Framework neu implementiert werden.
Der Vorteil des neuen Systems: Es ist zukunftssicher, performanter und lässt sich über Shopify-native APIs erweitern, statt auf fragile Template-Overrides zu setzen.
Ergebnis
Nach 12 Monaten intensiver Zusammenarbeit in einem vierköpfigen Entwicklerteam verfügen ESN und More Nutrition über ein grundlegend modernisiertes Shopify-Setup:
- Ein wartbares, modulares Liquid-Frontend, das wöchentliche Angebotswechsel ohne Entwickler-Eingriffe ermöglicht
- Eine robuste Angebotslogik, die sich konsistent von der Produktseite bis in den Checkout durchzieht
- Eine Custom Back-in-Stock-App, die dem Content-Team volle Kontrolle über den Versandzeitpunkt gibt
- Einen migrierten Checkout 2.0, der zukunftssicher und erweiterbar ist
Die Zusammenarbeit zeigt, wie auch auf einer etablierten Plattform wie Shopify hochkomplexe E-Commerce-Anforderungen umgesetzt werden können — wenn man bereit ist, über Standard-Lösungen hinauszudenken.
