Ces quatre derniers mois, nous avons reconstruit une grande partie de la boutique Culture Shock Club. Au total, plus de 500 000 lignes modifiées entre ajouts, suppressions et refactorisations. Résultat : un site plus rapide, un parcours d'achat plus clair et des comptes clients plus utiles.
Faits clés
- Quatre mois de reconstruction de la boutique : plus de 500,000 lignes modifiées entre ajouts, suppressions et refactors.
- Chaque partie a été mise en ligne dès qu'elle était prête, puis peaufinée, pas un seul relancement unique.
- Les pages clés scorent 95 or higher aux tests Lighthouse sur mobile et desktop.
- Axes : premier écran plus rapide, structure d'accueil plus claire, ajout rapide et recherche, pages produit, historique de commandes consultable.
Nous n'avons pas tout gardé pour un grand relancement. Chaque partie a été mise en ligne dès qu'elle était prête, puis affinée.
Un premier écran plus rapide
L'ancienne page d'accueil chargeait un carrousel de produits avant d'afficher sa première vue complète. Il fallait donc charger tout de suite les images produit, les variantes, les prix, les disponibilités et le code du carrousel.
La nouvelle page d'accueil charge d'abord son image d'ouverture. Les rayons produits, les recommandations, les outils d'analyse et de consentement se chargent plus tard, ou seulement si nécessaire.
Nous avons aussi allégé le travail initial lié aux polices, au CSS et aux scripts. Les ressources sont mieux mises en cache et les actions du panier ne rechargent plus des données sans rapport avec la page.
Les pages clés obtiennent désormais 95 ou plus dans nos tests Lighthouse, sur mobile comme sur ordinateur. Elles deviennent aussi utilisables plus vite, restent plus stables pendant la navigation et demandent moins de calcul aux appareils mobiles.
Une page d'accueil mieux structurée
L'ancienne page d'accueil reposait surtout sur un seul flux de produits. Dans la nouvelle mise en page, chaque section a un rôle précis.
Les nouveautés peuvent s'afficher dans une galerie compacte, les grandes collections dans des grilles plus denses. Les produits déjà montrés en haut sont exclus des sections suivantes, pour éviter les répétitions quand vous faites défiler.
La page d'accueil peut maintenant présenter une sortie, remettre en avant des produits plus anciens et guider les visiteurs vers différentes parties du catalogue, sans répéter les mêmes articles.
Ajout rapide et recherche sans changer de page
Choisir une option produit ne devrait pas obliger à quitter la page.
L'ajout rapide s'ouvre maintenant en panneau bas sur mobile et en panneau plus large sur ordinateur. Les deux versions laissent de la place pour les images produit, les variantes et les infos de taille.
La recherche prédictive affiche les résultats pendant la saisie et garde vos recherches récentes à portée de main. Les fiches de résultats détaillées ne se chargent qu'en cas de besoin, ce qui réduit le travail avant même de commencer à chercher.
Vous pouvez ainsi comparer des produits, choisir une option et l'ajouter au panier sans perdre le fil.
Des fiches produit centrées sur la décision d'achat
Nous avons réorganisé les fiches produit autour des informations utiles pour acheter. Les visuels, la variante choisie, le prix et les boutons d'achat apparaissent en premier. Taille, livraison, entretien et retours restent à portée de main.
La galerie accepte désormais images, vidéos, vidéos externes et médias 3D. Changer de couleur peut faire passer la galerie directement à l'image correspondante.
Les produits associés apparaissent dans une section à part, « More to Explore ». Ils restent accessibles sans faire concurrence aux infos principales du produit.
Un panier qui réagit tout de suite
Le panier devenait parfois lent ou incohérent pendant le traitement des modifications. Nous avons reconstruit sa mise à jour pour un retour immédiat.
Les changements de quantité, les suppressions, les codes de réduction et les mises à jour de prix s'affichent pendant que le serveur confirme le résultat final. Le panier aligne ensuite les quantités et totaux affichés sur la réponse confirmée.
La progression des promotions est aussi plus claire. Le panier indique ce qu'il reste avant la livraison gratuite ou une offre multi-articles, puis confirme quand vous y êtes.
Le panier complet et le panier latéral partagent maintenant davantage le même comportement. Les deux chemins vers le paiement sont donc plus cohérents.
Des comptes clients plus utiles
La boutique reste maintenant utile après le paiement.
Les comptes clients incluent un historique de commandes consultable, avec miniatures, totaux, dates et statuts d'expédition. Chaque page de commande peut afficher les détails d'envoi, de remboursement et de retour.
Pour les commandes éligibles, vous pouvez choisir les produits, les quantités et le motif du retour avant d'envoyer une demande depuis votre compte.
Nous avons aussi reconstruit le sélecteur de pays et de langue. Vous pouvez chercher par nom de pays, code pays, devise ou langue, avec des résultats regroupés par région. Changer de marché conserve la page en cours tout en mettant à jour la langue et les prix.
Pourquoi « Energy Edition »
Chaque partie de cette version vise la vitesse. La page d'accueil travaille moins avant son premier affichage. La navigation demande moins de changements de page. Le panier réagit immédiatement et les comptes clients gèrent plus de choses après le paiement.
Aucune fonctionnalité ne résume à elle seule cette mise à jour. C'est l'effet cumulé de la reconstruction des parties de la boutique que vous utilisez le plus.
Le travail continue. Dites-nous quand quelque chose vous semble lent, pas clair ou gênant.
