Retour au portfolio
La page d'accueil d'ePantry : une barre couleur rouille avec l'adresse e-mail et des icônes de réseaux sociaux, le logo ePantry, un champ de recherche de produits, des liens Best Sellers, New Arrivals, Offers et Coupons et des icônes pour le son, la langue, les favoris, le panier et le compte, puis une rangée de catégories de Flour à Rice qui déborde du bord droit ; en dessous, l'étiquette « Kerkini, Serres », le titre « Food with a name and a place » dont la seconde moitié est couleur rouille, une courte introduction, un bouton plein « Browse all products » et un bouton détouré « Meet the producers », et des chiffres : 132 produits en rayon, livraison gratuite dès 30,00 € et livraison en 1 à 3 jours, à côté d'un encart de trois produits : une bouteille de ketchup, un bocal de sauce tsatsibeli et une bouteille de moutarde ; le titre « What are you after? » commence plus bas.
Ouvrir epantry.gr dans un nouvel onglet

ePantry — Épicerie Grecque en Ligne, Reconstruite de WooCommerce vers Laravel

Aperçu

ePantry vend des aliments qui ont un nom et une origine : légumineuses, pâtes, farines, herbes, sauces et miel d'une douzaine de fermes et d'ateliers du nord de la Grèce, expédiés depuis Kerkini. L'ancienne boutique tournait sous WordPress et WooCommerce. Elle a été remplacée par une vitrine Laravel 12 conçue de zéro, en ligne depuis le 8 septembre 2026, avec le catalogue, les catégories, les contenus éditoriaux, l'historique des commandes et les réglages de la boutique migrés depuis la base WooCommerce, afin que rien de ce sur quoi comptaient les clients et la boutique ne soit perdu.

Le design s'inspire d'une étagère de garde-manger. Les photos des produits sont des packshots détourés sur fond blanc, l'interface reste donc discrète sous eux : un fond blanc, une trame continue de filets fins au lieu de cartes flottantes, une seule couleur d'accent. Chaque fiche, page produit et ligne de panier porte une étiquette de rayon avec le poids net, le prix au kilo ou au litre, le producteur et la région. Les producteurs ont leurs propres pages, l'ancien blog continue sous forme de journal de recettes et de guides du garde-manger, et la boutique accepte le paiement à la livraison ou le virement vers l'une de trois banques, pour que les clients puissent payer sans frais de virement.

Défis

Une reconstruction doit conserver tout ce qui fonctionne déjà : 238 produits avec leurs photos, leurs catégories et leurs réglages de stock, le blog, l'historique des commandes et chaque réglage affiné au fil des ans, repris de WooCommerce sans rupture. Certaines anciennes données auraient cassé la nouvelle boutique si elles avaient été copiées telles quelles — des produits vendus sans suivi de stock, des brouillons, une règle de stock bas qui aurait signalé tout le catalogue. Et une épicerie a ses propres règles : les denrées préemballées vendues au poids doivent afficher leur prix au kilo, les majuscules grecques perdent leurs accents, et la terre cuite de la marque, à 3,96:1 sur blanc, est trop claire pour porter du texte.

Solutions

Des commandes d'import lisent directement la base WooCommerce et la transposent dans le nouveau schéma — produits, catégories, producteurs, images, articles, commandes et réglages, chacun avec son ancien identifiant pour la traçabilité — et traduisent les particularités de l'ancienne boutique plutôt que de les copier : le stock non suivi reste achetable, les brouillons restent des brouillons, le seuil de stock bas reste à deux. L'étiquette de rayon place le prix unitaire à côté de chaque prix de vente, comme l'exige la loi grecque. Une teinte plus foncée de la couleur de marque porte tout le texte, et le grec est saisi en minuscules et mis en majuscules par CSS pour que les accents tombent correctement, ce qu'un test vérifie. Le mouvement se résume à une séquence GSAP et à de discrètes apparitions au défilement, et le son optionnel ne démarre jamais sans un geste. Les pages produits, producteurs et recettes portent des données structurées, et le llms.txt de la boutique est généré depuis la base, si bien que le seuil de livraison gratuite qu'il annonce ne peut plus devenir obsolète.

Galerie

  • La page d'accueil d'ePantry : une barre couleur rouille avec l'adresse e-mail et des icônes de réseaux sociaux, le logo ePantry, un champ de recherche de produits, des liens Best Sellers, New Arrivals, Offers et Coupons et des icônes pour le son, la langue, les favoris, le panier et le compte, puis une rangée de catégories de Flour à Rice qui déborde du bord droit ; en dessous, l'étiquette « Kerkini, Serres », le titre « Food with a name and a place » dont la seconde moitié est couleur rouille, une courte introduction, un bouton plein « Browse all products » et un bouton détouré « Meet the producers », et des chiffres : 132 produits en rayon, livraison gratuite dès 30,00 € et livraison en 1 à 3 jours, à côté d'un encart de trois produits : une bouteille de ketchup, un bocal de sauce tsatsibeli et une bouteille de moutarde ; le titre « What are you after? » commence plus bas.

    Accueil — Ce que vend la boutique, d'où cela vient et en combien de temps cela arrive

  • La page d'accueil sur tablette : la barre couleur rouille, un en-tête avec un bouton de menu, le logo et des icônes pour le son, la langue, les favoris, le panier et le compte, puis l'encart des trois produits sur toute la largeur, l'étiquette « Kerkini, Serres », le titre sur une ligne, l'introduction, les deux boutons et les trois chiffres ; en dessous, le titre « What are you after? » avec un lien « All products » et une grille de catégories à filets fins, chacune avec son nombre de produits : Flour 5, Eggs 4, Organic 27, Herbs & Teas 2, Pasta 26, Mushrooms 19, Honey 2, Pulses 27, In the Jar 6.

    Catégories sur tablette — Chaque rayon affiché avec son nombre de produits

  • La page d'accueil sur téléphone : la barre couleur rouille avec l'adresse e-mail, un en-tête avec un bouton de menu, le logo et des icônes pour le son, le panier et le compte, puis les trois produits dans un encart plus petit, l'étiquette « Kerkini, Serres », le titre sur deux lignes, l'introduction, les boutons « Browse all products » et « Meet the producers » empilés et les trois chiffres alignés.

    Bannière sur mobile — Les produits d'abord, puis la promesse et deux chemins vers la boutique