La Boutique de l'Espérance

Refaire l'expérience d'une boutique en ligne sans changer de thème, sans toucher au catalogue et sans jamais la mettre hors ligne. C'est la mission que j'ai menée de juin à septembre 2026 pour La Boutique de l'Espérance : une refonte graphique et UX complète, du slider d'accueil jusqu'au tunnel de commande, sur un site qui a continué d'encaisser de vraies commandes tout du long.

Contexte

La Boutique de l'Espérance est une entreprise familiale catholique installée à Bélâbre, dans l'Indre. Depuis 2017, elle vend en boutique et en ligne des objets de piété : chapelets, statues, icônes, médailles, livres, et des cadeaux pour les grands moments de la vie chrétienne, du baptême à l'ordination.

Le site tournait sous PrestaShop 1.7 avec Warehouse, un thème premium épaulé d'une dizaine de modules (Elementor, Mega Menu, Slider Revolution, avis clients…), hérité de plusieurs migrations successives. Au fil du temps, tout s'était empilé :

• une identité visuelle éclatée entre les bleus du thème, du brun, du gris et de l'orange ;
• une page d'accueil encore remplie de contenu de démonstration ;
• des textes en anglais oubliés sur le parcours d'achat ;
• des liens morts dans le menu ;
• un mobile quasiment illisible.

L'objectif : appliquer la charte de la boutique (céladon, anthracite, vert, crème) sur tout le parcours, rendre l'accueil clair et commercial, soigner le mobile, et laisser à la fondatrice un site qu'elle peut faire vivre seule.

Approche

Une page d'accueil qui vend

J'ai repensé l'accueil comme une vitrine qui guide : header pleine largeur avec un menu en capitales sur une seule ligne, slider en image pure, grille de huit catégories, carrousel des nouveautés, puis une section « Offrir pour une occasion » dont les sept tuiles suivent l'ordre liturgique, du baptême à l'ordination. Viennent ensuite la réassurance, la newsletter et une présentation de la maison, avant un footer compact.

Le slider Revolution a laissé place au slider natif de PrestaShop. Moins spectaculaire, mais la fondatrice peut désormais changer une diapositive en deux clics, avec une image dédiée pour le mobile afin que le texte reste lisible sur un petit écran.

Dans le détail : logo recolorisé en anthracite, étiquettes produits harmonisées (pastilles arrondies, même police, mêmes verts partout), et version anglaise de l'accueil et du menu réalignée sur la version française.

Le mobile : un seul réglage, tout le site corrigé

Sur mobile, tout était minuscule : fil d'Ariane à 8 px, prix difficiles à lire, panier pénible. Plutôt que de corriger chaque élément un par un, je suis remonté à la source. Le Theme Editor fixait la taille de police de base à 10 px sur mobile, et tout le thème était construit en unités relatives. En la passant à 13 px, le fil d'Ariane, les prix, la disponibilité, le panier et la commande sont redevenus lisibles d'un seul coup.

Le reste a suivi : header garanti sur une ligne jusqu'à 320 px de large, menu mobile avec fond d'occultation, bandeau cookies lisible, sections raccourcies, filtres sur deux colonnes, et des images de carrousel qui refusaient de se charger remises d'aplomb.

Un parcours d'achat cohérent

Les listes produits ont gagné des titres plus grands, des filtres en colonne avec leurs compteurs, un tri et une pagination explicites. La fiche produit a été recadrée : photo mieux cadrée, barre d'achat fixe avec rappel du prix, sélecteur de quantité refait, badge de disponibilité harmonisé, doublons supprimés. Le panier et la modale d'ajout ont gagné en lisibilité et en confort tactile.

Conformité et traductions

Le bandeau cookies propose désormais un vrai bouton « Refuser », et Google Tag Manager ne se charge qu'après consentement. Les dernières chaînes anglaises du parcours ont été traduites proprement dans le thème enfant, sans toucher au cœur de PrestaShop.

Travailler sur un site vivant

Toute la mission s'est faite en allers-retours courts avec la fondatrice : elle annotait des captures d'écran, je répondais point par point, et chaque demande était vérifiée en production après livraison. Pour les changements structurants, je validais d'abord une maquette HTML autonome avant de la reproduire dans Elementor.

Deux audits ont rythmé le projet : un audit UI/UX complet début juillet (32 points priorisés), puis un audit mobile externe en septembre, traité point par point.

Chaque correction a été vérifiée par des mesures réelles dans un navigateur automatisé (largeurs, hauteurs, tailles de police, contrastes) sur six largeurs d'écran, de 320 à 1920 px, avec un vrai user-agent mobile : le thème sert un HTML différent aux téléphones, et un simple redimensionnement de fenêtre aurait menti.

Sous le capot

Mon principe tout au long du projet : changer les réglages là où ils vivent plutôt que d'empiler du CSS par-dessus, et retirer les surcharges devenues inutiles. Sur un thème premium où chaque réglage existe à trois endroits (base de données, configuration JSON, CSS compilé), c'est ce qui évite qu'un simple clic sur « Enregistrer » efface des semaines de travail.

Concrètement :

• Elementor piloté par script : lecture et écriture du JSON des pages, transformations en JavaScript (réordonnancement, traduction widget par widget, synchronisation FR/EN).
• Configuration du thème versionnée : un JSON de référence de 526 clés, réimporté pour régénérer le CSS et garder la base synchronisée avec les sources.
• Thème enfant : surcharges de templates pour le slider, le bandeau cookies, le tag GTM, les tris et les fiches produit.
• Automatisation : formulaires du back-office pilotés par Playwright, jusqu'aux 34 libellés du menu anglais ; recolorisation du logo et composition des diapositives en Python.
• Nettoyage : doublons de catégories supprimés avec réassociation des produits, liens morts détectés en comparant les menus FR et EN.

Résultat

Un site cohérent de l'accueil à la confirmation de commande, et des gains mesurables :

• Police mobile : de 10 px à 13 px en base, fil d'Ariane de 8 à 12 px, titres de listes de 11 à 14 px.
• Header à 320 px : de 124 px sur deux lignes à 64 px sur une seule.
• Footer desktop : de 393 px à 308 px de haut.
• Accueil mobile : 475 px de moins à faire défiler.
• Zéro lien mort dans les menus français et anglais, zéro chaîne anglaise sur le parcours d'achat français.
• Consentement effectif : aucun script de mesure chargé avant acceptation.

Surtout, la fondatrice est autonome : textes, images, catégories et diapositives se modifient depuis le back-office, avec quelques règles simples (formats d'images, rechargement forcé du navigateur). La boutique n'a plus besoin de moi pour vivre, et c'est exactement ce que je voulais lui laisser.

Stack : PrestaShop 1.7, Warehouse et thème enfant, IQIT Elementor, Theme Editor et Mega Menu, Smarty, XLIFF, Google Tag Manager, Swiper, GSAP, Python, Playwright.