Modèle Volt : la boutique high-tech avec comparatif
Modèle Volt : la boutique high-tech avec comparatif
Volt est l'un des 25 modèles de la galerie Zugo : une boutique de produits physiques à caractéristiques, pensée pour l'audio, l'énergie et l'éclairage. Elle réunit un produit vedette, une offre de la semaine avec compte à rebours, un catalogue filtrable, un comparatif face à face et un panier qui répond. La copier dans un projet ne coûte aucun crédit.
C'est le plus classique des modèles de boutique de la galerie, et ce n'est pas un reproche. Aucun bloc n'est là pour faire joli : chacun répond à une question que l'acheteur se pose avant de sortir sa carte.
Que contient exactement le modèle Volt ?
La page suit l'ordre d'un achat d'équipement : un produit qui capte l'attention, une offre avec une échéance, la gamme complète, puis le comparatif entre les deux références qui font hésiter, et enfin les garanties.
| Zone | Ce qu'elle contient |
|---|---|
| Bandeau d'annonce | Une ligne pour la nouveauté ou l'offre en cours |
| Produit vedette | Prix barré, note, disponibilité, caractéristiques principales |
| Offre de la semaine | Article remisé, compte à rebours, pourcentage d'économie |
| Catalogue | Grille de produits filtrée par famille : audio, énergie, éclairage |
| Comparatif | Deux références côte à côte sur six caractéristiques |
| Garanties | Couverture, retours, réparabilité et livraison en quatre blocs courts |
| Panier et compte | Tiroir de panier avec vente croisée, récapitulatif, écrans de connexion |
Les quatre blocs de garantie arrivent après les produits, et cet ordre est le bon. Une garantie ne crée pas l'envie, elle lève la dernière objection. Placée trop tôt, elle donne l'impression d'une boutique sur la défensive avant même que le visiteur ait eu envie de quelque chose.
Le tiroir de panier propose une vente croisée. Pour des accessoires, c'est de la vente honnête : qui achète des écouteurs veut souvent un étui. Pour un achat unique et cher, cela devient du bruit, et le retirer tient en une modification.
Pourquoi le tableau comparatif est-il le bloc le plus utile ?
La plupart des boutiques d'équipement perdent la vente dans l'écart entre deux produits voisins. Le visiteur aime la marque, ne voit pas ce qui sépare le modèle haut de gamme du modèle intermédiaire, et part lire un avis ailleurs. Le comparatif garde cette décision sur votre page.
Ce qui fait fonctionner celui de Volt, c'est la façon dont il est amené : deux best-sellers, deux usages différents. Un comparatif qui pousse discrètement vers le plus cher se lit comme un argumentaire. Un comparatif qui dit quel produit va à quelle personne se lit comme un conseil, et il vend les deux.
Les caractéristiques retenues sont du bon type : autonomie, réduction de bruit, transducteurs, résistance à l'eau, poids, appairage. Chacune se traduit en usage réel. Les chiffres qui ne parlent qu'à un ingénieur ont leur place plus bas dans la page, pas dans le tableau qui tranche.
Si vous vendez quoi que ce soit avec des variantes, gardez ce bloc et reconstruisez-le en premier, même si vous jetez la moitié du reste.
Qu'est-ce qui fonctionne vraiment et qu'est-ce qui n'est qu'une façade ?
La vitrine réagit. Les filtres par famille, l'ajout au panier, le compteur, le tiroir avec son récapitulatif, l'état vide, le compte à rebours et les écrans de compte répondent tous. On peut regarder l'ensemble bouger dans l'aperçu de la galerie avant même de copier le modèle.
Derrière l'interface, en revanche, il n'y a encore rien. Pas de stock, pas de commandes, pas de clients. Le panier se vide au rechargement de la page, puisque le modèle est livré sans stockage. C'est acceptable pour juger d'un design, et inacceptable pour encaisser.
Le paiement est donc le premier connecteur à brancher : Stripe gère les cartes et les abonnements, et les écrans de commande sont prêts à se poser dessus. Le stockage et les comptes viennent de Supabase, les e-mails de confirmation de Resend. Aucun de ces branchements ne consomme de crédits, tous demandent une vraie séance de travail.
Un avertissement précis sur la pastille de disponibilité : une page qui affiche « en stock » sans rien en savoir fait plus de dégâts qu'une page muette, parce qu'un client qui commande un produit indisponible s'en souvient. Reliez-la à un stock réel, ou retirez la mention.
À qui Volt convient-il, et à qui pas du tout ?
Il convient à tout petit catalogue de produits physiques dotés de caractéristiques : matériel audio, outillage, luminaires, vélos et pièces, matériel de cuisine, accessoires photo. Partout où l'on compare des chiffres avant de choisir.
Il convient aussi au lancement d'un produit unique. Gardez la vedette et les garanties, supprimez le catalogue, et transformez le comparatif en votre produit face à la solution que votre client utilise aujourd'hui. Quatre modifications, et une page vraiment différente.
Il convient mal quand vos produits n'ont rien à comparer. Le vêtement, l'alimentaire et l'artisanat se vendent par la photo et le récit, et un tableau de caractéristiques y ressemble à un formulaire administratif. Un autre modèle de boutique de la galerie ira mieux.
Il convient mal, enfin, à une place de marché à plusieurs vendeurs. Comptes, reversements et modération font une plateforme, pas une vitrine, et c'est un autre projet. Les limites honnêtes de la vente en ligne montée ainsi sont détaillées dans e-commerce et IA.
Faut-il garder le compte à rebours de l'offre ?
Gardez-le uniquement si l'échéance existe pour de bon. Un compte à rebours qui repart à zéro à chaque rechargement est le plus vieux tour du web, les acheteurs le repèrent immédiatement, et il coûte exactement la crédibilité que les blocs de garantie servaient à construire.
Si votre offre se termine à une date réelle, il travaille pour vous : il transforme une intention vague en décision cette semaine. Une modification suffit à fixer la vraie date et à le laisser expirer au vu de tous.
Si vous ne faites jamais d'offres limitées, remplacez le bloc au lieu de le supprimer. Cet emplacement est l'un des meilleurs de la page et accueille très bien un lot, un best-seller ou une annonce de réassort.
Comment remodeler Volt pour vos propres produits ?
Le fond d'abord, la forme ensuite. Chaque modification coûte 3 crédits, donc cet ordre place en haut ce qui coûterait cher à refaire.
- Changez la marque et la ligne d'annonce. Nom, accroche, pied de page, bandeau du haut.
- Chargez votre gamme. Photos, désignations, prix, et le filtre renommé avec vos familles à vous.
- Reconstruisez le comparatif. Vos deux références qui font hésiter, sur des critères que l'acheteur sait juger.
- Réécrivez les garanties. Votre couverture réelle, votre délai de rétractation, votre promesse de livraison.
- Corrigez devise, frais de port et TVA. Les valeurs de démonstration sont des repères et sont fausses pour tout le monde.
- Branchez le paiement, puis publiez. Le projet vit à une adresse du type
votreboutique.zugo.run, et un domaine personnel se pose par-dessus, comme expliqué dans puis-je utiliser mon propre domaine.
Faites les photos avant les modifications, pas après. L'image produit est la seule pièce d'une boutique de matériel que le constructeur ne peut pas améliorer à votre place, et une page magnifiquement remodelée autour de visuels de démonstration reste une démonstration.
Combien coûte le passage de la démo à une vraie caisse ?
La copie est gratuite et n'appelle aucun modèle, donc le compteur ne démarre qu'à la première modification.
| Action | Coût |
|---|---|
| Copier le modèle dans un projet | Gratuit |
| Une modification dans la conversation | 3 crédits |
| Une construction à partir d'une description | 6 crédits |
| Une plateforme multipage | 12 crédits pour les trois premières pages, puis 3 par page |
| Mode Hi-Fi | Le double : 6 par modification, 12 par construction |
Free donne 5 crédits, Pro coûte $25 par mois pour 200 crédits, Business $99 par mois pour 800 crédits. En pratique, 200 crédits représentent environ 16 plateformes, 33 constructions ou 66 modifications par mois, ce qui laisse largement de quoi reprendre un modèle et le faire évoluer.
Si chaque produit doit avoir sa propre adresse, pour la recherche et pour le partage, vous passez de la page à la plateforme : 12 crédits pour les trois premières pages, puis 3 par page. Une construction simple prend environ une minute, une plateforme multipage quelques minutes. Le détail des budgets réalistes se trouve dans combien coûte un site créé par IA.
Chaque version est ouverte dans un bac à sable avant de vous être remise, et une version qui ne s'affiche pas ne vous est pas livrée. Cela supprime la page blanche. Cela ne garantit pas que la page corresponde à ce que vous aviez en tête.
Où s'arrête honnêtement ce modèle ?
Une boutique sans stockage est une vitrine de salon. Les paniers se vident, aucune commande n'est enregistrée, aucun client n'existe. Deux connecteurs comblent l'écart, et c'est une séance de travail, pas une phrase dans la conversation.
Stock, taxes et règles d'expédition restent votre métier. Le modèle affichera n'importe quel chiffre que vous lui donnerez. Décider quels chiffres sont justes, et les tenir à jour, ne se délègue pas.
La logique commerciale fine s'obtient par modifications successives. Lots à prix conditionnel, garantie rattachée à un numéro de série, règles de livraison par pays : tout cela est atteignable, mais comme une suite de changements précis, pas d'un seul prompt. Sur un produit vraiment complexe, Zugo ne remplace pas une équipe de développement, et les sources partent vers GitHub quand vous le décidez.
Le test le moins cher tient en une modification : reconstruisez le comparatif avec vos deux produits. Ouvrez la galerie sur zugo.dev, copiez Volt, et mettez votre référence phare face à celle que vos clients achètent d'habitude. Si ce tableau se remplit facilement, ce modèle est le bon cadre pour votre boutique.