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 ! (14 votes, moyenne : 4,93 sur 5)
Loading...

42 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

    1. Bonjour Emilie,
      Je me retrouve avec le même problème que vous concernant la mise en majuscule systématique.
      Avez-vous trouvé une solution à ce problème ?
      Franck

  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

  9. Bonjour,

    Merci pour ce tuto,
    Il me semble que tu avait fait un tuto pour que l’onglet détails du produits soit fusionné avec l’onglet description, mais je ne le trouve plus, je souhaite que les détails soient sur la même page. Comment faire ?
    Merci d’avance,
    Yannick

      1. Merci, j’avais déjà incorporé cette modification, mais dans mes articles, il y a des éléments importants dans les données techniques, qui sont donc peu visibles actuellement, et les mettre sous la description donnerait aussi plus de consistance à la fiche article, j’ai fait des tests, mais pas très concluants pour l’instant…

  10. J’ai réussi, voici mon product.tpl :

    {**
    * 2007-2017 PrestaShop
    *
    * NOTICE OF LICENSE
    *
    * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
    * that is bundled with this package in the file LICENSE.txt.
    * It is also available through the world-wide-web at this URL:
    * https://opensource.org/licenses/AFL-3.0
    * If you did not receive a copy of the license and are unable to
    * obtain it through the world-wide-web, please send an email
    * to license@prestashop.com so we can send you a copy immediately.
    *
    * DISCLAIMER
    *
    * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
    * versions in the future. If you wish to customize PrestaShop for your
    * needs please refer to http://www.prestashop.com for more information.
    *
    * @author PrestaShop SA
    * @copyright 2007-2017 PrestaShop SA
    * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
    * International Registered Trademark & Property of PrestaShop SA
    *}
    {extends file=$layout}
    
    {block name=’head_seo’ prepend}
    
    {/block}
    
    {block name=’head’ append}
    
    {if isset($product.weight) && ($product.weight != 0)}
    
    {/if}
    {/block}
    
    {block name=’content’}
    
    {block name=’page_content_container’}
    
    {block name=’page_content’}
    {block name=’product_flags’}
    
    {foreach from=$product.flags item=flag}
    {$flag.label}
    {/foreach}
    
    {/block}
    
    {block name=’product_cover_thumbnails’}
    {include file=’catalog/_partials/product-cover-thumbnails.tpl’}
    {/block}
    
    
    
    
    {/block}
    
    {/block}
    
    {* Webbax – start *}
    
    {block name=’page_header_container’}
    {block name=’page_header’}
    {block name=’page_title’}{$product.name}{/block}
    {/block}
    {/block}
    {block name=’product_prices’}
    {include file=’catalog/_partials/product-prices.tpl’}
    {/block}
    
    {block name=’product_description_short’}
    {$product.description_short nofilter}
    {/block}
    
    {if $product.is_customizable && count($product.customizations.fields)}
    {block name=’product_customization’}
    {include file= »catalog/_partials/product-customization.tpl » customizations=$product.customizations}
    {/block}
    {/if}
    
    {block name=’product_buy’}
    
    {block name=’product_variants’}
    {include file=’catalog/_partials/product-variants.tpl’}
    {/block}
    
    {block name=’product_pack’}
    {if $packItems}
    
    {l s=’This pack contains’ d=’Shop.Theme.Catalog’}
    {foreach from=$packItems item= »product_pack »}
    {block name=’product_miniature’}
    {include file=’catalog/_partials/miniatures/pack-product.tpl’ product=$product_pack}
    {/block}
    {/foreach}
    
    {/if}
    {/block}
    
    {block name=’product_discounts’}
    {include file=’catalog/_partials/product-discounts.tpl’}
    {/block}
    
    {block name=’product_add_to_cart’}
    {include file=’catalog/_partials/product-add-to-cart.tpl’}
    {/block}
    
    {block name=’product_additional_info’}
    {include file=’catalog/_partials/product-additional-info.tpl’}
    {/block}
    
    {block name=’product_refresh’}
    
    {/block}
    
    {/block}
    
    {* Webbax – end *}
    
    {*block name=’hook_display_reassurance’*}
    {*hook h=’displayReassurance’*}
    {*/block*}
    {block name=’product_tabs’}
    
    {if $product.description}
    
    {l s=’Description’ d=’Shop.Theme.Catalog’}
    
    {/if}
    {**}
    {*{l s=’Product Details’ d=’Shop.Theme.Catalog’}*}
    {**}
    {if $product.attachments}
    
    {l s=’Attachments’ d=’Shop.Theme.Catalog’}
    
    {/if}
    {foreach from=$product.extraContent item=extra key=extraKey}
    
    {$extra.title}
    
    {/foreach}
    
    {block name=’product_description’}
    {$product.description nofilter}
    {/block}
    {*start détails dans la description*}
    {block name=’product_reference’}
    {if isset($product_manufacturer->id)}
    
    {if isset($manufacturer_image_url)}
    
    name} »>
    
    {else}
    {l s=’Brand’ d=’Shop.Theme.Catalog’}
    
    {$product_manufacturer->name}
    
    {/if}
    
    {/if}
    {if isset($product.reference_to_display)}
    
    {l s=’Reference’ d=’Shop.Theme.Catalog’}
    {$product.reference_to_display}
    
    {/if}
    {/block}
    
    {block name=’product_quantities’}
    {if $product.show_quantities}
    
    {l s=’In stock’ d=’Shop.Theme.Catalog’}
    {$product.quantity} {$product.quantity_label}
    
    {/if}
    {/block}
    
    {block name=’product_availability_date’}
    {if $product.availability_date}
    
    {l s=’Availability date:’ d=’Shop.Theme.Catalog’}
    {$product.availability_date}
    
    {/if}
    {/block}
    
    {block name=’product_out_of_stock’}
    
    {hook h=’actionProductOutOfStock’ product=$product}
    
    {/block}
    
    {block name=’product_features’}
    {if $product.grouped_features}
    
    {l s=’Data sheet’ d=’Shop.Theme.Catalog’}
    
    {foreach from=$product.grouped_features item=feature}
    {$feature.name}
    {$feature.value|escape:’htmlall’|nl2br nofilter}
    {/foreach}
    
    {/if}
    {/block}
    
    {* if product have specific references, a table will be added to product details section *}
    {block name=’product_specific_references’}
    {if isset($product.specific_references)}
    
    {l s=’Specific References’ d=’Shop.Theme.Catalog’}
    
    {foreach from=$product.specific_references item=reference key=key}
    {$key}
    {$reference}
    {/foreach}
    
    {/if}
    {/block}
    
    {block name=’product_condition’}
    {if $product.condition}
    
    {l s=’Condition’ d=’Shop.Theme.Catalog’}
    
    {$product.condition.label}
    
    {/if}
    {/block}
    {*end détails dans la description*}
    
    {block name=’product_details’}
    {include file=’catalog/_partials/product-details.tpl’}
    {/block}
    
    {block name=’product_attachments’}
    {if $product.attachments}
    
    {l s=’Download’ d=’Shop.Theme.Actions’}
    {foreach from=$product.attachments item=attachment}
    
    $attachment.id_attachment]} »>{$attachment.name}
    {$attachment.description}</p
    $attachment.id_attachment]} »>
    {l s=’Download’ d=’Shop.Theme.Actions’} ({$attachment.file_size_formatted})
    
    {/foreach}
    
    {/if}
    {/block}
    
    {foreach from=$product.extraContent item=extra key=extraKey}
    $val} {$key}= »{$val} »{/foreach}>
    {$extra.content nofilter}
    
    {/foreach}
    
    {/block}
    
    {* Webbax – move hook bottom *}
    {block name=’hook_display_reassurance’}
    {hook h=’displayReassurance’}
    {/block}
    
    {block name=’product_accessories’}
    {if $accessories}
    
    {l s=’You might also like’ d=’Shop.Theme.Catalog’}
    
    {foreach from=$accessories item= »product_accessory »}
    {block name=’product_miniature’}
    {include file=’catalog/_partials/miniatures/product.tpl’ product=$product_accessory}
    {/block}
    {/foreach}
    
    {/if}
    {/block}
    
    {block name=’product_footer’}
    {hook h=’displayFooterProduct’ product=$product category=$category}
    {/block}
    
    {block name=’product_images_modal’}
    {include file=’catalog/_partials/product-images-modal.tpl’}
    {/block}
    
    {block name=’page_footer_container’}
    
    {block name=’page_footer’}
    
    {/block}
    
    {/block}
    
    {/block}
    
  11. Bonjour,

    je rencontre un soucis que je n’arrive pour le moment pas à résoudre, peut-être avez-vous une idée.
    mes clientes ont la possibilité de personnaliser leur produit, et donc je leur demande d’insérer leur texte grâce au champ personnalisation.
    seulement le tunnel est compliqué, il faut d’abord valider la personnalisation, puis faire l’ajout au panier. existe t-il une solution qui permette de cliquer une seule fois pour enregistrer la personnalisation et ajouter le produit au panier?

    merci

      1. bonsoir,

        je vois la réponse un peu tardivement, effectivement j’avais trouvé cette solution mais comme je ne trouve pas exactement les mêmes codes pour le moment je n’ai pas encore osé tenter les modifications… mais il va falloir que j’y vienne car je trouve que c’est vraiment mal fait.
        merci d’avoir répondu 🙂

  12. Bonjour,
    Super vidéo !
    je viens de voir le tuto sur la page produit.
    J’aurais voulu savoir comment faire pour modifier le terme « En Stock » sur le page produit ?
    Je suis débutant 😀.
    Merci pour votre réponse.
    Dan

    1. hello
      il faut soit modifier directement dans les traductions du back office
      si la traduction ne s’y trouve pas elle est surement dans le fichier ShopThemeCatalog.fr-FR.xlf qui est dans le dossier app/ressources/translations/fr
      j’ai lutté un petit moment en voulant modifier exclusivité web, je pense que ça doit être la même chose, à vérifier 🙂

  13. Bonjour un tout grand merci pour ce tuto, je l’ai installé sur mes fiches produits d’un de mes sites, cependant, quand je clique sur détails descriptions et que je reviens sur description, il m’affiche (la description + details description). Je clique sur fichier attaché, il m’affiche details description +monfichier.pdf.
    Je reviens sur description et pareil (description+details description) je n’arrive pas à voir le problème, pourriez vous m’aider svp ??? Je vous remercie grâce à vous j’apprends de mieux en mieux 🙂

    1. Bonjour,

      Aie, ce problème ne me dit rien… à vérifier en remettant le code original dans le fichier « TPL » de la fiche produit pour voir si le problème est présent ou si cela est lié aux modifications faites sur le « CSS »et le fichier « TPL » du thème.

      A bientôt !

  14. Bonjour,

    Encore un grand merci pour toute tes vidéos et tes conseils.

    Je voudrais augmenter la taille du prix de la fiche produit à 50px. Dans le theme.css lorsque je rajoute sous .product-price un font-size, la taille du prix augmente sans aucun soucis. Par contre la taille du prix augmente également dans le panier lorsque l’on commence le processus de commande. Je voulais savoir comment je pourrais créer une règle css simplement attaché au prix de la fiche produit et non plus au prix du panier. Si tu avais une solution ou une piste cela m’aiderait car cela fait une semaine que je me casse la tête sur ce problème.

    Merci à toi.

    Mickaël

    1. Bonjour,

      Pour cela il faut indiquer une règle de base avant le code CSS exemple : #product …puis ta règles CSS (car si cela commence par #product, la règle sera appliquée uniquement à la fiche produit). Tu peux regarder du côté des règles CSS en utilisant l’id d’un élément.

      A bientôt !

Laisser un commentaire

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