Page produit Shopify : ce que le design doit montrer

L'essentiel

La page produit sur Shopify est l'écran de la boutique où le client décide s'il achète : elle doit montrer le produit réel, laisser choisir la variante sans erreur, dire combien cela va coûter au total et retirer la peur d'acheter à quelqu'un qu'il ne connaît pas. Presque tout cela existe déjà dans le thème. Ce que je vois le plus souvent manquer, quand je dessine cette page, c'est l'ordre et la priorité. La recherche de Baymard montre que plus de la moitié des gens commencent par les photos, et qu'un coût supplémentaire inattendu est le motif le plus cité d'abandon de panier. Le design commence donc par la galerie et finit au bloc d'achat, avec la livraison, l'échange et le délai en vue. Ci-dessous, ce que chaque partie de la page doit avoir, pourquoi, et comment le monter dans le thème sans dépendre d'une application pour tout.

1. L'ordre dans lequel le client regarde la page

Quelqu'un qui arrive sur une page produit ne lit pas de haut en bas. Dans les tests d'utilisabilité de Baymard, 56% des participants ont commencé par explorer les images, avant de lire le titre ou la description. Après la photo, la personne cherche trois choses : si la variante qu'elle veut existe, combien elle va payer à la fin et ce qui se passe si cela tourne mal.

Cela change la façon de dessiner. Le haut de la page, la partie qui apparaît sans défiler, doit avoir la galerie, le nom, le prix, le choix de variante et le bouton d'achat. Tout ce qui aide à décider (livraison, échange, avis) reste collé au bouton, pas dans le pied de page. Le reste (histoire de la marque, produits liés, texte long) vient après.

Quand je dessine une page produit, j'utilise une question simple pour chaque bloc : est-ce que cela aide la personne à décider maintenant ? Si oui, cela monte. Si c'est joli mais que cela ne décide rien, cela descend ou cela sort.

Si vous montez la boutique à partir de zéro, la page sur la création et le réglage de boutiques Shopify montre comment ce travail entre dans le projet entier, avec le thème, le catalogue et le checkout.

Ce que Baymard a trouvé dans les grandes boutiques

L'évaluation des pages produit de Baymard, mise à jour en mars 2026, a évalué de grandes boutiques des États-Unis et d'Europe. Seules 48% d'entre elles ont une page produit considérée comme correcte ou meilleure sur ordinateur. Sur mobile, le nombre tombe à 38%. Une grande boutique, avec une équipe d'expérience utilisateur, se trompe encore là-dessus. Une petite boutique, avec un thème installé et jamais revu, répète en général le même type d'erreur. La bonne nouvelle, c'est qu'une bonne part des erreurs relève du design et du contenu, pas de la technologie.

2. Galerie de photos : ce qu'il faut avoir

La galerie est la partie la plus vue et celle qui vend le plus. Une belle photo ne suffit pas : chaque photo doit répondre à une question. Une galerie qui fonctionne a au moins ces types d'image :

• Photo principale nette : le produit entier, fond neutre, bien éclairé. C'est celle qui apparaît dans la collection et dans le panier.
• Photo à l'échelle : le produit à côté d'une main, d'une personne ou d'un objet connu. Dans la recherche de Baymard, 42% des gens essaient de comprendre la taille par les photos, et 37% des grandes boutiques n'ont toujours pas cette image.
• Photo avec modèle : pour le vêtement, l'accessoire et tout ce qui se porte sur le corps. 23% des boutiques évaluées n'en ont pas.
• Détail : couture, texture, ajustement, étiquette. C'est ici que le zoom doit fonctionner.
• Photo explicative : l'image avec une flèche, une mesure ou une phrase courte qui souligne ce qui compte. 52% des sites n'utilisent pas ce type de photo, même sur les produits les plus vendus.
• Vidéo courte : quand le produit a du mouvement, un montage ou un tombé.

Taille et format sur Shopify

Shopify accepte une image, une vidéo, un modèle 3D et une vidéo YouTube ou Vimeo sur le produit. Pour la photo, la recommandation officielle est le carré de 2048 x 2048 px, la taille que le centre d'aide désigne comme celle qui s'affiche en général le mieux. Garder toutes les photos dans la même proportion évite que la galerie saute en hauteur quand le client change d'image, un petit défaut qui donne l'impression d'une boutique mal faite.

Miniatures sur mobile

Sur mobile, beaucoup de boutiques ne montrent que des points sous la photo pour indiquer qu'il en existe d'autres. Baymard a vu que seuls 24% des sites mobiles utilisent des miniatures, et que, quand le site n'a utilisé que des indicateurs, la moitié des utilisateurs d'ordinateur a eu du mal à trouver les autres photos. La miniature montre ce qui vient ensuite : la personne voit qu'une photo avec modèle existe et y va directement. Vérifiez dans les options de la section produit de votre thème si la galerie peut montrer des miniatures avant de penser au code.

Le texte alternatif n'est pas un détail

Chaque photo a besoin d'un texte alternatif. Shopify explique qu'il est utilisé par les technologies d'assistance pour décrire l'image aux personnes malvoyantes, et qu'il aide aussi le SEO. La limite est de 512 caractères, mais la recommandation est de rester à 125 ou moins. Écrivez ce que la photo montre, pas un mot-clé répété : « Baskets blanches en cuir vues de côté, semelle en caoutchouc beige » fonctionne ; « baskets blanches baskets cuir acheter baskets » non.

3. Variantes : laissez le choix visible

La couleur, la taille, le voltage et le parfum sont des variantes. Elles ont l'air simples, mais c'est ici que beaucoup de ventes se bloquent : la personne ne voit pas que sa taille existe, choisit mal ou ne comprend pas pourquoi le bouton d'achat a disparu.

L'évaluation Baymard de 2026 montre que 57% des grandes boutiques n'utilisent toujours pas de boutons pour choisir la taille. Une liste déroulante cache les options : le client doit toucher, ouvrir, faire défiler et fermer pour découvrir ce qui existe. Le bouton montre tout d'un coup et rend clair ce qui est épuisé.

Au moment de dessiner, suivez ces règles :

• Bouton pour peu d'options, liste seulement pour beaucoup. Les tailles de P à GG et trois couleurs tiennent sur des boutons. Une très longue liste de pointures, peut-être pas.
• Couleur avec une pastille, pas avec un nom. « Sable » et « beige » embrouillent beaucoup de gens. La pastille règle cela, et la photo de la galerie doit changer en même temps que la couleur.
• Épuisé apparaît barré ou atténué, il ne disparaît pas. Si la taille sort de l'écran, la personne croit que la boutique ne la travaille pas. Si elle apparaît barrée, elle comprend que c'est fini et peut demander un avis de réassort.
• Tableau des mesures près du sélecteur. Un lien « voir les mesures » à côté de la taille, qui ouvre une fenêtre ou une section juste en dessous. Caché dans le pied de page, il n'est pas utilisé.
• État sélectionné avec du contraste. Bordure épaisse ou fond rempli. Une différence subtile de gris ne sert pas, surtout au soleil, sur le téléphone.

La variante change aussi le prix. Si la taille plus grande coûte plus cher, le prix de la page doit changer au moment où le client choisit, sans recharger et sans attendre le panier pour montrer la différence.

4. Prix, livraison et coût total près du bouton

C'est la partie qui pèse le plus sur la vente et celle que le plus de boutiques laissent pour plus tard. Dans la liste des motifs d'abandon de panier de Baymard, sans compter ceux qui ne faisaient que regarder, 40% des gens ont abandonné à cause d'un coût supplémentaire élevé (livraison, frais) et 12% parce qu'ils ne pouvaient pas voir ou calculer le coût total avant. La moyenne documentée d'abandon de panier, en réunissant 50 études, est de 70,22%.

Le problème est rarement la livraison en soi. C'est la surprise. Si la personne découvre les frais de livraison seulement au checkout, elle sent que la boutique a caché le montant, même quand il est juste. Et 67% des grandes boutiques évaluées en 2026 ne montrent toujours pas une estimation du coût total près du bouton d'achat.

Le bloc d'achat idéal

Autour du bouton « Acheter » ou « Ajouter au panier », le client devrait trouver, sans défiler :

1. Le prix mis en avant, et le prix précédent barré seulement quand la promotion est réelle.
2. Le moyen de paiement en résumé, comme « Pix, carte et boleto », avec la condition de paiement en plusieurs fois que la boutique offre vraiment.
3. La livraison ou un chemin court pour la calculer : un champ de CEP ou la règle de livraison offerte écrite de façon directe (« livraison offerte au-dessus de R$ X pour tout le Brésil », si c'est le cas de votre boutique).
4. Le délai de livraison ou d'expédition, même approximatif.
5. Un lien vers l'échange et le retour, sur une ligne.

Si votre thème n'a pas de champ de calcul des frais de livraison sur la page produit, il peut entrer par une application ou par un réglage du thème. Avant d'installer quoi que ce soit, décidez le message : parfois une phrase claire sur la règle de livraison résout plus qu'une calculatrice.

Le bouton

Un seul bouton, avec une couleur propre, qui n'apparaît nulle part ailleurs sur la page. Si « Acheter » et « Voir plus » ont la même couleur, l'œil ne sait pas où aller. Sur mobile, une barre fixe en bas avec le prix et le bouton vaut le coup quand la personne défile pour lire la description, pour que la décision ne dépende pas d'un retour en haut.

Après le bouton vient le checkout, et là les choix sont autres. Si votre question est de remplacer le checkout Shopify par un checkout externe, l'article sur le checkout Shopify au Brésil : natif, Yampi ou Cartpanda montre ce qui pèse dans cette décision.

Si la page produit de votre boutique ne répond pas à ces questions dans cet ordre, envoyez la plateforme actuelle, le forfait et l'URL. Si vous n'avez pas encore créé la boutique Shopify, parlez-moi avant de la créer : la boutique naît en boutique de développement, est montée prête à l'emploi et transférée à votre nom.

Parler du projet

5. Confiance : échange, avis et qui est la boutique

Dans la même recherche d'abandon, 19% des gens ont renoncé parce qu'ils ne faisaient pas confiance au site avec la carte de crédit, et 13% à cause d'une mauvaise politique de retour. La confiance est aussi du design : elle apparaît dans des détails que le client cherche avant de payer une boutique qu'il ne connaît pas.

Politique d'échange en vue

L'évaluation 2026 de Baymard montre que 44% des grandes boutiques ne montrent ni ne lient la politique de retour dans le contenu principal de la page produit. C'est un lien d'une ligne. Mieux encore : une phrase avec la règle (« échange jusqu'à X jours, premier échange offert »), écrite selon ce que la boutique pratique vraiment, et le lien vers la politique complète.

Avis

L'avis client est une preuve sociale, mais il ne fonctionne que s'il est réel et s'il est près de la décision. Deux soins de design :

• Note et quantité près du titre, avec un lien qui descend jusqu'aux avis.
• Photo de client que l'on peut parcourir, quand elle existe. Pour le vêtement et le produit à taille, la photo de celui qui a acheté répond à une question que la photo de studio ne répond pas.

Répondre à un avis négatif avec politesse compte aussi. Celui qui lit voit qu'il y a des gens de l'autre côté.

Signes que la boutique existe

CNPJ dans le pied de page, canal de service visible, page « À propos » avec de vraies personnes et domaine propre. Un sceau de sécurité générique, dessiné dans Canva, pèse moins qu'il n'y paraît ; ce qui pèse, c'est que la boutique ait l'air soignée dans tous les détails. Une photo de travers, un texte avec une erreur et un prix différent entre la page et le panier font tomber la confiance plus vite que n'importe quel sceau ne la relève.

6. Description et spécifications : un texte que l'on peut parcourir

Après la photo et le prix, une partie des gens descend pour lire. Ils ne lisent pas tout : ils cherchent la réponse à une question précise (matière, mesure, voltage, comment laver, ce qui est dans la boîte). Le design de la description doit rendre cette recherche rapide.

• Premier paragraphe court, avec le bénéfice principal. Deux ou trois phrases qui disent à qui s'adresse le produit et ce qu'il résout.
• Spécifications en liste ou en tableau, pas cachées au milieu du texte. Mesures, poids, matière et composition sur des lignes séparées.
• Onglets et accordéons avec soin. Ils organisent, mais ils cachent. Si l'information décide l'achat (mesure, délai, échange), elle ne devrait pas rester fermée.
• Ce qui est dans la boîte, quand le produit a des parties ou des accessoires.

Metafields : la même structure sur tous les produits

Sur Shopify, les metafields permettent de garder l'information propre du produit, comme la composition, les mesures ou les instructions d'entretien, dans des champs séparés de la description. Dans les thèmes avec des sources dynamiques, ces champs peuvent être reliés au thème par l'éditeur. Dans la pratique du design, cela veut dire que la fiche technique apparaît au même endroit et avec le même visuel sur tous les produits, sans dépendre de quelqu'un qui met en forme la description à la main à chaque fiche.

7. Lecture, contraste et vitesse

Une page jolie que personne n'arrive à lire sur le téléphone, ou qui tarde à montrer la photo principale, perd la vente avant que le client n'arrive au bouton.

Contraste et taille du texte

Le critère 1.4.3 des WCAG, la référence d'accessibilité du W3C, demande un contraste d'au moins 4.5:1 pour le texte normal et de 3:1 pour le grand texte (à partir de 18 points, ou de 14 points en gras). Sur la page produit, les points qui échouent le plus sont le prix en gris clair, le texte sur la photo et le bouton de couleur claire avec un texte blanc. Testez les couleurs de la marque dans un outil de contraste avant de les appliquer au thème. Si la couleur principale de la marque ne passe pas avec un texte blanc, utilisez un texte foncé sur le bouton ou assombrissez le ton seulement pour cet usage.

La photo principale est la métrique de vitesse

La photo principale doit apparaître vite. Google mesure cela par le temps jusqu'à ce que le plus grand morceau visible de la page apparaisse. La cible considérée comme bonne est de 2,5 secondes ou moins, au 75e percentile des visites. Sur la page produit, ce morceau est presque toujours la photo principale. Une image, une affiche de vidéo et une image de fond entrent aussi dans ce compte.

Pour le designer, cela devient trois décisions : une photo à la taille que Shopify recommande, sans envoyer un fichier géant « pour garantir la qualité » ; une vidéo qui ne se lance pas toute seule en haut de la page ; et pas de carrousel automatique de bannières au-dessus de la galerie.

8. Comment monter la page produit dans le thème Shopify

Presque tout dans cet article se règle dans l'éditeur de thème, sans programmer. Le chemin que je suis :

1. Dessinez la page avant d'ouvrir l'éditeur. Une esquisse sur papier ou dans Figma avec l'ordre des blocs : galerie, titre, avis, prix, variante, bloc d'achat avec livraison et échange, description, spécifications, avis, produits liés.
2. Montez le modèle de produit par défaut avec cet ordre dans les sections et les blocs du thème.
3. Créez des modèles différents quand la famille de produits le demande. Shopify permet plusieurs modèles de produit et de les attribuer aux produits un par un ou en masse, avec une limite de 1000 modèles au total. Le vêtement a besoin d'un tableau de mesures en vue ; un accessoire, non.
4. Standardisez les photos et le texte alternatif avant de monter le catalogue. Corriger après, produit par produit, coûte beaucoup plus de temps.
5. Reliez les spécifications aux metafields pour que la fiche technique ait le même visuel sur tous les produits.
6. Vérifiez les données structurées. Avec des données structurées de produit, Google peut montrer dans la recherche le prix, la disponibilité, les avis, la livraison et la politique de retour. Vérifiez avec le test des résultats enrichis de Google si le thème génère déjà ce balisage et si le prix et la disponibilité apparaissent correctement.

Liste de relecture avant de publier

L'article sur Nuvemshop ou Shopify : coût total sur 12 mois aide si vous décidez encore de la plateforme avant de penser à la mise en page.

Questions fréquentes

Combien de photos une page produit doit-elle avoir ?

Il n'existe pas de nombre fixe. Ce qui compte, c'est que chaque photo réponde à une question : la photo principale nette, une à l'échelle, une avec modèle quand le produit se porte sur le corps, des détails et, si cela a du sens, une photo explicative. Pour un produit simple, peu de photos bien choisies peuvent suffire.

Quelle est la taille idéale d'une photo produit sur Shopify ?

Le centre d'aide Shopify recommande le carré de 2048 x 2048 px. La limite est de 5000 x 5000 px (25 mégapixels) et de moins de 20 MB par fichier. Garder toutes les photos dans la même proportion laisse la galerie stable.

Faut-il une application pour montrer la livraison sur la page produit ?

Cela dépend du thème et de la règle de livraison de la boutique. Si la règle est simple, une phrase claire près du bouton peut suffire. Si les frais varient beaucoup selon la région, un champ de CEP aide, et il peut venir d'une application ou d'un réglage du thème.

Faut-il une liste déroulante ou des boutons pour la variante ?

Des boutons, chaque fois que les options tiennent à l'écran. Baymard montre que 57% des grandes boutiques n'utilisent toujours pas de boutons pour la taille, et la liste déroulante cache quelles options existent et lesquelles sont épuisées.

Le thème gratuit de Shopify suffit-il pour une bonne page produit ?

Il sert de point de départ. La plus grande part de ce qui fait vendre la page, c'est le contenu et l'ordre : les bonnes photos, une variante claire, le coût en vue et l'échange expliqué. Un thème payant aide quand la boutique a besoin de fonctions que le gratuit n'a pas, pas pour résoudre un manque de contenu.

Conclusion

La page produit qui vend répond, dans le bon ordre, aux questions que le client se pose : à quoi ressemble le produit, si sa variante existe, combien cela va coûter au total et ce qui se passe si cela tourne mal. Sur Shopify, presque tout cela se monte dans l'éditeur de thème, avec des photos standardisées, des boutons de variante, un bloc d'achat complet et la fiche technique en metafields. Si votre boutique tourne déjà sur Shopify et que vous voulez une relecture de la page produit, ou si vous allez encore ouvrir la boutique, envoyez l'URL d'un produit et ce que vous vendez. Voyez d'abord comment fonctionne la création et le réglage de boutiques Shopify. Si vous n'avez pas encore créé la boutique Shopify, parlez-moi avant de la créer : la boutique naît en boutique de développement, est montée prête à l'emploi et transférée à votre nom.

Parler du projet