Design de fiche produit e-commerce : anatomie et exemples
Design de fiche produit e-commerce
Design de fiche produit : anatomie, exemples en direct, checklist | We.Inc
L'anatomie d'une fiche produit e-commerce avec des mises en page modifiables en direct, une checklist d'autoévaluation et des données structurées Product conformes aux exigences actuelles de Google.
Une fiche produit doit répondre à trois questions avant le bouton d'achat : qu'est-ce que c'est, est-ce que ça me convient, et que se passe-t-il après le paiement. Placez des photos nettes, le nom, le prix et les options au-dessus de la ligne de flottaison sur ordinateur, puis la livraison, les retours et les détails en dessous, et balisez le prix et la disponibilité avec les données structurées Product.
Anatomie d'une fiche produit, de haut en bas
Élément
Rôle
Oubli fréquent
Galerie
Montre l'article sous tous les angles, en situation et à l'échelle
Une seule photo studio
Nom et prix
Confirme que c'est le bon article, à un coût connu
Prix caché jusqu'au paiement
Options
Taille, couleur, quantité avec un état de stock clair
Rupture de stock découverte après le choix
Ajouter au panier
L'unique action principale
Boutons concurrents de même poids
Livraison et retours
Lève l'inquiétude après l'achat
Conditions seulement dans le pied de page
Détails et caractéristiques
Matériaux, dimensions, entretien
Pavé de texte sans intertitres
Questions
Les réponses qui bloquent la décision
Totalement absentes
Plutôt que des captures d'écran d'autres boutiques, ce guide construit pièce par pièce, en HTML et CSS simples, la fiche produit d'un atelier de céramique imaginaire. Utilisez la checklist pour noter votre propre page et copiez les données structurées conformes aux règles actuelles de Google.
Notez votre fiche produit actuelle avec la checklist et voyez quels éléments manquent.
Ouvrez les exemples de mise en page en direct et modifiez-les avec les détails de votre produit.
Copiez le JSON-LD Product et remplissez-le avec le prix et le stock affichés sur la page.
Testez le balisage dans le test des résultats enrichis de Google avant de publier.
Indiquez la date ou la fourchette de livraison près du bouton, pas seulement le coût. Les gens s'organisent selon la date d'arrivée.
Affichez l'état du stock sur chaque option avant qu'elle soit choisie, pour que personne ne sélectionne une taille épuisée.
Donnez de vraies dimensions et une photo avec un objet familier pour l'échelle, comme une main ou une tasse.
Gardez un libellé de bouton précis et identique partout, par exemple Ajouter au panier.
Les données structurées doivent correspondre à la page. Un prix différent dans le balisage et à l'écran est une raison pour Google de l'ignorer.
Questions fréquentes
Que faut-il placer au-dessus de la ligne de flottaison sur une fiche produit ?
Sur ordinateur : la photo principale, le nom du produit, le prix, les sélecteurs d'options et le bouton d'ajout au panier. Sur téléphone, la photo occupe généralement le premier écran, alors veillez à ce que le nom et le prix suivent juste après, avec le bouton tout près.
Quelles données structurées une fiche produit nécessite-t-elle ?
Pour les pages où l'on peut acheter, la documentation de Google sur les fiches marchands exige Product avec name, image et offers, ainsi qu'une Offer avec un prix supérieur à zéro et une priceCurrency. La disponibilité, les détails de livraison, la politique de retour, la marque et le GTIN sont recommandés.
Quelle différence entre extraits de produit et fiches marchands ?
Les extraits de produit concernent les pages où l'on ne peut pas acheter directement, comme les avis, et nécessitent un nom plus review, aggregateRating ou offers. Les fiches marchands concernent les pages qui vendent le produit et nécessitent le prix et la devise.
Faut-il afficher des avis sur les fiches produit ?
Si vous en avez de vrais, oui, près du prix ou sous les détails. N'inventez jamais d'avis ni de notes, et n'ajoutez le balisage aggregateRating que si la note est affichée sur la page et provient de vrais clients.
Les photos font l'essentiel de la vente
Pensez la galerie comme un ensemble : face, dos ou profil, gros plan sur la matière, l'article en situation, et une photo avec un repère d'échelle. Chaque image a besoin d'un texte alternatif qui décrit ce que montre cette vue.
Réservez l'espace de la galerie avec width et height ou aspect-ratio, pour que la page ne saute pas pendant le chargement des images.
Le bloc d'achat
Regroupez le prix, les options, la quantité et le bouton, avec le résumé livraison et retours juste en dessous. Ce seul bloc devrait répondre à la plupart des questions sans défilement.
Une option désactivée a besoin de plus qu'un texte grisé. Ajoutez les mots Épuisé au libellé pour que l'état soit clair pour tous, y compris les utilisateurs de lecteurs d'écran.
Des détails qui réduisent les retours
Dimensions, matériaux, conseils d'entretien et contenu du colis ont leur place dans des sections faciles à parcourir, avec intertitres. Une courte note sur la taille ou la coupe évite de nombreuses commandes erronées.
Répondez directement sur la page aux deux ou trois questions que les clients posent le plus, et renvoyez vers la FAQ complète pour le reste.
Exemples de mise en page de fiche produit
Fiche produit sur deux colonnes avec galerie et bloc d'achat
Galerie à gauche, bloc d'achat à droite sur grand écran ; ils s'empilent sur téléphone. La taille épuisée l'indique en toutes lettres, pas seulement en gris.
Détails dans des sections titrées
De courtes sections avec intertitre se parcourent plus facilement qu'une longue description. La première est ouverte, car elle répond à la question la plus fréquente.
Données structurées Product pour une page qui vend
name, image et offers avec price et priceCurrency sont les champs obligatoires des fiches marchands ; availability et les autres sont recommandés. Les valeurs doivent correspondre à la page.
Au moins quatre photos, dont une en situation et une montrant l'échelle
Chaque image a un texte alternatif décrivant cette vue
Prix visible à côté du nom du produit
État du stock affiché sur chaque option avant qu'elle soit choisie
Un seul bouton d'ajout au panier clairement principal
Coût et délai de livraison affichés près du bouton
Politique de retour résumée près du bouton
Dimensions, matériaux et entretien dans des sections titrées
Questions les plus fréquentes traitées sur la page
Fonctionne à 375 px de large sans défilement horizontal
Les données structurées Product correspondent au prix et au stock visibles
Uniquement de vrais avis, s'il y en a
Checklist de fiche produit
Cochez ce que votre fiche produit fait déjà. Le score montre ce qu'il reste à corriger ; rien n'est enregistré ni envoyé nulle part.