Design de page produit PrestaShop : bonnes pratiques de conversion

Dernière révision : juin 2026, vérifié avec PrestaShop 1.7, 8 et 9. Les chemins de templates, les hooks et les emplacements du back-office ci-dessous sont à jour ; les URL produit de PrestaShop 9 n’incluent plus le chemin de catégorie par défaut, ce qui compte si vous renommez des produits (point abordé dans les sections mobile et structure de la moitié basse de page).

Votre page d’accueil attire le plus l’attention des designers, mais votre page produit attire le plus l’attention des acheteurs. C’est le dernier écran qu’un visiteur voit avant de cliquer sur "Ajouter au panier" ou de revenir en arrière, et dans la plupart des boutiques PrestaShop, c’est aussi le plus négligé, configuré une fois lors de l’installation du thème, puis plus jamais retouché. Ce guide porte sur un point précis : le design de cette page. Pas la photographie, pas la rédaction, pas le widget de confiance à acheter. Chacun de ces sujets est traité séparément ci-dessous, mais les choix de mise en page qui déterminent si un visiteur déjà intéressé par le produit peut réellement atteindre le bouton d’achat sans friction.

Ici, "design" ne veut pas dire rendre la page plus jolie. Il s’agit de l’ordre d’apparition des éléments, de ce qui se trouve au-dessus de la ligne de flottaison, de la façon dont le regard passe du prix au bouton, et des fichiers de templates ou réglages de thème PrestaShop à modifier pour changer tout cela. Si l’agencement est mauvais, même une page remplie de belles photos et de textes bien écrits convertit mal, parce que le client n’arrive jamais jusqu’à la partie qui comptait vraiment.

Ce que signifie vraiment "design de page produit" sur PrestaShop

Sur une boutique PrestaShop 1.7, 8 ou 9, la page produit est rendue par le contrôleur product et assemblée à partir de quelques templates Smarty situés dans themes/your-theme/templates/catalog/, principalement product.tpl, avec la zone d’achat à droite construite depuis des partials placés sous catalog/_partials/ (vous reconnaîtrez product-add-to-cart.tpl, product-prices.tpl, product-variants.tpl, product-flags.tpl). La disposition en deux colonnes, "images à gauche, bloc d’achat à droite", utilisée par la plupart des boutiques correspond à la mise en page par défaut du thème Classic. C’est important, car presque toute modification de design que vous voudrez faire sera soit une modification de template dans ce dossier, soit un changement de position de hook, soit un réglage dans le back-office, pas un mystère nécessitant une refonte complète.

Les hooks qui contrôlent ce qui apparaît autour du bloc d’achat principal sont ceux que vous utiliserez le plus : displayProductActions et displayProductPriceBlock se trouvent dans la zone d’achat, displayProductAdditionalInfo juste en dessous, displayProductExtraContent alimente les onglets produit inférieurs, et displayFooterProduct gère les blocs placés sous le produit. Qu’est-ce que cela implique pour vous ? Lorsque vous voulez placer un badge, une estimation de livraison ou une ligne de réassurance à un endroit précis, vous choisissez un hook, vous ne modifiez pas des fichiers de thème en espérant que la prochaine mise à jour ne les effacera pas. Un module bien conçu se greffe sur ces hooks au lieu de dupliquer votre product.tpl, et c’est exactement ce qui permet à vos changements de design de survivre aux mises à niveau.

Si vous voulez réordonner les modules qui s’affichent dans la zone d’achat plutôt que réécrire un template, le chemin le plus rapide passe par le back-office : Design → Positions liste tous les modules attachés à chaque hook et vous permet de les déplacer vers le haut ou vers le bas. C’est là que vous corrigez le problème "un module pousse mon bouton sous la ligne de flottaison" sans toucher à un seul fichier .tpl.

Le bloc d’achat au-dessus de la ligne de flottaison est la seule décision de design qui compte toujours

Tout ce dont un acheteur a besoin pour prendre sa décision doit être visible sans défilement : le nom du produit, le prix, l’image principale, le sélecteur de variantes, la ligne de stock/disponibilité et le bouton Ajouter au panier. C’est la seule règle de design qui résiste à toutes les tendances de refonte. Si un visiteur doit faire défiler une description de 500 mots pour trouver le prix, une part importante d’entre eux s’en va tout simplement, ils lisent "cette boutique me complique la vie" avant même de lire un seul mot de votre texte.

Dans le thème Classic de PrestaShop, le bloc d’achat est déjà placé en haut, mais trois problèmes le poussent souvent vers le bas ou le cassent :

• Une colonne d’images surdimensionnée. Si vos images produit sont importées avec des ratios incohérents, la colonne galerie s’allonge et repousse le bloc d’achat hors écran sur les petits ordinateurs portables. Corrigez les dimensions des images à la source, sujet traité dans la photographie produit pour l’e-commerce, et non avec des rustines CSS.
• Un mur de texte dans la description courte. PrestaShop affiche la description courte (le champ Résumé, description_short) directement dans la colonne d’achat. Limitez-la à deux ou trois lignes orientées bénéfice ; la description longue doit rester plus bas. Bien rédiger ce champ court est un véritable savoir-faire, voir comment rédiger des descriptions produit qui se positionnent et convertissent.
• Des modules empilés au-dessus du bouton. Chaque module accroché à displayProductActions ou au bloc de prix pousse le bouton vers le bas. Auditez ce qui s’exécute réellement à cet endroit.

La hiérarchie visuelle : où le regard doit se poser, dans l’ordre

Une page produit qui convertit guide le regard selon un chemin volontaire : l’image d’abord (elle confirme "oui, c’est bien ce que je cherchais"), puis le nom et le prix (les deux informations qui décident du oui ou non), ensuite la variante et la ligne de stock (puis-je obtenir celle que je veux ?), puis le bouton. Les avis, la livraison et la réassurance viennent soutenir cette colonne vertébrale, jamais lui disputer le premier regard.

L’erreur de design la plus fréquente consiste à donner aux éléments secondaires un poids visuel de premier plan. Une énorme bannière "LIVRAISON GRATUITE" au-dessus du nom du produit, un carrousel de ventes croisées très visible avant même que le client ait décidé d’acheter ce produit, une vidéo en lecture automatique qui capte toute l’attention, chacun de ces éléments détourne le regard de l’essentiel. Le test est brutalement simple : ouvrez votre page produit, regardez-la une seconde, puis détournez les yeux. Êtes-vous capable de citer le nom du produit, son prix et l’emplacement du bouton ? Sinon, votre hiérarchie se contredit elle-même.

Les choix de placement qui font vraiment bouger les conversions

La plupart du travail de design d’une page produit consiste à décider où placer une poignée d’éléments. Ces placements relèvent des templates ou des hooks, et chacun a une réponse qui fonctionne pour la majorité des boutiques :

La ligne de réassurance sous le bouton mérite une mention particulière, car c’est le gain de design le plus rentable et le plus simple de toute la page : une seule rangée indiquant la politique de retour, les moyens de paiement acceptés et un signal de sécurité, placée exactement là où le regard se trouve déjà au moment de l’hésitation. La forme visuelle de ces signaux, et la question de savoir s’ils inspirent réellement confiance ou ajoutent seulement du bruit. Est un sujet à part entière ; voir les badges de confiance et la question plus large de l’apparence de fiabilité de votre boutique.

Organiser la moitié basse : onglets ou long défilement unique

Sous le bloc d’achat se trouve la moitié détaillée de la page, description longue, caractéristiques, avis, informations de livraison. Ici, la décision de design porte sur la structure : un long défilement sans fin enterre tout ce qui se trouve après le premier écran, tandis que des onglets bien conçus permettent à un visiteur en quête de détails d’aller directement aux caractéristiques ou aux avis. Le thème Classic de PrestaShop place déjà la description et la fiche technique dans des onglets ; la question est de savoir si vous avez besoin de plus de sections (guide d’installation, garantie, tailles) que les deux onglets natifs. C’est un sujet dédié, avec son propre chemin module, onglets produit : ajouter des caractéristiques, guides et contenus personnalisés explique exactement comment ajouter des onglets personnalisés sans modifier les fichiers de thème. Si vous voulez ajouter ces sections depuis le back-office plutôt que depuis le template, notre module Product Extra Info Tabs se greffe sur displayProductExtraContent et vous permet de combiner des onglets valables pour tout le catalogue (un onglet "Livraison" partagé partout) avec des onglets propres à chaque produit, afin que la moitié basse reste organisée sans créer une copie du thème que la prochaine mise à jour effacerait.

Une règle de design vaut pour la moitié basse, quelle que soit sa structure : ne laissez pas un widget d’avis à défilement infini s’étendre indéfiniment, car il repousse votre pied de page, avec la politique de retour, les coordonnées et les signaux de confiance, définitivement hors de portée. Paginer les avis permet à la page d’avoir une fin.

Le mobile est un design différent, pas le même design réduit

Plus de la moitié du trafic des pages produit d’une boutique PrestaShop typique vient du mobile, et une mise en page efficace sur ordinateur ne fonctionne pas automatiquement sur téléphone. La disposition desktop en deux colonnes se transforme en une seule colonne empilée, et l’ordre de cet empilement devient une décision de design à prendre volontairement. Faites le bon choix et la page semble naturelle sur mobile ; faites le mauvais et le prix se retrouve sous une image plein écran, avec le bouton quelque part loin plus bas.

• Ordre d’empilement : image, nom, prix, variante, bouton, puis description. La décision d’achat doit rester accessible avec un minimum de défilement.
• Galerie balayable : la zone image doit se parcourir horizontalement au doigt, et non imposer une liste verticale de miniatures qui occupe tout l’écran avant l’apparition du prix.
• Ajouter au panier sticky : une barre fixe en bas de l’écran contenant le prix et le bouton garde l’action d’achat à portée de main, même lorsque le client descend dans les caractéristiques et les avis. C’est le modèle de design mobile au plus fort impact.
• Sections repliables : description, caractéristiques et avis sous forme d’accordéons, affichant les premières lignes avec un bouton "lire la suite", afin que la page garde une longueur raisonnable sur petit écran.

Si vous construisez vous-même la barre mobile sticky, il s’agit d’un petit bloc dans le product.tpl de votre thème enfant, qui réutilise les mêmes partials de prix et d’ajout au panier que le bloc d’achat principal affiche déjà, visible uniquement sur les petits écrans. L’objectif est de réutiliser les partials existants, pas de dupliquer le balisage, afin qu’un futur changement du bloc de prix mette les deux endroits à jour en même temps :

{* themes/your-child-theme/templates/catalog/product.tpl – sticky mobile buy bar *}
<div class="mpr-sticky-buy d-md-none">
  {block name='product_prices'}
    {include file='catalog/_partials/product-prices.tpl' product=$product}
  {/block}
  {block name='product_add_to_cart'}
    {include file='catalog/_partials/product-add-to-cart.tpl' product=$product}
  {/block}
</div>

/* custom.css – pin it to the bottom on phones only */
.mpr-sticky-buy {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 1030; background: #fff;
  padding: .5rem .75rem;
  box-shadow: 0 -2px 8px rgba(0,0,0,.08);
}

(L’utilitaire Bootstrap d-md-none la masque à partir de la largeur tablette, afin que le desktop conserve le bouton normal dans le flux.)

Les choix de design qui vous coûtent discrètement des conversions

Quelques décisions populaires de "design" jouent activement contre la page. Aucune n’est une question de goût, chacune retire une raison concrète pour laquelle un acheteur prêt à commander s’en va :

• Vidéo produit en lecture automatique. Elle ralentit la page, consomme les données mobiles et détourne la colonne vertébrale visuelle. Affichez plutôt un bouton de lecture. (Si la vidéo vend votre produit, la bonne méthode est expliquée dans l’intégration YouTube pour des vidéos produit qui vendent.)
• Pop-ups "les clients ont aussi consulté". Ils interrompent la décision au pire moment. Laissez les ventes croisées vivre sur la page, sous la ligne de flottaison, là où elles ont leur place. La stratégie correspondante est détaillée dans la vente croisée et la montée en gamme.
• Cacher le prix derrière "demander un devis". Sur une boutique B2C, cela fait partir instantanément la majorité des visiteurs. Si votre modèle l’exige réellement, affichez une fourchette pour que la page ne soit pas une impasse.
• Un champ code promo trop visible et vide. Attirer l’attention sur une zone de réduction alors que le client n’a pas de code l’envoie chercher sur Google, et certains ne reviennent jamais.

La vitesse de page est une contrainte de design, pas un détail de finition

Les pages produit sont les pages les plus lourdes d’une boutique PrestaShop, galerie, JavaScript des variantes, avis et modules de ventes croisées s’y chargent tous. Un design qui semble parfait mais met quatre secondes à s’afficher sur téléphone a déjà perdu le client dont vous avez travaillé si dur à capter l’attention. Traitez le budget de performance comme une partie du design : visez un Largest Contentful Paint inférieur à 2,5 secondes sur mobile, et tenez ce budget en chargeant paresseusement les images de ventes croisées et d’avis situées sous la ligne de flottaison, en différant les modules d’avis jusqu’à ce que le client s’en approche, en préchargeant la première image produit, et en étant strict sur le nombre de scripts tiers (chat, cartes de chaleur, analytics) que vous laissez entrer sur la page.

Comment savoir si votre design convertit vraiment

Les avis sur le design ne coûtent rien ; le seul verdict honnête vient d’un indicateur : le taux d’ajout au panier de la page, la part des visiteurs de la page produit qui ajoutent l’article au panier. Le back-office PrestaShop ne vous donnera pas directement ce chiffre : Stats → Meilleures ventes vous fournit les quantités vendues et les vues par produit (un proxy utile du vendu par vue), et la liste Commandes → Paniers montre les paniers au moment où ils se créent, mais le taux réel d’ajout au panier vient de votre outil d’analytics. Quelle que soit la source utilisée, la discipline consiste à changer une seule chose à la fois, déplacer la ligne de réassurance, raccourcir la description courte, corriger l’ordre d’empilement mobile, puis à suivre le même indicateur sur un volume de trafic suffisant pour observer une vraie tendance, et non du bruit d’une semaine à l’autre. Une modification de mise en page qui "semble meilleure" mais ne fait bouger aucun chiffre n’est qu’un déplacement de mobilier.

Une page produit PrestaShop à fort taux de conversion n’est pas une page plus jolie, c’est une page où la colonne vertébrale (image, nom, prix, variante, bouton) se saisit d’un coup d’œil, où les signaux de soutien se trouvent exactement là où le regard en a besoin, où l’empilement mobile est conçu pour le mobile au lieu d’être hérité du desktop, et où l’ensemble s’affiche vite. Mettez cette architecture en place, et les photos, les textes et les widgets de confiance que vous ajouterez ensuite travailleront mieux, parce que le client pourra enfin les voir.

Questions fréquentes

Dois-je modifier product.tpl directement pour changer la mise en page de ma page produit ?

Uniquement dans un thème enfant, et seulement lorsqu’un hook ou un réglage du back-office ne peut pas faire le travail. Modifier directement le product.tpl du thème parent signifie que la prochaine mise à jour du thème écrasera votre travail. L’ordre le plus propre est le suivant : essayez d’abord Design → Positions pour réordonner les modules accrochés, puis un module attaché au bon hook, et seulement ensuite une surcharge de template placée dans themes/your-child-theme/templates/catalog/ afin qu’elle survive aux mises à jour.

Où la description courte apparaît-elle réellement sur la page produit ?

Le champ Résumé (description_short) s’affiche dans la colonne d’achat près du prix, au-dessus de la ligne de flottaison, pas dans les onglets inférieurs. C’est précisément pour cela qu’il doit rester court : deux ou trois lignes de bénéfices. La Description complète s’affiche plus bas, généralement dans un onglet. Coller le même long texte dans les deux champs est la cause la plus fréquente d’un bloc d’achat repoussé hors écran.

Pourquoi un module se trouve-t-il au-dessus de mon bouton Ajouter au panier, et comment le déplacer ?

Il est accroché à displayProductActions ou displayProductPriceBlock, qui s’affichent dans la zone d’achat. Allez dans Design → Positions, trouvez ce hook, puis faites glisser le module sous ceux qui doivent passer en premier, ou décrochez-le s’il n’a rien à faire au-dessus du bouton. Aucune modification de template n’est nécessaire.

PrestaShop propose-t-il une barre mobile Ajouter au panier sticky intégrée ?

Le thème Classic n’en fournit pas par défaut. Vous l’ajoutez soit via un module accroché à la page produit, soit avec un petit bloc dans le thème enfant qui réutilise les partials existants de prix et d’ajout au panier (montrés plus haut), afin de ne pas dupliquer le balisage. C’est le changement mobile au plus fort impact sur la page, donc cela vaut la peine de le faire correctement plutôt qu’avec un bouton copié-collé.

Sur PrestaShop 9, l’URL produit a-t-elle changé d’une façon qui affecte mon travail de design ?

Oui, PrestaShop 9 retire la catégorie de l’URL produit par défaut, de sorte que le slug est généré à partir du seul nom du produit. Cela ne change pas la mise en page, mais cela signifie que renommer un produit peut régénérer l’URL simplifiée et casser les liens entrants si aucune redirection n’est en place. Si vous devez maintenir la structure canonique et les redirections pendant une migration, un outil dédié comme notre module SEO Revolution garde le slug et la gestion des redirections sous contrôle, afin qu’un renommage ne vous coûte pas discrètement du positionnement.