Zurück zum Portfolio
Die Startseite von ePantry: eine rostrote Leiste mit E-Mail-Adresse und Social-Media-Symbolen, das ePantry-Logo, ein Produktsuchfeld, Links zu Best Sellers, New Arrivals, Offers und Coupons und Symbole für Ton, Sprache, Merkliste, Warenkorb und Konto, dazu eine Reihe Kategorien von Flour bis Rice, die über den rechten Rand hinausläuft; darunter das Label „Kerkini, Serres“, die Überschrift „Food with a name and a place“ mit der zweiten Hälfte in Rostrot, eine kurze Einleitung, ein gefüllter Button „Browse all products“ und ein umrandeter „Meet the producers“ sowie Kennzahlen: 132 Produkte im Regal, kostenlose Lieferung ab 30,00 € und Lieferung in 1–3 Tagen, neben einer Fläche mit drei Produkten: einer Ketchupflasche, einem Glas Tsatsibeli-Sauce und einer Senfflasche; weiter unten beginnt die Überschrift „What are you after?“.
epantry.gr in neuem Tab öffnen

ePantry — Griechischer Lebensmittelshop, von WooCommerce auf Laravel neu gebaut

Überblick

ePantry verkauft Lebensmittel mit Namen und Herkunft: Hülsenfrüchte, Pasta, Mehl, Kräuter, Saucen und Honig von einem Dutzend Höfen und Manufakturen in Nordgriechenland, versandt aus Kerkini. Der alte Shop lief auf WordPress und WooCommerce. Er wurde durch eine von Grund auf neu gestaltete Laravel-12-Storefront ersetzt, die seit dem 8. September 2026 online ist. Katalog, Kategorien, redaktionelle Inhalte, Bestellhistorie und Shop-Einstellungen wurden aus der WooCommerce-Datenbank übernommen, sodass nichts verloren ging, worauf sich Kundschaft und Shop verlassen hatten.

Das Design orientiert sich an einem Vorratsregal. Die Produktfotos sind freigestellte Packshots auf Weiß, deshalb bleibt die Oberfläche darunter ruhig: weißer Grund, ein durchgehendes Haarlinienraster statt schwebender Karten, eine einzige Akzentfarbe. Jede Produktkarte, Produktseite und Warenkorbzeile trägt ein Regaletikett mit Nettogewicht, Preis pro Kilo oder Liter, Erzeuger und Region. Die Erzeuger haben eigene Seiten, der alte Blog lebt als Journal mit Rezepten und Vorratsratgebern weiter, und der Shop nimmt Nachnahme oder Überweisung auf eine von drei Banken an, damit die Kundschaft ohne Überweisungsgebühr zahlen kann.

Herausforderungen

Ein Neubau muss alles behalten, was bereits funktioniert: 238 Produkte mit Fotos, Kategorien und Lagereinstellungen, den Blog, die Bestellhistorie und jede über die Jahre feinjustierte Einstellung, lückenlos aus WooCommerce übernommen. Manche alten Daten hätten den neuen Shop beschädigt, wenn man sie wörtlich übernommen hätte — Produkte ohne Bestandszählung, Entwürfe, eine Regel für niedrigen Bestand, die den ganzen Katalog markiert hätte. Und ein Lebensmittelladen hat eigene Regeln: Vorverpackte Ware, die nach Gewicht verkauft wird, muss ihren Kilopreis zeigen, griechische Großbuchstaben verlieren ihre Akzente, und das Terrakotta der Marke ist mit 3,96:1 auf Weiß zu hell, um Text zu tragen.

Lösungen

Importbefehle lesen die WooCommerce-Datenbank direkt und bilden sie auf das neue Schema ab — Produkte, Kategorien, Erzeuger, Bilder, Beiträge, Bestellungen und Einstellungen, jeweils mit ihrer alten ID zur Nachverfolgung — und übersetzen die Eigenheiten des alten Shops, statt sie zu kopieren: Nicht gezählter Bestand bleibt kaufbar, Entwürfe bleiben Entwürfe, die Schwelle für niedrigen Bestand bleibt bei zwei. Das Regaletikett setzt den Grundpreis neben jeden Verkaufspreis, wie es das griechische Recht verlangt. Ein dunklerer Ton der Markenfarbe trägt allen Text, und Griechisch wird in normaler Schreibung erfasst und per CSS in Großbuchstaben gesetzt, damit die Akzente korrekt entfallen, was ein Test absichert. Die Bewegung besteht aus einer GSAP-Sequenz und zurückhaltenden Scroll-Einblendungen, und der optionale Ton startet nie ohne eine Geste. Produkt-, Erzeuger- und Rezeptseiten tragen strukturierte Daten, und die llms.txt des Shops wird aus der Datenbank erzeugt, sodass die dort genannte Schwelle für kostenlosen Versand nicht mehr veralten kann.

Galerie

  • Die Startseite von ePantry: eine rostrote Leiste mit E-Mail-Adresse und Social-Media-Symbolen, das ePantry-Logo, ein Produktsuchfeld, Links zu Best Sellers, New Arrivals, Offers und Coupons und Symbole für Ton, Sprache, Merkliste, Warenkorb und Konto, dazu eine Reihe Kategorien von Flour bis Rice, die über den rechten Rand hinausläuft; darunter das Label „Kerkini, Serres“, die Überschrift „Food with a name and a place“ mit der zweiten Hälfte in Rostrot, eine kurze Einleitung, ein gefüllter Button „Browse all products“ und ein umrandeter „Meet the producers“ sowie Kennzahlen: 132 Produkte im Regal, kostenlose Lieferung ab 30,00 € und Lieferung in 1–3 Tagen, neben einer Fläche mit drei Produkten: einer Ketchupflasche, einem Glas Tsatsibeli-Sauce und einer Senfflasche; weiter unten beginnt die Überschrift „What are you after?“.

    Startseite — Was der Laden verkauft, woher es kommt und wie schnell es ankommt

  • Die Startseite auf einem Tablet: die rostrote Leiste, ein Header mit Menü-Button, Logo und Symbolen für Ton, Sprache, Merkliste, Warenkorb und Konto, dann die Fläche mit den drei Produkten über die ganze Breite, das Label „Kerkini, Serres“, die Überschrift in einer Zeile, die Einleitung, die beiden Buttons und die drei Kennzahlen; darunter die Überschrift „What are you after?“ mit dem Link „All products“ und ein Raster aus Kategorien mit feinen Linien, jede mit ihrer Produktzahl: Flour 5, Eggs 4, Organic 27, Herbs & Teas 2, Pasta 26, Mushrooms 19, Honey 2, Pulses 27, In the Jar 6.

    Kategorien auf dem Tablet — Jedes Regal mit der Zahl seiner Produkte

  • Die Startseite auf einem Smartphone: die rostrote Leiste mit der E-Mail-Adresse, ein Header mit Menü-Button, Logo und Symbolen für Ton, Warenkorb und Konto, dann die drei Produkte in einer kleineren Fläche, das Label „Kerkini, Serres“, die Überschrift auf zwei Zeilen, die Einleitung, die Buttons „Browse all products“ und „Meet the producers“ untereinander und die drei Kennzahlen nebeneinander.

    Hero auf dem Smartphone — Zuerst die Produkte, dann das Versprechen und zwei Wege in den Laden