Ça y est, le MCP WiziShop est sorti le 13 octobre. Votre IA peut maintenant créer et modifier votre boutique à votre place, en discutant simplement avec vous.
Pour Halloween, j’ai voulu pousser l’outil le plus loin possible. J’ai créé une boutique d’horreur avec le MCP WiziShop, l’Hôtel Sainte-Veille. Douze chambres hantées, des objets à retrouver dans le noir et des pages entièrement personnalisées et immersives, jusqu’au bandeau des cookies.
Dans la foulée, j’ai eu pas mal de retours d’e-commerçants. Et presque tous me posaient la même question.
La question qui revient
« Comment je fais pour ajouter des éléments immersifs sur ma boutique ? »
Bon, un hôtel hanté, c’est bien pour Halloween, mais pas évident de s’en inspirer quand on vend des bijoux ou des cosmétiques ! Alors j’ai écrit cet article pour tout vous montrer, avec des exemples plus faciles à adapter à votre boutique.
J’ai pris une boutique WiziShop vierge, que j’ai baptisée Orée (une marque de bijoux fins plaqué or). Avec le MCP, j’y ai créé des pages et des éléments immersifs pour vous inspirer. Pour chacun, je vous montre la page en ligne et le prompt qui la crée directement.
Et cet article va évoluer. Je le compléterai au fil de vos questions et de vos idées, avec de nouveaux exemples et de nouveaux prompts.
C’est quoi une boutique immersive ?
Une boutique immersive fait vivre son univers au visiteur au lieu de simplement lui présenter des produits.
La mise en scène, le ton, les animations et les interactions donnent envie de rester, de découvrir et de cliquer.
DÉFINITION
Site immersif : site qui plonge le visiteur dans une ambiance cohérente (images, textes, mouvements, interactions), pour qu’il vive une expérience plutôt qu’une simple visite.
Le principe : une boutique classique, des pages immersives à côté
Vous n’avez pas besoin de transformer toute votre boutique pour la rendre immersive.
Sur Orée, l’accueil, les catégories, les fiches produits et le panier restent ceux d’une boutique classique, rapides et faciles à utiliser. L’immersion se vit sur des pages dédiées, un peu comme des landing pages.
L’avantage, c’est que vous pouvez tester une idée sans toucher au parcours d’achat. Si une page marche bien, rien ne vous empêche ensuite de pousser l’immersion jusqu’à l’accueil.
Avant de commencer : connecter votre IA à votre boutique
Il vous faut une boutique WiziShop, une IA compatible MCP et le MCP WiziShop connecté entre les deux.
Le MCP donne à l’IA l’accès à votre boutique. Elle crée les pages, les produits et les images. Elle vous montre aussi un aperçu avant de publier.
Quelle IA choisir ? Après plusieurs tests dans nos équipes, c’est avec Claude que nous obtenons généralement les meilleurs résultats, surtout pour le design des pages. C’est donc l’IA que je vous conseille pour vous lancer.
Étape 1 : trouver vos idées d’éléments immersifs
Le plus dur, ce n’est pas de créer la page, c’est de trouver la bonne idée pour votre univers.
Alors commencez par demander à votre IA. Elle connaît votre catalogue grâce au MCP et peut vous proposer des expériences qui collent à vos produits.
Voici le prompt que j’ai utilisé, à adapter à votre boutique :
J’ai une boutique de bijoux fins plaqué or qui s’appelle Orée, pour des femmes qui aiment les bijoux discrets, à porter tous les jours ou à offrir. Lis mon catalogue et ma page d’accueil. Propose-moi 8 idées d’éléments immersifs à ajouter pour offrir une expérience unique au visiteur, sans toucher à mon parcours d’achat. Pars d’abord d’un vrai concept lié à mon univers, puis seulement de la façon de vendre. Pour chaque idée, décris ce que vit le visiteur, la page où la placer, les images à générer avec les crédits IA du MCP et ce que ça apporte à la vente. Classe-les de la plus simple à la plus ambitieuse.
Pour Orée, l’IA a par exemple proposé :
une visite virtuelle de la boutique ;
un meuble à bijoux qui présente les produits ;
une loupe de bijoutier sur l’établi ;
le look complet de la mannequin de la marque ;
un quiz qui trouve le bijou qui vous ressemble ;
une page contact en forme de lettre ;
une bague égarée sur la page 404.
Ce sont les 7 exemples que je vous présente tout de suite !
Étape 2 : poser le socle visuel de votre marque
Une page immersive tient sur ses images, alors elles doivent toutes parler le même langage.
Sur Orée, tout part des photos produits. Elles servent ensuite de références pour chaque scène, ce qui garantit que les bijoux mis en scène sont exactement ceux du catalogue.
Voici le prompt que j’ai utilisé pour les photos produits :
Génère avec les crédits IA du MCP une photo produit carrée pour chacun de mes 8 bijoux (colliers Lisière et Clairière, créoles Aube, puces Rosée, bagues Sillon et Éclat, bracelets Fil d’or et Ondée), toutes dans le même style, sur fond ivoire uni, vue de dessus, lumière naturelle douce venant d’en haut à gauche. Un seul bijou par photo, sans texte ni accessoire. Ajoute-les à mes fiches produits avec un texte alternatif.
Si vous voulez faire apparaître une personne sur vos photos, créez aussi un mannequin de marque. Sur Orée, Léa est une personne fictive générée une seule fois sous forme de planche (face, profil, en pied), puis donnée en référence sur toutes les photos portées. On retrouve ainsi la même personne d’une image à l’autre.
Et celui que j’ai utilisé pour créer Léa :
Crée une mannequin de marque pour ma boutique, Léa, une femme de 32 ans aux cheveux châtain foncé mi-longs et ondulés, aux yeux noisette, avec quelques taches de rousseur et une allure sereine. Génère sa planche de référence (portrait de face, profil et en pied, fond blanc, tenue neutre) avec les crédits IA du MCP. Utilise-la ensuite comme référence, avec la photo du bijou, pour générer une photo portée de chacun de mes 8 bijoux.
Conseil
Quel mannequin choisir ? Vous pouvez très bien demander à votre IA le profil le plus adapté à vos clients. Décrivez-lui votre clientèle et demandez-lui plusieurs propositions avant de générer la planche.
1. Une visite de la boutique, comme dans la vraie vie !
Une page de visite fait vivre au visiteur l’arrivée dans ma boutique, comme s’il poussait la porte.
Elle répond à l’un des points de friction de l’e-commerce, le manque d’interaction. Sur un site, on ne flâne pas devant une vitrine et on ne découvre pas un lieu. Que vous ayez une boutique physique ou non, vous pouvez très bien retranscrire cette sensation en ligne.
Sur Orée, la visite se fait en trois temps, comme si vous y étiez.
D’abord, la rue. Vous arrivez dans une rue pavée de Paris, en fin de matinée, face à la boutique ouverte.
Puis, la vitrine. En faisant défiler, vous vous avancez jusqu’à elle. Les trois bijoux exposés sont cliquables, avec leur prix.
Enfin, l’intérieur. Vous entrez. Chaque élément de la pièce mène à une autre expérience, du meuble à bijoux à l’atelier, en passant par la vitrine et la sonnette pour écrire à l’atelier.
L’astuce tient dans les images. La vitrine et l’intérieur ont été générés en donnant la façade comme référence, ce qui garde le même décor d’un plan à l’autre.
Crée une page « Une visite de la boutique ». Génère avec les crédits IA du MCP la façade de ma boutique ouverte, dans une rue pavée de Paris en fin de matinée, vue depuis l’autre côté de la rue, avec une enseigne vide. À partir de cette image, génère la vitrine vue de près avec le collier Clairière, le bracelet Ondée et la bague Sillon exposés, puis l’intérieur de la boutique vu depuis l’entrée, avec la vitrine, le meuble à bijoux, l’atelier au fond et une sonnette. Garde la scène fixe à l’écran pendant le défilement et enchaîne les trois plans en fondu, avec une légère avancée de la caméra. Écris « Orée » sur l’enseigne en texte. Rends les bijoux de la vitrine cliquables avec leur prix, place dans l’intérieur un point cliquable vers chacune de mes autres pages et termine par une liste de mes bijoux.
2. Le meuble à bijoux pour découvrir la collection
Une page « meuble » réunit mes catégories dans un seul décor, où chaque tiroir s’ouvre sur ses produits.
C’est une façon de parcourir le catalogue qu’on a envie de toucher.
Sur Orée, le grand meuble de l’atelier garde les bijoux, un tiroir par famille. On clique sur un tiroir ou sur sa plaque de laiton, il s’ouvre, puis la vue se rapproche comme si l’on se penchait dessus. Les bijoux posés sur le velours apparaissent en grand, chacun avec son nom et son prix. Un clic ouvre leur fiche.
Les catégories, elles, restent de vraies pages classiques, avec leurs filtres et leur référencement.
Crée une page « Le meuble à bijoux ». Génère avec les crédits IA du MCP le grand meuble en bois de mon atelier, avec 4 tiroirs fermés et une plaque de laiton sur chacun, un tiroir par catégorie (colliers, boucles d’oreilles, bagues, bracelets). Génère ensuite, à partir de cette image et des photos des 2 bijoux de chaque catégorie, le même meuble avec un seul tiroir ouvert et ses bijoux posés sur du velours, sans rien déplacer d’autre, puis une vue rapprochée de chaque tiroir ouvert. Au clic sur un tiroir ou sur sa plaque, ouvre-le en fondu puis passe à la vue rapprochée, avec le nom, le prix et un lien vers la fiche sur chaque bijou, un bouton pour refermer le tiroir et un lien vers la catégorie complète. Termine par la liste de mes 8 bijoux.
3. Le produit à la loupe et le look complet
Une scène shoppable, c’est une photo d’ambiance sur laquelle chaque produit est cliquable.
C’est le « shop the look » des marques de mode, que vous pouvez appliquer à n’importe quelle boutique.
Sur Orée, je l’ai décliné en deux pages. Sur l’établi de l’atelier, le curseur devient la loupe du bijoutier. Un clic ouvre la fiche. Sur mobile, on touche un bijou pour le voir à la loupe.
Sur la deuxième page, Léa porte quatre bijoux. Un point lumineux est posé à côté de chaque bijou. Au premier clic, un aperçu du bijou s’ouvre avec sa photo et son prix. Au second, on arrive sur sa fiche.
Le plus important se joue à la génération de l’image. Donnez toujours à votre IA les photos de vos produits en référence, ou demandez-lui de les récupérer elle-même dans votre boutique (« prends les photos du collier Lisière et de la bague Éclat », par exemple). La scène montrera ainsi exactement ce que vous vendez.
Voici le prompt que j’ai utilisé pour la loupe :
Crée une page « L’atelier à la loupe ». Génère avec les crédits IA du MCP une photo de l’établi en bois de mon atelier, en partant des photos de 6 de mes bijoux (colliers Lisière et Clairière, créoles Aube, bagues Sillon et Éclat, bracelet Fil d’or), chacun bien visible et séparé des autres. Transforme le curseur en loupe de bijoutier qui grossit la photo 2,5 fois, affiche le nom et le prix du bijou survolé et ouvre sa fiche au clic. Sur mobile, affiche la loupe sur le bijou touché. Ajoute la liste de ces bijoux sous la scène.
Et celui pour le look complet :
Crée une page « Le look de Léa ». Génère avec les crédits IA du MCP une photo de Léa, ma mannequin de marque, qui porte les créoles Aube, le collier Lisière, la bague Éclat et le bracelet Fil d’or, en partant de sa planche et des photos de ces bijoux. Affiche la photo en grand, avec un point lumineux à côté de chaque bijou, relié à lui par un trait fin. Au premier clic sur un point, ouvre un aperçu avec la photo, le nom et le prix du bijou. Au second clic, ouvre sa fiche. Ajoute le prix total du look et la liste des bijoux en bas de page.
4. Le guide interactif « Trouvez le bijou qui vous ressemble »
Un guide interactif pose quelques questions au visiteur et lui révèle le produit qui lui correspond.
C’est la version en ligne du conseil en boutique. Ça marche particulièrement bien pour les cadeaux.
Sur Orée, le guide prend tout l’écran. Trois questions, chacune avec ses réponses en grandes images (pour qui, quel style, où le porter). À la fin, la photo du bijou choisi apparaît dans un halo de lumière, avec son prix, un deuxième bijou pour l’accompagner et une mention sur l’écrin quand on a choisi « Offrir ».
Crée une page « Trouver mon bijou » en plein écran avec un guide en 3 questions. La première, « C’est pour… », propose moi ou offrir. La deuxième, « Plutôt… », propose épuré, une pierre ou une perle. La troisième, « Vous le portez… », propose au cou, aux oreilles, au doigt ou au poignet. Illustre chaque réponse par une grande image cliquable tirée de mes photos de bijoux, avec une barre de progression. À la fin, révèle un bijou de mon catalogue avec une animation de lumière, son prix, un lien vers sa fiche et un deuxième bijou pour l’accompagner. Si la réponse est « Offrir », précise que chaque bijou est livré dans son écrin en coton. Ajoute un bouton pour revenir en arrière, un autre pour recommencer et la liste de tous mes bijoux en bas de page.
5. La page contact qui ressemble à une lettre
Une page contact immersive garde le formulaire natif et l’habille aux couleurs de la boutique, avec un ton qui donne envie d’écrire.
C’est souvent la page la plus oubliée, alors qu’elle rassure énormément avant un achat.
Sur Orée, on écrit à l’atelier.
La page s’ouvre en grand sur un bureau en chêne avec une enveloppe cachetée, puis trois raisons d’écrire (trouver la bonne taille, préparer un cadeau, entretenir un bijou).
Le formulaire devient une feuille de papier posée sur le plateau en bois du bureau. Elle commence par « Chère Orée, ».
On écrit sur des lignes comme dans une vraie lettre, un tampon orne le coin et le bouton d’envoi prend la forme d’un cachet de cire.
C’est pourtant toujours le formulaire de WiziShop, restylé.
Personnalise ma page contact sans supprimer le formulaire. Ajoute en haut, en pleine largeur, une photo du bureau en chêne de l’atelier avec une enveloppe cachetée, générée avec les crédits IA du MCP. Pose dessus le titre « Écrire à l’atelier », puis trois cartes avec les raisons d’écrire (trouver la bonne taille, préparer un cadeau, entretenir un bijou). Génère aussi un plateau de chêne vu de dessus pour le fond du formulaire. Transforme le formulaire en lettre posée sur ce plateau, avec « Chère Orée, » en titre manuscrit, des champs soulignés, une zone de message lignée, un tampon dans le coin et un bouton d’envoi en cachet de cire. Vérifie l’adresse e-mail qui reçoit les messages.
6. La page 404 personnalisée avec un jeu intégré
Une page 404 personnalisée transforme une erreur en détour agréable, avec un message dans le ton de la marque et des produits à découvrir.
Au lieu de perdre le visiteur, on le ramène vers la boutique.
Sur Orée, la 404 annonce « Ce bijou s’est égaré », avec la photo d’un écrin vide. Une petite bague a roulé quelque part sur la page, à un endroit différent à chaque visite. Quand on la trouve et qu’on clique dessus, elle s’envole jusqu’à l’écrin. La photo montre alors la bague à sa place sur le coussin, dans une lumière dorée. Juste en dessous, trois bijoux ramènent vers la boutique.
Personnalise ma page 404 avec le titre « Ce bijou s’est égaré » et un texte dans le ton de ma marque. Ajoute trois de mes bijoux en suggestion et une photo d’un écrin vide générée avec les crédits IA du MCP. Génère aussi la même photo avec la bague Sillon sur le coussin de l’écrin, sans rien changer d’autre. Cache sur la page la vraie photo de la bague Sillon en petit, à une place différente à chaque visite. Au clic, fais-la voler jusqu’à l’écrin, passe en fondu à la photo de l’écrin plein et affiche un petit message de félicitations.
Mes conseils pour réussir vos pages immersives
Une page immersive réussie reste rapide, lisible sur mobile et garde toujours une expérience d’achat classique, pour ne pas perturber le visiteur.
Voici ce que je vous conseille après mon expérience avec les sites Sainte-Veille et Orée :
Testez sur iPhone et sur Android : une grande partie de vos visiteurs arrive depuis un téléphone, souvent depuis un réseau social. Demandez à l’IA de vérifier ces deux cas avant de publier.
Une seule animation forte par page : la visite de la boutique, les tiroirs qui s’ouvrent, la loupe sur l’établi. Au-delà, l’effet s’émousse et la page s’alourdit.
L’aperçu d’abord : demandez à voir chaque page avant sa publication. Le MCP garde aussi une sauvegarde avant chaque modification.
Pensez aux visiteurs qui n’aiment pas les animations : les navigateurs ont un réglage « réduire les animations ». Demandez à l’IA de le respecter.
Combien ça coûte ?
Côté images, presque rien. Une image générée avec les crédits IA de WiziShop coûte 8 crédits, soit 8 centimes HT.
Les 39 images utilisées sur Orée (logo, photos produits, mannequin, photos portées et décors des pages) représentent 346 crédits, soit 3,46 € HT.
Chiffre clé
8 centimes HT
Le prix d’une image générée avec les crédits IA du MCP WiziShop (8 crédits, pack de 1 000 crédits à 10 € HT).
Et la première fois que vous consultez vos crédits IA, dans l’admin ou depuis votre IA, WiziShop vous en offre 100, de quoi générer vos 12 premières images.
Le MCP WiziShop relie votre boutique à votre IA (Claude, ChatGPT, Mistral…). Vous décrivez la page que vous imaginez, l’IA la crée dans votre boutique avec vos produits et vos couleurs. Vous la validez en aperçu avant de la publier.
Essai 7 jours, sans carte bancaire, sans engagement.
Créer une boutique immersive n’a maintenant plus de secret pour vous. Ce qui faisait le succès de Sainte-Veille tient en un mot, la cohérence. Et elle n’a rien de réservé à une boutique d’horreur.
Une visite de la boutique, un meuble à tiroirs, une loupe de bijoutier… Chacune de ces pages se crée en une demande à votre IA, avec votre catalogue et vos couleurs.
Mon conseil ? Commencez par le prompt de brainstorming, choisissez l’idée qui vous ressemble le plus, testez-la sur votre téléphone, puis passez à la suivante. Et si vous en créez une, envoyez-la-moi en commentaire, j’ai hâte de voir ce que vous allez imaginer.
F.A.Q.
Faut-il savoir coder pour créer une boutique immersive avec le MCP WiziShop ?
Non. Vous décrivez la page à votre IA, elle écrit le code et crée la page dans votre boutique via le MCP. Vous la validez en aperçu avant de la publier.
Combien coûtent les images générées par le MCP ?
8 crédits l’image, soit 8 centimes HT avec le pack de 1 000 crédits à 10 € HT. Comptez 2 crédits de plus par image de référence au-delà de deux.
Les images générées sont-elles utilisables sur ma boutique ?
Oui, elles sont rangées dans la médiathèque de votre boutique. Vérifiez chaque image avant de l’utiliser, surtout la fidélité de vos produits. Partez toujours de vos vraies photos produits comme références.
Une page immersive ralentit-elle ma boutique ?
Pas si elle reste sobre. Sur Orée, chaque effet tient en quelques lignes de code posées dans la page, sans vidéo ni module. Évitez les vidéos lourdes en ouverture et une animation par élément.
Ces pages fonctionnent-elles sur mobile ?
Oui, à condition de le vérifier. Toutes les pages d’Orée ont été testées sur ordinateur, sur iPhone et sur Android (Samsung).
Voici 17 raisons pour lesquelles WiziShop est la meilleure solution e-commerce complète qu’il vous faut pour réussir votre projet de boutique en ligne !
