Après de nombreux retours, je vous propose aujourd’hui un rapide tutoriel PrestaShop pour obtenir une fiche produit sur toute la largeur autrement dit “full width“.
Constat : peu de lisibilité du contenu avec PrestaShop 1.7
Par défaut, PrestaShop 1.7 propose une fiche produit avec deux colonnes pour les photos et le bloc achat dans un premier bloc, pour du vide et les tabs avec description / détails / caractéristiques.
Oui, vous avez bien lu “du vide” !
Je ne comprend pas trop cette structure de page qui n’optimise pas une colonne gauche tout simplement vide. On aurait pu y placer les produits associés ou ventes croisées aussi mais on va plutôt afficher les onglets description / détails / caractéristiques en pleine largeur.
Tuto PrestaShop : intégration de la fiche produit en largeur 100%
Ce tuto PrestaShop a été intégré sous la version 1.7.2.4.
Pensez à bien forcer la compilation et désactiver les caches durant l’intégration 🙂
Attachez vos ceintures car ça va aller vite ! Ouvrez le fichier www/themes/classic/templates/catalog/product.tpl et modifiez le fichier en isolant {block name=’product_tabs’} par une nouvelle div comme suit :
{** * 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 <contact@prestashop.com> * @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}
Notez les modifications entre la ligne 150 et 236 du fichier modifié. J’ai aussi ajouté un id “product_tabs_block” pour pouvoir apporter du style si besoin.
Et d’ailleurs, j’ajoute une ligne de CSS dans le fichier www/themes/classic/assets/css/custom.css :
/*Style du bloc des tabs de la fiche produit*/ #product_tabs_block{ margin-bottom: 2rem; }
[Edit du 03/02/2020, merci Mathieu] Pour garder des images responsive dans la description de votre fiche produit, ajoutez une ligne de CSS dans le fichier www/themes/classic/assets/css/custom.css :
/*Images responsive dans les tabs de la fiche produit*/ .product-description img{ max-width: 100%; height: auto; }
Et le résultat est immédiat :
Le travail indiqué ici est évidemment responsive avec une affichage simple mais optimale pour mobil et tablette :
Fichiers pour intégration de la fiche produit
Vous avez donc simplement et rapidement optimiser la lecture de votre fiche produit ce qui peut améliorer votre taux de conversion.
Voici les fichiers à télécharger pour réaliser le tuto PrestaShop :
48 commentaires sur “[PrestaShop 1.7] Fiche produit en fullscreen”
Bonjour,
Merci beaucoup pour ton tuto. Je l’ai fait et réussis sans problème. Mais la ligne dans le CSS custom ne semble pas fonctionner pour moi, la section produits accessoires est collée au bloc description. J’ai bien vidé les caches etc mais rien à faire aucun marge ne s’ajoute entre les deux… Une idée ?
Bonjour,
Merci pour votre commentaire.
Si les blocs sont collés, vous pouvez ajouter un margin-top: 15px au bloc suivant.
Bon courage 🙂
Bonjour Arnaud,
Alors j’ai refais la manipulation mais maintenant je me retrouve avecune fiche où la descrption longue n’est pas visible , il y a bien les 2 onglets description + détails, mais on doit cliquer dessu pour que le texte s’affiche….J’ai loupé un truc svp ?
Merci
Corinne
Bonjour Arnaus,
Merci pour ce super tuto et je suis d’accord sur le fait que c’est aussi pour moi plus logique que ce soit en pleine largeur 😉.
Mais j’ai la tête dans les choux car je ne sais pas si je dois remplacer tout mon fichier tpl par le tien ou remplecer juste une partie ?? Pareil pour le CSS….
Je ne sais pas si je suis bien claire dans mes propos..😂
Meric
Bonjour Corinne,
Merci pour le commentaire !
Chaque thème étant différent, il faut adapter avec votre thème.
Vous pouvez aussi faire une sauvegarde et ensuite remplacer le tpl et compléter le css.
Bon courage
Parabéns pelo tutorial. Estamos em 2023 e funciona perfeitamente na versão 8. Obrigado, obrigado!
J’essaie depuis plusieurs heures de suivre votre tuto, je n’ai pas d’erreur 500 ou autres, mais cela ne fonctionne pas, l’affichage est toujours le même (bloc à droite). J’ai bien changé le product.tpl et le custom.css mais je n’ai pas de changement. Cache vidé, testé sur plusieurs navigateurs. Je suis sur 1.7.8.6 cette version est elle compatible avec votre tuto ?
Bonjour Emilie,
Merci pour le commentaire,
Vérifiez que vos fichiers sont bien modifiés sur le serveur.
Ensuite, vérifiez que le cache dans PrestaShop est bien désactivé et la compilation forcée.
Bonjour à tous,
qq à tester avec une version 1.7.7.1 ? car pour ma part j’ai une erreur 500.
merci d’avance pour vos retours
J’ai un problème, le full screen s’applique, mais le texte n’est pas visible. Si je clique sur l’onglet fiche technique puis denouveau sur l’onglet, ce coup-ci le texte s’affiche.
Je ne comprends pas pourquoi, je suis débutant et je suis sur la 1.7.8.
Avez-vous une solution ?
Bonjour Alexis,
Difficile de corriger sans le code, collez votre code dans un https://codepen.io/ puis partagez-le ici.
Je me réponds à moi même,
bien pensé à vider le cache, pour ma part même après avoir gardé le cache désactivé, il a fallu que je supprime les dossiers DEV et PROD su serveur,
Bonjour,
Je viens de passer en 1.7.7.5 et ça ne fonctionne pas.
J’ai fait la modification rien ne se passe, et j’ai remplacé le fichier par le tien, e là non plus rien ne fonctionne, toujorus pas en full width.
Tu aurais une solution ?
Merci 🙂
Merci beaucoup pour ce tuto c’est parfait !
Quand j’ai copié le code au début, ça n’a pas fonctionné, il y avait une erreur, ma page n’était plus accessible.
Du coup en récupérant ton fichier cela a bien fonctionné, merci 🙂
Bonjour,
merci pour le tuto,
mais rencontre un petit probleme sur le description produit et details du produit, mon texte ou mon image et collé a description il manquerait une marge ou autre afin de descendre l’image ou le texte dans les 2 onglets. Esce que j’aurais loupé quelque chose ?
voici le lien ou vous pourrez voir le soucie https://www.sr-solutions.fr/produits/22-mallette-multi-games-s.html
En vous remerciant par avance de votre retour
Bonjour,
Dans ce cas et selon votre thème, vous pouvez ajouter un margin-top sur l’élément .tabs .tab-pane
Bonjour et merci pour votre tuto, très utile 🙂
Juste un petit souci, si je prends votre TPL direct et que je mets le CSS en palce tout est nickel. Mais le product.tpl évolue en fonction des version et j’ai voulu ajouter uniquement les modifications.
Donc ok pour les deux premiers div, par contre je ne trouve nulle pas où les rajouter. Donc je me me retourve avec une page qui ne fonctionne pas, vue qu’il manque des DIV.
Merci pour votre aide, et bonne continuation
Bonjour Arnaud,
Tout d’abord merci pour ton tuto !
J’ai fait les changements sur mon site mais lorsque j’ajoute des images dans la description je perd la reponsivité de l’image sur mobile.
Tu n’as pas oublié une ligne dans le code ???
Je te remercie par avance pour ton soutient
Bonjour Mathieu,
Merci pour ton retour, l’article est à jour à présent 🙂
Salut Arnaud
pareil avec la version 1.7.6.1, j’essaye ton tuto avec la version de base du theme
et ça me mets une erreur 500
c’est très bête de mettre autant de vide :/
merci à toi en tout cas
j ai directement intégrer tes deux fichier en téléchargement
et là ça fonctionne
merci pour ton travail
Avec plaisir, tu peux laisser un commentaire sur Google si tu le souhaite : g.page/freelanceprestashopwordpress/review
Bonjour Arnaud,
C’est la deuxième fois que je tente le tuto sur ma version 1.7.5 de Prestashop et ça ne fonctionne toujours pas. Est-ce que tu pourrais m’aider stp ? J’ai bien ajouter les div et le CSS mais ça reste sur une colonne bien à droite. Et maintenant j’ai même mes produits complémentaires et avis qui sont sur une colonne à droite (alors qu’ils étaient en pleine page avant). Merci d’avance pour tes lumières 🙂 !
Thomas
Bonjour Bruno,
Parfait si ça fonctionne, n’hésitez pas à laisse un avis sur Google : https://goo.gl/Z4mMjt
A bientôt !
Bonjour Arnaud, j’ai remplacer mon fichier par le votre et pas de modification dans ma fiche produit, je suis en V 1.7.5.1 en local via wamp
Merci de me dire ou peut être le souci
Cordialement
Bonjour, un grand merci pour ce tuto, j’ai juste une question, dans l’affichage mobile comment mettre (détails du produit) sur la même ligne à coté de (description) ? merci
Bonjour Henix,
On peut essayer de les avoir sur la même ligne mais le souci c’est qu’il faudra que le texte des onglets soit tout petit.
Voici le css à appliquer sur mobile :
[code]
@media screen and (max-width: 768px){
.tabs .nav-tabs {
border: none;
border-bottom: 2px solid #f1f1f1;
display: flex;
flex-wrap: wrap;
}
.tabs .nav-tabs .nav-item {
float: left;
margin-bottom: -.125rem;
width: 49%;
font-size: 10px;
text-align: center;
}
}
[/code]
A bientôt 🙂
Bonjour, un grand merci. A peine j’ai pensé mettre cette partie en pleine page je suis tombé sur votre tuto. le résultat est parfait.
Salut !
Si en plus tu nous fais un tuto pour avoir les images de la description en responsive, je t’épouse ! 😉
(parce que je ne trouve nulle part comment gérer la chose)
Bisous ! ^^
Bonjour,
Sans demander quoique se soit en retour si ce n’est un merci et peu être un vote sur l’article, il suffit d’ajouter du css :
#product_tabs_block img{max-width: 100%;height: auto;}
Bon alors, petite checklist de fin d’année :
-le vote c’est fait (j’ai mis 5 étoiles, hein. On vote utile, quoi ;-))
-le merci en retour était plus ou moins inclus dans la demande, délicatement planqué dans une demande en mariage doublée de quelques bisous. Mais au risque de me répéter : merci !
-je m’en vais de ce pas tester cette solution, même si depuis j’ai fait du chemin et découvert les joies de la classe img-fluid, la simplicité mérite le détour.
Sur ce, bonne année à tous ! (et particulièrement au créateur de ce site)
Bonjour El Manu,
Ahah j’ai tellement aimé la blague que j’ai répondu le 31/12 ^^
Merci pour ce commentaire en tout cas et à très vite 😉
Bonne année !
Bonjour et merci…
C’est vraiment plus logique comme affichage 😉
Hello,
Aahaha génial, justement je devais préparer une vidéo pour proposer exactement cette optimisation… tu l’as fait, bon ben je peux que dire félicitation ! Par défaut c’est un peu trop compact… c’est vrai que ça manque clairement de visibilité.
Ta bannière de billet m’a bien fait rire c’est exactement mon genre d’esprit… comme quoi on peut faire des choses en étant expert, mais sans trop se prendre au sérieux.
A bientôt !
Hello Germain,
J’ai eu tellement de personnes qui ont demandé ce tuto que je me suis finalement motivé à le préparer.
Et totalement d’accord pour faire les choses bien sans se prendre au sérieux 😀
Bonne journée !
Bonjour,
Merci beaucoup pour ton tuto. Je l’ai fait et réussis sans problème. Mais la ligne dans le CSS custom ne semble pas fonctionner pour moi, la section produits accessoires est collée au bloc description. J’ai bien vidé les caches etc mais rien à faire aucun marge ne s’ajoute entre les deux… Une idée ?
Merci d’avance et bonne journée !
Bonjour,
Merci pour votre commentaire.
Si les blocs sont collés, vous pouvez ajouter un
margin-top: 15px
au bloc suivant.Bon courage 🙂
Bonjour Arnaud,
Alors j’ai refais la manipulation mais maintenant je me retrouve avecune fiche où la descrption longue n’est pas visible , il y a bien les 2 onglets description + détails, mais on doit cliquer dessu pour que le texte s’affiche….J’ai loupé un truc svp ?
Merci
Corinne
Bonjour Corinne,
Impossible de dire ce qu’il en est sans être dans le code, mais sinon remplacez le fichier par celui fourni dans l’article.
Merci pour la réponse Arnaud et désolée pour les fautes de frappes (médocs).
Je suis sur le thème Classic Rocket.
Encore merci 😉
Bonjour Arnaus,
Merci pour ce super tuto et je suis d’accord sur le fait que c’est aussi pour moi plus logique que ce soit en pleine largeur 😉.
Mais j’ai la tête dans les choux car je ne sais pas si je dois remplacer tout mon fichier tpl par le tien ou remplecer juste une partie ?? Pareil pour le CSS….
Je ne sais pas si je suis bien claire dans mes propos..😂
Meric
Bonjour Corinne,
Merci pour le commentaire !
Chaque thème étant différent, il faut adapter avec votre thème.
Vous pouvez aussi faire une sauvegarde et ensuite remplacer le tpl et compléter le css.
Bon courage
Parabéns pelo tutorial. Estamos em 2023 e funciona perfeitamente na versão 8. Obrigado, obrigado!
Bonjour,
Version 1.7.8.4 est même problème rencontré que Emilie.
dans le product.tpl de cette version j’ai cette ligne :
alors que dans la version 1.7
elle est de cette façon
que vous avez remplacez par
c’est peut-être la raison pour la quelle rien ne se passe pour les version 1.7.8 … ?
i don’t know,
en tout cas merci à vous et tous les autres qui propose ce genre d’astuce 😉 !
Bonjour,
J’essaie depuis plusieurs heures de suivre votre tuto, je n’ai pas d’erreur 500 ou autres, mais cela ne fonctionne pas, l’affichage est toujours le même (bloc à droite). J’ai bien changé le product.tpl et le custom.css mais je n’ai pas de changement. Cache vidé, testé sur plusieurs navigateurs. Je suis sur 1.7.8.6 cette version est elle compatible avec votre tuto ?
Merci d’avance pour votre réponse
Bonjour Emilie,
Merci pour le commentaire,
Vérifiez que vos fichiers sont bien modifiés sur le serveur.
Ensuite, vérifiez que le cache dans PrestaShop est bien désactivé et la compilation forcée.
Bonjour à tous,
qq à tester avec une version 1.7.7.1 ? car pour ma part j’ai une erreur 500.
merci d’avance pour vos retours
Bonjour Gilles,
Testé fonctionnel, activez le mode debug pour en savoir plus sur l’erreur 😉
Super merci de partager une source aussi intéressante et tellement utile
Merci ❤️
Bonjour,
J’ai un problème, le full screen s’applique, mais le texte n’est pas visible. Si je clique sur l’onglet fiche technique puis denouveau sur l’onglet, ce coup-ci le texte s’affiche.
Je ne comprends pas pourquoi, je suis débutant et je suis sur la 1.7.8.
Avez-vous une solution ?
Bien à vous,
Alexis
Bonjour Alexis,
Difficile de corriger sans le code, collez votre code dans un https://codepen.io/ puis partagez-le ici.
Je me réponds à moi même,
bien pensé à vider le cache, pour ma part même après avoir gardé le cache désactivé, il a fallu que je supprime les dossiers DEV et PROD su serveur,
Mais bonne nouvelle ça fonctionne
Merci 🙂
Bonjour,
Je viens de passer en 1.7.7.5 et ça ne fonctionne pas.
J’ai fait la modification rien ne se passe, et j’ai remplacé le fichier par le tien, e là non plus rien ne fonctionne, toujorus pas en full width.
Tu aurais une solution ?
Merci 🙂
Bonjour,
Merci beaucoup pour ce tuto c’est parfait !
Quand j’ai copié le code au début, ça n’a pas fonctionné, il y avait une erreur, ma page n’était plus accessible.
Du coup en récupérant ton fichier cela a bien fonctionné, merci 🙂
1000 merci pour ce tuto, c’est exactement ce que je cherchais 🙂
Bonjour,
merci pour le tuto,
mais rencontre un petit probleme sur le description produit et details du produit, mon texte ou mon image et collé a description il manquerait une marge ou autre afin de descendre l’image ou le texte dans les 2 onglets. Esce que j’aurais loupé quelque chose ?
voici le lien ou vous pourrez voir le soucie https://www.sr-solutions.fr/produits/22-mallette-multi-games-s.html
En vous remerciant par avance de votre retour
Bonjour,
Dans ce cas et selon votre thème, vous pouvez ajouter un margin-top sur l’élément .tabs .tab-pane
Bonjour et merci pour votre tuto, très utile 🙂
Juste un petit souci, si je prends votre TPL direct et que je mets le CSS en palce tout est nickel. Mais le product.tpl évolue en fonction des version et j’ai voulu ajouter uniquement les modifications.
Donc ok pour les deux premiers div, par contre je ne trouve nulle pas où les rajouter. Donc je me me retourve avec une page qui ne fonctionne pas, vue qu’il manque des DIV.
Merci pour votre aide, et bonne continuation
Bonjour Patrick,
Avec plaisir et merci pour le commentaire !
Quelle est votre version de PrestaShop avant tout ?
Merci bcp 🙂 ton tuto m’a tellement aidé
Bonjour Arnaud,
Tout d’abord merci pour ton tuto !
J’ai fait les changements sur mon site mais lorsque j’ajoute des images dans la description je perd la reponsivité de l’image sur mobile.
Tu n’as pas oublié une ligne dans le code ???
Je te remercie par avance pour ton soutient
Bonjour Mathieu,
Merci pour ton retour, l’article est à jour à présent 🙂
Salut Arnaud
pareil avec la version 1.7.6.1, j’essaye ton tuto avec la version de base du theme
et ça me mets une erreur 500
c’est très bête de mettre autant de vide :/
merci à toi en tout cas
j ai directement intégrer tes deux fichier en téléchargement
et là ça fonctionne
merci pour ton travail
Avec plaisir, tu peux laisser un commentaire sur Google si tu le souhaite : g.page/freelanceprestashopwordpress/review
Bonjour Arnaud,
C’est la deuxième fois que je tente le tuto sur ma version 1.7.5 de Prestashop et ça ne fonctionne toujours pas. Est-ce que tu pourrais m’aider stp ? J’ai bien ajouter les div et le CSS mais ça reste sur une colonne bien à droite. Et maintenant j’ai même mes produits complémentaires et avis qui sont sur une colonne à droite (alors qu’ils étaient en pleine page avant). Merci d’avance pour tes lumières 🙂 !
Thomas
Bonjour Thomas,
Pour du cas particulier, je t’invite à me faire un mail avec l’url du site web 😉
Désolé pour mon précédent message, j’étais pas dans le bon dossier des différents sites que je test sur mon pc
Le tutto fonctionne bien
Merci Arnaud
Bonjour Bruno,
Parfait si ça fonctionne, n’hésitez pas à laisse un avis sur Google : https://goo.gl/Z4mMjt
A bientôt !
Bonjour Arnaud, j’ai remplacer mon fichier par le votre et pas de modification dans ma fiche produit, je suis en V 1.7.5.1 en local via wamp
Merci de me dire ou peut être le souci
Cordialement
Bonjour, un grand merci pour ce tuto, j’ai juste une question, dans l’affichage mobile comment mettre (détails du produit) sur la même ligne à coté de (description) ? merci
Bonjour Henix,
On peut essayer de les avoir sur la même ligne mais le souci c’est qu’il faudra que le texte des onglets soit tout petit.
Voici le css à appliquer sur mobile :
[code]
@media screen and (max-width: 768px){
.tabs .nav-tabs {
border: none;
border-bottom: 2px solid #f1f1f1;
display: flex;
flex-wrap: wrap;
}
.tabs .nav-tabs .nav-item {
float: left;
margin-bottom: -.125rem;
width: 49%;
font-size: 10px;
text-align: center;
}
}
[/code]
A bientôt 🙂
Bonjour, un grand merci. A peine j’ai pensé mettre cette partie en pleine page je suis tombé sur votre tuto. le résultat est parfait.
Salut !
Si en plus tu nous fais un tuto pour avoir les images de la description en responsive, je t’épouse ! 😉
(parce que je ne trouve nulle part comment gérer la chose)
Bisous ! ^^
Bonjour,
Sans demander quoique se soit en retour si ce n’est un merci et peu être un vote sur l’article, il suffit d’ajouter du css :
#product_tabs_block img{max-width: 100%;height: auto;}
Bon alors, petite checklist de fin d’année :
-le vote c’est fait (j’ai mis 5 étoiles, hein. On vote utile, quoi ;-))
-le merci en retour était plus ou moins inclus dans la demande, délicatement planqué dans une demande en mariage doublée de quelques bisous. Mais au risque de me répéter : merci !
-je m’en vais de ce pas tester cette solution, même si depuis j’ai fait du chemin et découvert les joies de la classe img-fluid, la simplicité mérite le détour.
Sur ce, bonne année à tous ! (et particulièrement au créateur de ce site)
Bonjour El Manu,
Ahah j’ai tellement aimé la blague que j’ai répondu le 31/12 ^^
Merci pour ce commentaire en tout cas et à très vite 😉
Bonne année !
Bonjour et merci…
C’est vraiment plus logique comme affichage 😉
Merci beaucoup pour ton tuto. je l’ai fais et réussis. j’ai dû remplacer l’ancien fichier product.tpl par le tiens et jai fais un peu de touche css.
Avec plaisir 🙂
Hello,
Aahaha génial, justement je devais préparer une vidéo pour proposer exactement cette optimisation… tu l’as fait, bon ben je peux que dire félicitation ! Par défaut c’est un peu trop compact… c’est vrai que ça manque clairement de visibilité.
Ta bannière de billet m’a bien fait rire c’est exactement mon genre d’esprit… comme quoi on peut faire des choses en étant expert, mais sans trop se prendre au sérieux.
A bientôt !
Hello Germain,
J’ai eu tellement de personnes qui ont demandé ce tuto que je me suis finalement motivé à le préparer.
Et totalement d’accord pour faire les choses bien sans se prendre au sérieux 😀
Bonne journée !