La Source Vivanbois

01The merchant

A builder’s merchant

Vivanbois is a construction and energy-renovation company. La Source is its trade counter: a depot in Jazennes where private customers, tradespeople, companies and local authorities come for timber, boards, bio-based insulation, hardware and tools.

The range comes from the teams’ own sites: what they use, the counter sells. The website had to keep that trade-counter credibility, where people talk dimensions, pack sizes and lead times.

02Starting point

Keep what worked

The first version held up, but it had aged: a two-block header, a large promotional banner at the top of the home page, and a theme that loaded Bootstrap, Swiper, GSAP and external fonts on every page.

First, I listed what must not change. The logo’s yellow, which is the brand. Product and category addresses, so nothing is lost on Google. The ERP import, customer accounts, orders and every delivery rule.

03The catalogue

A catalogue that comes from the ERP

Items, prices and stock levels are entered in the merchant’s ERP, which drops its exports on an FTP server. A gateway files them in object storage, and the store checks seven times a day for a new export to update its 3,900 or so items.

An automatic import has to be able to say no. If an export arrives abnormally short, the store no longer deletes anything and alerts me. A lock stops two imports from running at once, which had created duplicates.

On screen, the ERP labels are reformatted: “MATERIAUX DE CONSTRUCTION” becomes “Matériaux de construction”, and the categories finally read well.

06Colour

The brand yellow, where it belongs

The yellow comes from the logo. It holds the header, the quote band and the buy buttons: on the page, it nearly always signals an action.

A very dark forest green carries the information bar and the footer. The rest is white, with a light timber tone for flat areas and behind photos.

07Product page

Buying in the right pack size

Insulation sells by the pack, wall plugs by the box of 25, tape by the roll. So every price shows its real sales unit, including VAT then excluding VAT, with the price per m² or per m³ when it helps compare.

For insulation, a calculator turns an area into a number of packs and puts that quantity in the basket. Under the button, the area covered updates with every click. A product out of stock or without a price offers a quote instead.

08The basket

Delivery, collection or quote

A merchant does not ship a pallet like a parcel. The basket applies the depot’s rules: GLS parcels at €20 including VAT up to 20 kg in mainland France, a transport rate set per product or per category, free collection at the depot.

When none of these applies, the order becomes a quote request: no online payment, the merchant prices the delivery and calls the customer back.

Everywhere else, adding to the basket happens without leaving the page, with a confirmation and a mini basket that slides in from the side.

09Under the hood

Lighter, and safer

The store still runs on WordPress and WooCommerce: the merchant keeps its back office and its habits. I rebuilt the whole theme around a design system, and removed what was no longer used.

• The JavaScript loaded on every page drops from 396 KB to 35 KB. The barcode scanner (88 KB) only loads when someone uses it.
• The stylesheet drops from 577 KB to 190 KB: Bootstrap, Swiper and GSAP are gone.
• Instant search results are escaped before display, and the theme’s source code is no longer published online.
• Every product and category address stays the same.

10The result

A trade counter, open online

From the home page to the order confirmation, every page speaks the same language, down to the customer account and the 404 page. The mega menu opens the twelve categories and their sub-categories, and search suggests products from the second letter typed, or from a barcode scanned with a phone.