Construire le site d’un vélociste sous PrestaShop, c’est arbitrer entre deux extrêmes. D’un côté, les thèmes du marketplace officiel sont rapides à installer mais visuellement génériques, lourds en JavaScript et difficiles à faire évoluer une fois en production. De l’autre, partir de zéro coûte des semaines et fragilise les mises à jour PrestaShop futures. Le thème velolandtheme a été conçu comme un compromis efficace : un thème enfant de classic (le thème officiel de PrestaShop 9), entièrement repensé sur la base de Tailwind CSS et d’une architecture BEM, mais qui hérite des templates et hooks natifs pour ne pas rompre la compatibilité.
Côté client : l’expérience visiteur
Le visiteur arrive sur une home structurée autour de l’identité du magasin : un hero plein écran sur une photo de l’atelier ou d’un vélo emblématique, un bloc « Atelier · Essai · Financement » qui rappelle la dimension physique du commerce, un flux Instagram pour la preuve sociale et un bloc d’avis Google synchronisés en temps réel. Aucun slider générique de promo, aucune section vide « product collection » comme on voit sur les thèmes d’étagère.
Le parcours d’achat est calibré pour les spécificités du vélo : guide des tailles sur les fiches produit, demande d’essai conditionnée au stock magasin réel, marquage Bicycode ajouté automatiquement au panier sur les catégories vélos neufs, page contact avec itinéraires détaillés depuis le bord de mer et les pistes cyclables agglomération. Les pages tunnel de commande (panier, livraison, paiement, confirmation) ont été retravaillées pour réduire le nombre de clics et clarifier les frais à chaque étape.
L’identité visuelle suit la charte du magasin (vert Veloland, accents verts pour les CTA), avec une typographie soignée : Akrobat pour les titres, Source Sans Pro pour le corps de texte. La cohérence est maintenue sur l’ensemble du parcours, y compris dans les modules tiers (Payline, Marketing 360) dont les templates ont été surchargés un à un pour respecter le design system.
Côté technique
Le thème est un enfant de classic avec parent: classic déclaré dans config/theme.yml. Toutes les overrides sont rangées dans le dossier templates/ en miroir de la hiérarchie native, ce qui rend la maintenance prédictible et compatible avec les futures versions de PrestaShop 9.
Le pipeline CSS s’appuie sur Tailwind CSS configuré avec un design system maison : palette de couleurs Veloland (primary, accent, dark, muted, border), tailles typographiques harmoniques, espacements verticaux normalisés. Les classes utilitaires Tailwind sont combinées à une convention BEM pour les composants métier (vlproduct__, vlblog__, vlcart__, etc.), ce qui permet de styler des blocs récurrents sans dépendre de la cascade ni du !important. Une safelist Tailwind dédiée garantit que les classes BEM générées dynamiquement par Smarty ne sont pas purgées au build.
Côté performance, plusieurs optimisations sont intégrées au thème pour atteindre le score PSI 98 sur la home :
- Toutes les images sont servies en WebP ou AVIF avec fallback JPEG via un override de
Link::getImageLink()centralisé dans le module socle Veloland - Les fonts (Akrobat, Source Sans Pro) sont auto-hébergées et préchargées avec
font-display: swap - Le JavaScript front est limité au strict nécessaire (~30 Ko gzippé), sans dépendance lourde comme jQuery UI ou Slick
- Le lazy load natif (
loading="lazy") est appliqué à toutes les images hors above-the-fold, complété par unefetchpriority="high"sur l’image hero
Les pages customer (compte, commandes, adresses) et le checkout sont surchargés via le mécanisme d’override standard de PrestaShop, avec une refonte UI complète tout en conservant la logique métier native. Cela permet de bénéficier des mises à jour de sécurité PS9 sur le tunnel de commande sans avoir à rejouer le design à chaque release.
Pourquoi un thème sur mesure pour un vélociste
Un magasin de vélos ne vend pas le même produit qu’un revendeur d’accessoires informatiques ou de prêt-à-porter. Le panier moyen est élevé (entre 800 € et 12 000 €), le cycle de décision est long (essai en magasin, prise de mesures, financement), et la relation client se prolonge au-delà de la vente (entretien, SAV, marquage antivol). Un thème générique ne capture aucune de ces spécificités, et pousse au contraire vers un parcours type pure player qui ne convertit pas un visiteur cherchant un conseil expert.
Le thème velolandtheme transforme PrestaShop en outil métier dédié au cycle, en exposant au bon endroit du parcours les arguments qui décident vraiment un acheteur : présence physique, atelier visible, communauté Instagram, avis Google, guide des tailles, demande d’essai. Le tout sans renoncer aux mises à jour PrestaShop et sans empiler des plugins tiers qui dégradent la performance.
