Architecture
STOREFRONT EN LIGNE
La présentation et les composants publics restent liés au thème BigCommerce.
NOUVEAU HEADLESS REGGAO
Un storefront SSR PHP/Twig indépendant ; BigCommerce reste le moteur catalogue et transactionnel.
CAS CLIENT · HAIRSTORE
BigCommerce reste le moteur. Nous avons reconstruit le storefront qui mène au checkout.
Le défi HairStore n’était pas de redessiner une page d’accueil. Il fallait découpler un catalogue de plusieurs milliers de références de son thème historique, préserver BigCommerce comme source de vérité et reconstruire toute l’expérience storefront : navigation, recherche, fiches produit, panier, comptes, contenus et SEO, puis la relier au checkout hébergé BigCommerce.
PROBLÈMESYSTÈMEOPÉRATIONSÉVOLUTION
7 543produits visibles synchronisés
1 634catégories synchronisées
33 459routes publiques cache + index
124webhooks BigCommerce actifs
AVANT / SYSTÈME HEADLESS
D’un storefront contraint par son thème à une plateforme commerce indépendante.
La comparaison ne porte pas uniquement sur le style. Elle montre le passage d’une couche de présentation liée au storefront BigCommerce à un système headless qui conserve BigCommerce pour ce qu’il fait le mieux.
Catalogue
STOREFRONT EN LIGNE
Le rendu public dépend directement des services et des contraintes du storefront historique.
NOUVEAU HEADLESS REGGAO
Le catalogue est synchronisé dans SQLite, enrichi puis servi localement avec Redis et Meilisearch.
Recherche
STOREFRONT EN LIGNE
La recherche et les filtres évoluent dans les limites de la couche de thème existante.
NOUVEAU HEADLESS REGGAO
Recherche dédiée, suggestions, facettes métier, filtres cohérents et fallback SQLite.
Évolution
STOREFRONT EN LIGNE
Les évolutions d’expérience traversent une release globale du thème.
NOUVEAU HEADLESS REGGAO
Les composants, contenus et fragments évoluent séparément avec invalidation ciblée.
EXPÉRIENCES LIVRÉES
Une expérience pensée jusqu’aux détails qui comptent.
Ces écrans montrent le storefront HairStore dans ses principaux usages : découvrir le catalogue, composer son panier, accéder à son compte et naviguer simplement sur mobile.
Le panier devient une véritable surface de conversion.
Quatre lignes, cadeau offert, économies visibles, livraison débloquée, recommandations contextuelles, sous-total permanent et accès direct au checkout.
Le parcours continue après l’achat.
Connexion, profil, adresses, commandes, récupération de mot de passe, page de confirmation personnalisée et continuité avec le checkout hébergé BigCommerce.
Le responsive est traité comme un parcours complet.
Navigation, recherche, merchandising, informations clés et actions commerce restent immédiatement accessibles sur petit écran.
ARCHITECTURE TECHNIQUE
Le commerce reste dans BigCommerce. Le storefront devient une plateforme indépendante.
L’architecture sépare volontairement les responsabilités : BigCommerce garde le catalogue et la transaction ; le système Reggao synchronise, indexe et sert une expérience publique pensée pour le catalogue réel.
BigCommerce
Catalogue, variantes, prix, stocks, promotions et règles transactionnelles restent gouvernés par la plateforme commerce.
Merchandising par canal
Sélections, contenus, navigation et campagnes sont gérés comme des éléments d’expérience sans modifier le moteur transactionnel.
Webhooks commerce
Les changements utiles déclenchent une synchronisation et une invalidation ciblée au lieu d’une reconstruction globale.
Storefront headless Reggao
Un front SSR PHP/Twig sert le catalogue depuis son état local : il ne dépend pas d’un appel Admin API pour chaque page publique et reste relié à BigCommerce sur les parcours transactionnels.
- 01Synchronisation du catalogue
- 02Représentation locale SQLite
- 03Indexation Meilisearch
- 04Cache Redis et fragments
- 05Rendu SSR et SEO
- 06Panier et checkout BigCommerce
Storefront rapide
Navigation, listings, recherche, fiches produit et panier utilisent le même état catalogue et évoluent par composants.
Checkout préservé
Le panier, le checkout, les comptes et les commandes restent continus avec les flux BigCommerce déjà maîtrisés.
Évolutions ciblées
Les mises à jour reconstruisent uniquement les fragments concernés ; l’équipe dispose d’un storefront testable et supervisable.
CE QUE CELA APPORTE
Des effets concrets sur le travail, pas une promesse abstraite.
Chaque système est conçu pour rendre une opération plus lisible, plus fiable ou plus simple à faire évoluer.
Faire évoluer l’expérience sans réécrire le moteur
Le storefront, les contenus, la recherche et le merchandising peuvent progresser par composants pendant que BigCommerce continue d’assurer le catalogue et les transactions.
Traiter le catalogue comme un système
Recherche, disponibilité, variantes, SEO et parcours d’achat reposent sur un même état catalogue contrôlé plutôt que sur des adaptations dispersées du thème.
Garder une exploitation maîtrisable
Les webhooks, le cache et les générations sont supervisables : les équipes peuvent faire évoluer le storefront sans transformer chaque changement en opération risquée.
01
Le sujet n’était pas de refaire la home.
HairStore exploite une arborescence profonde, de nombreuses variantes et des règles transactionnelles déjà maîtrisées par BigCommerce. Remplacer le moteur aurait ajouté du risque. En revanche, conserver la couche de présentation historique empêchait de traiter performance, recherche, contenus, SEO et parcours d’achat comme un seul système.
02
Conserver le commerce. Libérer le front.
Reggao a conservé BigCommerce comme source de vérité et construit devant lui une couche de présentation indépendante. Nous n’avons ni dupliqué l’administration ni réécrit inutilement les fonctions transactionnelles.
- Catalogue, catégories, marques et variantes BigCommerce
- Prix, stocks, promotions et règles commerciales
- Panier et checkout BigCommerce conservés
- Comptes clients et commandes synchronisés
- Contenus et merchandising gérés par canal
03
Une architecture pensée pour le catalogue réel.
Les pages publiques ne sollicitent pas l’Admin API pendant une consultation normale. Les données sont synchronisées, indexées et servies localement ; seuls les parcours transactionnels dialoguent directement avec BigCommerce.
- PHP 8.4 et Twig pour un HTML complet côté serveur
- SQLite comme représentation locale fiable du catalogue
- Meilisearch pour recherche, classement et facettes
- Redis pour fragments, générations et données dérivées
- Nginx, Caddy, Cloudflare et Docker pour l’exploitation
- Webhooks persistés, dédupliqués, rejouables et réconciliés
04
Recherche, listings et fiches produit conçus pour vendre.
Le système ne se contente pas d’afficher des références. Il organise la découverte, les options, les informations utiles et la décision d’achat à partir du même état catalogue.
- Suggestions, tolérance aux requêtes imparfaites et facettes métier
- Prix conseillé, prix remisé, disponibilité et avis dans les listings
- Aperçu rapide et ajout panier depuis une carte produit
- Galerie, variantes, stock et CTA sticky sur les fiches
- Bénéfices, ingrédients, vidéos, FAQ et contenus enrichis
- Duo, trio et recommandations calculés depuis le catalogue local
05
Un panier conçu comme une étape de décision.
L’ajout ouvre un tiroir sans interrompre la navigation. Le client comprend immédiatement ce qu’il achète, ce qu’il économise, ce qui manque pour la livraison offerte et ce qui peut compléter sa routine.
- Quantités et suppression sans rechargement de page
- Prix barrés et économies par ligne et au total
- Progression vers la livraison offerte
- Cadeaux, coupons et chèques-cadeaux
- Recommandations contextuelles dans le drawer
- Sous-total et CTA de commande toujours accessibles
06
Checkout, comptes et après-commande restent reliés.
Le checkout hébergé BigCommerce conserve sa robustesse transactionnelle. Reggao a développé le bridge qui maintient le contexte client et panier entre les deux environnements.
- Création de compte, connexion et mot de passe oublié
- Profil, données professionnelles et adresses
- Historique et détail des commandes
- Consultation sécurisée d’une commande invitée
- Reprise de panier abandonné
- Restrictions de transport et moyens de paiement contextualisés
07
SEO, cache et résilience font partie du produit.
Le HTML, les canonicals, l’indexation et les données structurées sont générés côté serveur. Lors d’une mise à jour, la nouvelle génération est construite et contrôlée avant de remplacer atomiquement la précédente.
- Product, ProductGroup, Offer, BreadcrumbList et FAQPage
- Sitemap issu de l’inventaire réel
- Noindex des facettes et routes transactionnelles
- Invalidation ciblée sans purge Redis globale
- Dernière version saine conservée en cas d’échec
- PWA publique sans mise en cache des comptes ni du checkout
08
L’IA entre aussi dans l’exploitation commerce.
Le projet expose 23 outils MCP authentifiés. Une équipe autorisée peut demander à une IA de préparer une campagne, réorganiser un slider, remplacer une sélection ou modifier l’offre de livraison, tout en conservant BigCommerce comme gouvernance centrale.
- Programmation des campagnes et du slider
- Sélections de produits et blocs focus
- Cartes du méga-menu et logos de marques
- Newsletter et seuil de livraison offerte
- Mises à jour enregistrées dans les Channel Metafields
- Reconstruction limitée aux fragments concernés
09
Ce que HairStore gagne concrètement.
HairStore conserve son moteur commerce et ses habitudes opérationnelles, mais n’est plus limité par sa couche de présentation historique. L’expérience, la recherche, les contenus et le merchandising peuvent évoluer par composants ; l’entreprise dispose d’un storefront supervisable, testable et conçu pour durer.
QUESTIONS FRÉQUENTES
Décider avec les bonnes contraintes.
Comment créer une boutique en ligne performante avec une plateforme e-commerce spécialisée+
Une boutique performante associe une architecture stable, un catalogue propre, des pages rapides, une recherche utile et un checkout cohérent. Elle doit aussi respecter les stocks, prix, comptes et opérations de l’entreprise. Mesurez les parcours réels avant d’ajouter des applications : chaque dépendance doit apporter une valeur claire et rester exploitable.
Comment optimiser le référencement naturel sur cette plateforme e-commerce ?+
Travaillez d’abord le rendu indexable, les URLs, les redirections, les canonicals, les performances et le maillage interne. Les catégories, produits et contenus doivent répondre à des intentions distinctes sans générer de facettes inutiles. Sur une architecture headless, métadonnées, données structurées, sitemap et rendu serveur doivent être vérifiés dans la version réellement livrée aux robots.
Comment migrer une boutique existante vers une plateforme e-commerce sans perdre de données+
Inventoriez produits, variantes, clients, commandes, contenus, URLs et règles commerciales avant toute migration. Préparez les correspondances, nettoyez les données, testez plusieurs imports et planifiez les redirections SEO. Une bascule contrôlée prévoit aussi le gel des écritures, la vérification des totaux et une procédure de retour si un contrôle échoue.
Que montre le cas HairStore sur le headless BigCommerce ?+
Le cas HairStore montre un storefront indépendant relié à BigCommerce, qui reste le moteur du catalogue et du checkout hébergé. Les captures présentent l’accueil, le panier, le compte et l’expérience mobile. Les mesures de recette technique sont identifiées comme telles et ne sont pas présentées comme des résultats commerciaux après lancement.
FONDATEURS · E-COMMERÇANTS · DIRIGEANTS
Marco et Jérémie pilotent directement les projets.
La stratégie, le métier et l’architecture restent dans la même conversation, de la découverte à l’exploitation.
