FREN

E-commerce & refonte2026

La Source Vivanbois

Aperçu du projet La Source Vivanbois

Une boutique WooCommerce branchée sur l’ERP du négoce, puis entièrement redessinée : un comptoir clair, où l’on trouve la bonne référence et où l’on achète au bon conditionnement.

Contexte

La Source est le négoce de Vivanbois, une entreprise de construction et de rénovation énergétique installée à Jazennes, en Charente-Maritime. Sa gamme vient des chantiers de ses propres équipes : bois, panneaux, isolants biosourcés, quincaillerie, outillage. Le site s’adresse aux particuliers comme aux artisans, et tout le catalogue arrive de l’ERP du négoce, avec des libellés en majuscules et des articles vendus à la pièce, à la boîte ou au paquet.

Ce que j’ai fait

J’ai d’abord mis la boutique en ligne et branché son catalogue sur l’ERP, avec un import automatique, des garde-fous et les règles de livraison d’un négoce. Puis j’ai repris tout le front : une direction artistique sur fond blanc, un design system complet et chaque page refaite, de l’accueil au compte client, sur la même base WooCommerce et sans changer une seule adresse du catalogue.

Points clés

  • 11×moins de JavaScript par page : de 396 Ko à 35 Ko
  • 7 importspar jour depuis l’ERP, avec garde-fous
  • ≈ 3 900articles, vendus à la pièce, à la boîte ou au m²

Étude de cas détaillée

Du dépôt de Jazennes au panier, étape par étape.

  1. 01Le négoce

    Un négoce de chantier

    Vivanbois est une entreprise de construction et de rénovation énergétique. La Source est son négoce : un dépôt à Jazennes où particuliers, artisans, entreprises et collectivités viennent chercher du bois, des panneaux, des isolants biosourcés, de la quincaillerie et de l’outillage.

    La gamme vient des chantiers des équipes : ce qu’elles utilisent, le négoce le vend. Le site devait garder cette crédibilité de comptoir, où l’on parle de dimensions, de conditionnements et de délais.

    Accueil de La Source : le titre « Des matériaux éprouvés sur nos propres chantiers », une photo de matériaux et la carte du produit du mois.
    L’accueil : la promesse du négoce, et un produit du mois qu’on ajoute au panier sans quitter la page.

  2. 02Le point de départ

    Garder ce qui marchait

    La première version tenait la route, mais elle avait vieilli : un en-tête en deux blocs, un grand visuel promotionnel en tête d’accueil, et un thème qui chargeait Bootstrap, Swiper, GSAP et des polices externes sur chaque page.

    J’ai d’abord listé ce qui ne devait pas bouger. Le jaune du logo, qui fait la marque. Les adresses des produits et des rayons, pour ne rien perdre sur Google. L’import depuis l’ERP, les comptes clients, les commandes et toutes les règles de livraison.

    Ancienne page d’accueil : un en-tête jaune, un bouton Produits et un grand visuel promotionnel.Nouvelle page d’accueil : bandeau d’information, en-tête jaune avec la recherche, rayons, grand titre en gras et photo de matériaux.
    L’accueil, avant et après : la même marque et le même catalogue, présentés autrement.

  3. 03Le catalogue

    Un catalogue qui vient de l’ERP

    Les articles, les prix et les stocks sont saisis dans l’ERP du négoce, qui dépose ses exports sur un serveur FTP. Une passerelle les range dans un stockage objet, et la boutique vérifie sept fois par jour s’il y a un nouvel export pour mettre à jour ses quelque 3 900 articles.

    Un import automatique doit savoir dire non. Si un export arrive anormalement court, la boutique ne supprime plus rien et me prévient. Un verrou empêche deux imports de tourner en même temps, ce qui avait créé des doublons.

    À l’affichage, les libellés de l’ERP sont remis en forme : « MATERIAUX DE CONSTRUCTION » devient « Matériaux de construction », et les rayons se lisent enfin.

    Le rayon Matériaux de construction : le titre, les sous-rayons en pastilles avec leur nombre de produits, les filtres à gauche et la grille de produits.
    Un rayon : les sous-rayons en pastilles, les filtres à gauche, les produits à droite.

  4. 04Direction artistique

    Un comptoir, sur fond blanc

    J’ai présenté la direction en maquettes, de l’accueil à la fiche produit. Le client l’a validée avec une demande : un fond blanc plutôt que crème. Le crème reste pour les aplats et pour le fond des photos produits.

    Les photos des fournisseurs ont presque toujours un fond blanc. Posées sur ce fond couleur bois clair, elles se fondent dans la carte au lieu de flotter dans des cadres blancs.

    Deux cartes produits : la photo sur fond bois clair, le rayon et le stock, le nom, les dimensions et la référence en étiquettes, le prix TTC à l’unité de vente, la quantité et le bouton Ajouter jaune.

  5. 05Typographie

    Une police, trois rôles

    J’avais d’abord associé trois polices : une serif pour les titres, une grotesque pour l’interface, une chasse fixe pour les chiffres. Après les premières présentations, le client a voulu quelque chose de plus sobre. Schibsted Grotesk, la police de l’interface, porte désormais tout le site, avec des titres en gras.

    Les références, les dimensions et les prix au m² gardent des chiffres alignés, tous de la même hauteur, comme sur un bon de commande. Chaque page ne charge plus qu’un fichier de police de 46 Ko, hébergé par le site et préchargé : le texte s’affiche tout de suite dans la bonne police.

    Planche typographique en Schibsted Grotesk : « Des matériaux éprouvés » en gras, un nom de produit, puis une référence, des dimensions et un prix au m² en chiffres alignés.

  6. 06Couleur

    Le jaune de la marque, à sa place

    Le jaune vient du logo. Il tient l’en-tête, le bandeau de devis et les boutons d’achat : dans la page, il signale presque toujours une action.

    Un vert forêt très sombre porte le bandeau d’information et le pied de page. Le reste est blanc, avec un bois clair pour les aplats et le fond des photos.

    • Jaune La Source#FFE500l’en-tête et les boutons d’achat
    • Vert forêt#17221Cle bandeau et le pied de page
    • Bois clair#F1ECE2le fond des photos produits

  7. 07La fiche produit

    Acheter au bon conditionnement

    Un isolant se vend au paquet, une cheville à la boîte de 25, un adhésif au rouleau. Chaque prix affiche donc son unité de vente réelle, en TTC puis en HT, avec le prix au m² ou au m³ quand il aide à comparer.

    Pour les isolants, un calculateur traduit une surface en nombre de paquets et reporte la quantité dans le panier. Sous le bouton, la surface couverte se met à jour à chaque clic. Un produit en rupture ou sans prix propose un devis à la place.

    Fiche d’un panneau de laine de bois : la photo, le prix au paquet et au m², le stock, le calculateur de quantité et le bouton jaune d’ajout au panier.
    La fiche d’un isolant : prix au paquet et au m², calculateur de quantité, ajout au panier.
    La même fiche produit sur téléphone.

  8. 08Le panier

    Livraison, retrait ou devis

    Un négoce ne livre pas une palette comme un colis. Le panier applique les règles du dépôt : colis GLS à 20 € TTC jusqu’à 20 kg en France métropolitaine, tarif de transport propre à un produit ou à un rayon, retrait gratuit au dépôt.

    Quand aucun de ces cas ne s’applique, la commande devient une demande de devis : pas de paiement en ligne, le négoce chiffre la livraison et rappelle le client.

    Partout ailleurs, l’ajout au panier se fait sans quitter la page, avec une confirmation et un mini-panier qui s’ouvre sur le côté.

    Le panier : les lignes produits avec leur unité de vente, puis un récapitulatif avec le choix entre livraison sur devis et retrait au dépôt.
    Le panier sur téléphone.

  9. 09Sous le capot

    Plus léger, et plus sûr

    La boutique tourne toujours sur WordPress et WooCommerce : le négoce garde son back-office et ses habitudes. J’ai reconstruit tout le thème autour d’un design system, et retiré ce qui ne servait plus.

    • Le JavaScript chargé sur chaque page passe de 396 Ko à 35 Ko. Le scanner de code-barres (88 Ko) ne se charge qu’au moment où on l’utilise.
    • La feuille de style passe de 577 Ko à 190 Ko : Bootstrap, Swiper et GSAP sont retirés.
    • Les résultats de la recherche instantanée sont échappés avant affichage, et le code source du thème n’est plus publié en ligne.
    • Toutes les adresses des produits et des rayons restent les mêmes.

  10. 10Le résultat

    Un comptoir ouvert en ligne

    De l’accueil à la confirmation de commande, chaque page parle la même langue, jusqu’au compte client et à la page 404. Le méga-menu ouvre les douze rayons et leurs sous-rayons, et la recherche propose des produits dès la deuxième lettre, ou à partir d’un code-barres scanné avec le téléphone.

    Le méga-menu : les douze rayons à gauche, leurs sous-rayons au centre et un encart pour demander un devis.
    La recherche instantanée : les panneaux de laine de bois trouvés, avec référence, dimensions et prix TTC.
    La commande : les coordonnées sur deux colonnes et le récapitulatif de la commande à droite.
    Mon compte : la connexion et la création de compte côte à côte.
    L’accueil sur téléphone.
    Le menu sur téléphone, avec les rayons dépliés.

Réalisations

Autres projets

Contact

Écrivez-moi.

Un projet dans le même esprit ?

Décrivez-moi votre activité et ce que vous attendez du site. Je vous réponds avec des questions et une première estimation.

bonjour@kma.studio
Me contacter