Cette fois, il s’agit d’une boutique pour Tellu Hima, une marque d’encens. Le logo, le packaging et les animations produit, la boutique, les paiements et la mise en ligne : j’ai tout réalisé avec l’IA. Voici la vidéo, ou lisez la suite pour la version écrite.
Play videoLe plus intéressant n’est pas de faire fonctionner une boutique. C’est tout ce qui sépare un modèle de boutique fonctionnel d’un site qui ressemble vraiment à votre marque.
Ce qu’il vous faut avant de commencer
D’abord, un nom de marque et un nom de domaine. J’enregistre généralement les miens chez Hostinger. Ensuite, la boîte à outils :
- GitHub pour le code
- Higgsfield pour les éléments de marque
- Claude comme principal assistant de code
- Railway pour héberger le site terminé
- Un compte PayPal Business pour les paiements
Pourquoi pas Stripe ? Stripe fonctionne très bien. Mais il n’est pas disponible partout, et je voulais montrer comment avancer avec PayPal si Stripe n’est pas une option pour vous. Quel que soit votre choix, vérifiez que votre compte prend en charge les paiements que vous devez accepter avant de construire quoi que ce soit autour.
La marque : de la fumée à un S
J’ai commencé par l’histoire et l’émotion que je voulais donner à la marque, puis j’ai demandé à l’IA de générer des images de référence et des pistes pour trouver une direction, avant même de toucher au logo.
Le logo est né de la fumée qui s’élève d’un bâton d’encens. J’ai simplifié cette forme jusqu’à ce qu’elle devienne un S. À partir de là, j’ai construit le reste : les couleurs principales et leurs associations, un motif pour chaque collection, le packaging et les maquettes. Enfin, des modèles 3D et des animations des coffrets, aux dimensions réelles du packaging et avec des matières proches de l’original, pour pouvoir les utiliser sur le site.
Tous les éléments de cette phase ont été générés par l’IA. Mon rôle : fixer la direction, choisir ce qui fonctionnait et demander sans cesse des ajustements.
Mais multiplier les images ne suffit pas à faire une marque. Il faut encore se demander :
- Ces éléments donnent-ils l’impression d’aller ensemble ?
- Le packaging, les couleurs et le site sont-ils cohérents ?
- Une maquette superbe fonctionne-t-elle encore à taille réelle, dans la vraie matière ?
Ces arbitrages demandent toujours une expérience du design. L’IA me permet de visualiser une idée bien plus tôt. À moi de décider quelles idées méritent d’être approfondies.
Pourquoi j’ai construit la boutique avant de designer les pages
D’habitude, je conçois d’abord les pages, puis je développe. Cette fois, j’ai inversé l’ordre, car je partais du framework e-commerce prêt à l’emploi de Payload.
Si vous concevez les pages d’abord, ou même les développez, puis essayez de glisser un framework e-commerce existant en dessous, vous faites des allers-retours sans fin. Soit vous tordez la structure du framework pour sauver le design, soit vous tordez le design pour qu’il colle au framework.
J’ai donc demandé à l’IA de monter d’abord une boutique Payload fonctionnelle et de faire tourner le parcours de base. Le design a ensuite pu se construire autour de la structure réelle de la boutique, avec beaucoup moins de reprises.
La mise en place est simple :
- Créez un dossier de projet sur votre ordinateur et un nouveau dépôt sur GitHub.
- Ouvrez Claude dans ce dossier et envoyez-lui votre cahier des charges, avec l’URL du dépôt à la fin.
- Soyez explicite : partir du framework e-commerce de Payload, voici le type de boutique, voici les pages, voici comment doivent fonctionner les commandes et l’administration.
Puis laissez-le travailler. Le premier build prend un moment.
Une commande test, de bout en bout
Une fois la première version prête, j’ai parcouru la vitrine et je me suis connecté à l’administration pour vérifier que les pages et les fonctions de base se chargeaient.
Mais que tout se charge n’est pas l’essentiel. La vraie question, c’est de savoir si une commande va jusqu’au bout. J’ai ajouté les identifiants du bac à sable PayPal au fichier d’environnement du projet, redémarré le serveur local, choisi un produit, validé le panier et payé avec un compte acheteur de test. Le paiement est passé, et la même commande est apparue dans l’administration.
Cela valide le parcours de base (commande, paiement de test, commande dans le back-office), mais uniquement en environnement de test. Avant d’encaisser de vrais paiements, il vous faut encore la configuration de production et une nouvelle série de vérifications sur les paiements et le statut des commandes.
Lui donner le visage de la marque
La boutique fonctionnait, mais elle ressemblait à un modèle. Pour changer cela, j’ai utilisé les outils de design de Claude pour élaborer une charte de design du site.
Je lui ai fourni le brief du projet avec le logo, les couleurs, les photos produits, le packaging et le reste des éléments de marque. Plus le brief est précis, mieux il les exploite : quelles images mettre en avant, comment présenter les produits, ce qui reste constant d’une page à l’autre. J’ai reçu en retour un document de design avec des références de pages et des recommandations.
Je l’ai transmis à Claude Code, en lui indiquant le projet local et les fichiers concernés : nouvelle conversation dans le même dossier, document collé, et mes propres notes sur ce qu’il fallait modifier ensuite.
Le logo, les visuels produits et le style étaient désormais intégrés aux pages, et le site ne ressemblait plus du tout au modèle de départ.
D’une jolie vitrine à une boutique qu’on peut exploiter
Il restait deux chantiers : peaufiner les pages, et ajouter ce qu’il faut pour vraiment faire tourner une boutique. On sous-estime facilement la seconde liste :
- Pays de livraison. Le framework fournissait une liste de pays générique. Je l’ai réduite aux pays où nous pouvons réellement livrer, pour que personne ne passe une commande impossible à honorer.
- E-mails. La première version n’avait aucun service d’e-mail : ni notification de commande, ni e-mail de réinitialisation du mot de passe. J’ai branché Resend pour cela.
- Connexion avec Google, pour simplifier l’identification.
- SEO et Google Analytics, avec un gestionnaire de cookies pour que les visiteurs puissent régler leurs préférences.
- Ce que personne ne voit : la protection contre les bots et l’accès verrouillé au panneau d’administration.
Rien de tout cela n’est passionnant, mais passer d’une démo locale à une boutique en ligne oblige à y réfléchir.
Côté design, j’ai repris le site page par page. La charte donnait la direction, mais sur de vraies pages, les textes, les images et la mise en page demandaient encore des ajustements. J’ai donc relu et demandé des modifications à l’IA jusqu’à obtenir ce que je voulais pour le lancement.
La page d’accueil est devenue un seul écran plein cadre, avec une animation d’ouverture retravaillée ; j’ai supprimé les sections qui se trouvaient en dessous. La page À propos a demandé le plus d’attention : davantage d’images générées par l’IA dans l’ambiance de la marque, et un contenu et une mise en page réécrits pour que l’histoire, les produits et les images forment un tout.
L’IA m’a aussi aidé à tester l’ensemble du parcours d’achat. Un e-mail de confirmation de commande est arrivé dans une vraie boîte de réception, et la commande correspondante figurait dans l’administration. Pages, commandes et e-mails étaient enfin reliés.
Le déploiement sur Railway
Railway propose un guide de déploiement écrit pour Claude. Je l’ai ouvert, j’ai lancé une nouvelle conversation, donné l’URL à Claude et lui ai demandé de suivre le guide pour ce projet.
Quand il s’arrête pour vous poser une question, lisez bien ce qui est réellement en jeu : quel projet, quelle configuration, ce que vous devez remplir vous-même. La recommandation de l’IA est un bon point de départ, mais elle doit correspondre à votre projet.
Une fois déployé, vous obtenez une URL en ligne. Refaites-y le tour des pages principales et du parcours de commande : ce qui fonctionne en local ne garantit pas que la configuration déployée fonctionne aussi. Avant d’accepter de vrais paiements, passez PayPal en mode production et vérifiez le paiement, la commande dans le back-office et la notification par e-mail.
Dernière étape : connectez le nom de domaine enregistré au départ et configurez le DNS comme Railway l’indique. Une fois le domaine et le HTTPS actifs, ouvrez le site sur votre propre domaine et vérifiez-le une dernière fois.
Ce que je vous conseillerais d’en retenir
L’ordre qui a fonctionné pour moi :
- Fixer la direction de la marque.
- Faire fonctionner la boutique et le parcours de paiement.
- Affiner le design et compléter les fonctionnalités.
- Déployer, puis tout vérifier à nouveau.
L’IA peut abattre une grande partie du travail à chaque étape. Mais après chacune, regardez le résultat réel. Le design est-il cohérent ? Les commandes passent-elles ? Les e-mails arrivent-ils ? Le site en ligne fonctionne-t-il ?
Sur quelle partie voulez-vous que j’aille plus loin : le design de marque, la construction de la boutique, ou PayPal et le déploiement ? Dites-le-moi dans les commentaires YouTube, et abonnez-vous ci-dessous pour recevoir le prochain article.
