Fiche produit Prestashop

Prestashop 1.7 – La fiche produit (ép.8)

Cette semaine on survole la nouvelle fiche produit de Prestashop 1.7, comme c’est un élément incontournable pour tout acheteur, on va tenter de faire au mieux pour maximiser les chances de convertir.

Episode 8

L’optimisation « esthétique » d’une fiche produit va bien sûr varier d’une personne à l’autre, car chacun a ses goûts en terme de design. Pourtant, après avoir vu la fiche produit par défaut de Prestashop, il y’a quand même des éléments qui ont attiré mon attention.

Le plus grand mystère c’est bien sûr le texte par défaut sur un fond gris, alors que les autres éléments sont encapsulés dans des blocs, on va donc chercher ensemble à rendre la description courte plus visible pour les acheteurs. Avec mon optique, j’essaie aussi de viser une simplification de la fiche produit, car il faut éviter d’activer des éléments superflus, le consommateur ne doit pas être distrait de son objectif premier « acheter ».

Les recommandations que je propose ne sont pas une science exacte, ce sont des éléments que je suggère d’optimiser pour une meilleure compréhension surtout qu’elles sont rapides à mettre en place et ne nécessitent pas une opération « trop chirurgical » du code.

A mon sens le bloc « ré-assurance » client pourrait-être même désactivé pour encore plus de clarté, mais j’ai oublié de le préciser dans la vidéo. A présent c’est à vous de passer à l’action !

Ressources

Pour ce tutoriel vous avez à disposition :

  • Fichier product.tpl (révision fiche produit)
  • Fichier theme.css.txt (extrait règle CSS)
  • Fichier icon.psd (exemple d’icône ré-assurance)

Télécharger

Au programme

  • Encapsulez la partie description de votre fiche produit, dans un nouveau bloc. Vous assurerez une meilleure lisibilité du contenu.
  • Retirez le bloc des réseaux sociaux.
  • Déplacez le HOOK de ré-assurance client et donnez priorité à la description. Cette manière évite la redondance / lassitude d’affichage.
  • Configuration du module ré-assurance client & remarques.
  • Optimisation sur la taille du logo des fabricants.
  • N’oubliez pas les conventions de base d’une bonne fiche produit :
    – de jolies photos (uniques)
    – des descriptions assez longues (250 mots uniques)
  • Fiche produit 1.7 VS 1.6, qui est le grand gagnant ?

Notez mon billet, Google va adorer :
1 étoiles - J'aime pas !2 étoiles - Bof !3 étoiles - Bien !4 étoiles - Très bien !5 étoiles - Génial ! (8 votes, moyenne : 5,00 sur 5)
Loading...

22 commentaires sur “Prestashop 1.7 – La fiche produit (ép.8)”

  1. Bonjour,
    merci pour tous ces tutos. Ils sont excellents. Petite question :
    j’ai modifié la fiche produit comme sur la vidéo, j’ai par contre un petit soucis d’affichage avec le bloc remise sur quantités qui dépasse du fond blanc, uniquement sur mobile et tablette verticale…
    J’ai pas mal cherché mais je ne trouve pas ce qui cloche.

    Auriez-vous une idée svp ?
    Merci beaucoup.
    Bonne journée.

    1. Bonjour,

      Pour ce type de demande, il faut regarder cela avec un intégrateur CSS Prestashop, car actuellement je ne peux pas proposer une solution personnalisée à chacun concernant les problèmes d’intégration.

      Merci pour votre commentaire !

  2. Salut et merci pour toutes ces vidéos qui sont vraiment utiles.
    Il me semble que ce tuto ne fonctionne plus dans l’actuelle version de prestashop 1.7.1.2
    Dans votre vidéo le fichier theme.css est vide, alors qu’actuellement il fait 176ko.
    J’ai essayé d’inclure le code en début et à la fin, mais ca ne fonctionne pas.
    Alors c’est peut être un problème de position du code…
    Si vous avez une idée je suis preneur.
    Merci

    1. Bonjour,

      Vous pouvez essayer d’ajouter les nouvelles règles dans le fichier « custom.css » du même dossier, ensuite il est important de désactiver tous les caches de Prestashop et de bien vider aussi le cache du navigateur pour que les changements soient pris en compte.

      Merci pour votre visite !

  3. Bonjour,

    Je cherche comment supprimer la limitation à 6 000 caractère du champs Description dans la fiche produit d’un PS 1.7.2.2.
    Pouvez m’aider ?

    Merci de votre retour.

    Stéphane.

  4. Réponse
    le fichier a modifié se trouve : src/PrestaShopBundle/Form/Admin/Product/ProductInformation.php
    Modifier les deux valeurs 6 000 ligne 161 et 165 à la valeur désirée.

  5. Bonjour,

    Merci pour ce tuto.
    Cependant j’ai un petit soucis lorsque j’utilise le code div id=encaps.
    J’ai l’impression que cela transforme tout mon texte en majuscule. J’ai fait plusieurs fois l’essai avec ou sans le code et quand je désactive l’encapsulage. Mon texte est de nouveau en minuscule. Avez-vous une idée pour résoudre ce soucis ?

    Merci à vous

  6. Bonjour, merci pour ces vidéos !
    J’ai une petite question, sur la fiche produit la mention TTC ou HT apparait en dessous du prix en petit.
    Est-il possible de la faire apparaitre après le prix « 30€ HT ou 30€ TTC » ? Si oui comment faire s’il vous plait ?
    J’ai cherché dans le fichier product.tpl et product-prices.tpl mais impossible de trouver la « variable » correspondante.
    (de la même manière j’aimerai que la mention HT ou TTC apparaisse sur les produits de la page d’accueil, populaire, nouveauté etc…)
    Merci bonne journée

    1. Bonjour,

      A première vue cette mention ne semble pas figurer sur la configuration standard de Prestashop. Je ne peux pas apporter une réponse précise sur ce point… cela demande de faire un tour dans le template et de procéder à des tests.

      A bientôt

      1. bonjour, merci pour la réponse.
        Il s’agit du thème par défaut de prestashop « classics » auquel je fais allusion.
        C’est vraiment étrange cette mention placée ici sur la fiche produit.

        Bonne journée merci

  7. Bonjour,

    Je découvre vos vidéos les unes après les autres et que dire…. à par un grand merci !!!! 🙂
    Les explications sont tops !!!
    En fait je me posais juste une question.
    J’ai acheté un thème et j’ai crée un thème enfant pour remanier le css à ma sauce.
    Pour ce fichier product.tpl (et les autres .tpl qui peuvent être amenés à être modifiés), il faut bien recréer les répertoires dans le thème enfant et non dans le thème parent ?

    Encore merci pour tout, je suis ravie, je pense que sans vos vidéos j’aurai abandonné plus d’une fois ^^

    1. Bonjour,

      Pour le moment je n’ai pas utilisé la notion du thème enfant (en production), car je ne pratique pas la mise à jour de template, je fais une refonte après X années. Les thèmes enfants c’est encore un peu nouveau, me semble qu’il y’avait quelques soucis quand j’avais fait des tests.

      A bientôt !

  8. Bonjour, tout d’abord merci pour ces vidéos très instructives pour un novice tel que moi !
    Je tente de modifier la taille des icônes du block reassurance mais sans succès … J’ai utiliser ce code dans custom.ss et theme.css malheureusement rien ne bouge :
    #block-reassurance. block-reassurance-item img{height:80px;}
    Suis- je sur la bonne piste ?
    Merci

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *