Étude de cas · Paris · En ligne
Une marque de bottes parisienne avec un seul produit, quatre-vingt-dix paires numérotées, et aucune place pour un site qui ressemble à un template. Nous avons construit une boutique en une page qui lit le stock Shopify réel et met la botte elle-même au centre.
The Muuls fabriquent une seule botte, la Kuru, en deux coloris : Noir et Tobacco. La première série comptait quatre-vingt-dix paires, chacune numérotée. C'est toute la proposition, et cela pose un problème précis pour un site web.
La mise en page classique d'une boutique, grille de produits, filtres, catégories, est faite pour le choix. Cette marque n'a pas de choix à offrir. Mettre un produit unique dans un gabarit conçu pour deux cents donne l'impression d'une boutique qui a échoué plutôt que d'une série volontairement courte. La rareté devait être la structure de la page, pas un badge posé dessus.
Tout le site tient dans une seule page qui défile : accroche, les deux coloris, la matière et l'entretien, l'histoire de la numérotation, et l'inscription. Aucune navigation où se perdre, aucune page catégorie avec un seul article. L'ordre du scroll est l'argument de vente.
Une barre « paires restantes » lit le stock réel de Shopify via l'API Storefront, avec un jeton en lecture seule, par le canal de vente headless. Un discours sur la rareté ne tient que si le chiffre est vrai : il est donc branché sur le stock réel plutôt que saisi à la main.
La botte tourne sur une séquence de 240 images dessinée dans un canvas et pilotée par la position du scroll, une séquence par coloris. On obtient l'effet d'un tour 3D sans envoyer de moteur 3D ni de modèle lourd au navigateur.
Un bloc de numéro de série décompte de 090 à 001 puis repart, avec le /90 fixé en dessous. Une petite animation qui fait une seule chose : rendre quatre-vingt-dix concret plutôt que promotionnel.
La police Nord est hébergée sur le site plutôt que chargée depuis un service tiers, ce qui garde la marque cohérente, supprime une dépendance externe et évite qu'un chargement de police retarde le premier affichage.
Une politique de sécurité de contenu, des protections contre l'iframe et le MIME sniffing, le HTTPS forcé, des champs pièges sur les deux formulaires d'inscription et un délai anti-spam côté client. Un site mono-produit collecte quand même des e-mails, et la collecte attire les robots.
Le front-end est une page statique écrite à la main, sans étape de build ni framework, déployée sur un CDN. Shopify se tient derrière comme couche commerce et gère les produits, le stock, le paiement et les commandes, c'est-à-dire la partie qu'il ne faut jamais reconstruire soi-même. Le site lui parle via l'API Storefront avec un jeton en lecture seule.
Cette séparation est tout l'intérêt du headless. La marque obtient un front-end qui ne ressemble à rien d'autre, et le client garde un back-office Shopify normal pour gérer son activité. Si le site passait un jour à un autre studio, la partie commerce resterait intacte.
Le déploiement est continu : un push sur la branche principale publie. Les en-têtes de sécurité sont configurés au niveau du CDN plutôt que dans la page, et les fichiers de développement sont exclus de ce qui part en ligne.
Le site est en ligne sur themuuls.com, avec le compteur branché sur le stock Shopify réel et la page de lancement qui fait la vente. Design, code front-end, intégration commerce, configuration de sécurité et déploiement viennent tous de ce studio, sans agence intermédiaire.
Si vous lancez une petite série et voulez que le site la porte, dites-nous ce que vous sortez. Un deuxième projet vaut aussi le coup d'œil : Junky Solutions, qui est parti dans la direction exactement inverse.