01
Parcours client gamifié.
Silhouette, atelier, récapitulatif des tailles, panier, commande : chaque étape est un écran de jeu.
Étude de cas · Boutique de mode techwear
Cyber-Punk.fr, une boutique où l’on compose son look comme dans un jeu.
Cyber-Punk.fr est une boutique de mode techwear dont le parcours d’achat se joue comme un jeu vidéo : on choisit une silhouette, on glisse les pièces sur l’avatar zone par zone, et le prix se recalcule avec une remise qui grimpe à chaque zone complétée. Site Web Montpellier a conçu le parcours, les visuels et le module. Le paiement en ligne ouvre prochainement.
40 avis · Site Web Montpellier · relevé du 07/09/2026
Réalisé par Site Web Montpellier
Sur téléphone
- Secteur
- Boutique de mode techwear
- Type de site
- E-commerce gamifié
- Site en ligne
- Cyber-Punk.fr
- Pièces
- 27
- Silhouettes
- 2
- Remise pack
- jusqu’à −20 %
L’atelier en détail
Chaque zone
a son rôle.
Sélectionnez un point pour lire ce qu’il fait. La légende reprend les six points sous la capture.
Une vraie silhouetteLe look s’affiche porté : base réaliste et vêtements en calques transparents, alignés au pixel.
Un inventaire de jeuSept emplacements sur cinq zones : le haut du corps prend jusqu’à trois couches, et un remplacement s’annule.
Femme ou hommeChanger de silhouette garde le look en cours.
Glisser ou toucher27 pièces filtrées par zone, à glisser sur l’avatar ou à toucher.
Le total et l’offre packLe montant s’anime à chaque pièce ; la jauge des cinq zones fait passer la remise de −5 % à −20 %.
Deux ambiancesSignal (clair) ou Néon noir (sombre), en un clic.
- 01Une vraie silhouetteLe look s’affiche porté : base réaliste et vêtements en calques transparents, alignés au pixel.
- 02Un inventaire de jeuSept emplacements sur cinq zones : le haut du corps prend jusqu’à trois couches, et un remplacement s’annule.
- 03Femme ou hommeChanger de silhouette garde le look en cours.
- 04Glisser ou toucher27 pièces filtrées par zone, à glisser sur l’avatar ou à toucher.
- 05Le total et l’offre packLe montant s’anime à chaque pièce ; la jauge des cinq zones fait passer la remise de −5 % à −20 %.
- 06Deux ambiancesSignal (clair) ou Néon noir (sombre), en un clic.
Le parti pris
Ce qu’il fallait
rendre possible.
Le point de départ du projet et ce que le site devait réussir.
Le point de départ
Sur une boutique de mode, le client imagine mal la tenue complète et achète pièce par pièce. Le parcours devait lui faire composer un look entier, le voir porté sur une vraie silhouette et l’inciter à compléter sa tenue, sans jamais masquer le nom ni le prix des pièces.
Ce que l’agence a conçu
Du parti pris
au parcours d’achat.
Conception, visuels, animations et code : tout a été réalisé par Site Web Montpellier.
02
Avatars et 27 pièces en calques.
Deux vraies silhouettes et des vêtements en calques transparents, alignés au pixel près.
03
Glisser-déposer sur l’avatar.
Sept emplacements, haut du corps en trois couches, remplacement avec annulation ; un simple toucher suffit sur téléphone.
04
Offre pack et rappel.
Remise de −5 % à −20 % selon les zones complétées ; un rappel propose la pièce manquante en un clic.
05
Deux ambiances.
Signal (clair) ou Néon noir (sombre), en un clic depuis l’en-tête.
06
Module autonome.
Conçu pour s’intégrer à une boutique WordPress ou fonctionner seul.
Le site en images
Le site,
page après page.
Des parties du site Cyber-Punk.fr que le film ne montre pas. Sélectionnez une vue pour l’agrandir.
3 vues du siteVisiter Cyber-Punk.fr
Fonctionnalités du site
Ce que le site
permet de faire.
Dans le parcours
Sur le site de Cyber-Punk.fr.
- Trois looks prêts à porter, à essayer en un clic
- Looks enregistrés et partageables par lien
- Chaque pièce posée confirmée par un message, sans masquer ni le nom ni le prix
Pour aller plus loin
Un projet
dans le même esprit ?
Autres réalisations de l’agence
D’autres projets
dans le même esprit.
D’autres sites animés conçus par Site Web Montpellier, chacun avec son étude de cas.
Parlons de votre site
Votre projet
commence ici.
Un site comme celui de Cyber-Punk.fr vous parle ? Décrivez votre activité : nous vous rappelons sous 48 h pour en parler, puis nous vous proposons un devis détaillé, sans engagement.
40 avis · Site Web Montpellier · relevé du 07/09/2026
Tout commence
par votre activité.
Quelques mots pour comprendre ce que vous souhaitez.
Vos coordonnées servent à traiter votre demande et à vous recontacter. Politique de confidentialité
Vous préférez en parler de vive voix ?
- 06 89 86 19 06
- sitewebmontpellier@gmail.com
- Réserver un créneau en visio
- 1348 Av. Raymond-Dugrand, 34000 Montpellier
