La modification d’un template PrestaShop est une préoccupation régulière des e-commerçants. Pour que cela se passe bien et soit efficace, dans le temps il faut idéalement intégrer une ligne de conduite qui soit claire et concise.
Le thème standard de PrestaShop et ses fonctions de bases
Il faut bien garder en tête que les fonctionnalités de bases dites « natives » de PrestaShop sont celles qui sont le plus éprouvées, parce qu’elles sont contenues dans le noyau central et fournies avec le package de base lors de l’installation.
Une partie des modules installés viennent modifier l’interface « front » côté client en ajoutant de nouvelles fonctionnalités. En réalité, un e-commerce qui réussit à faire des ventes n’a pas besoin de beaucoup de gadgets sur son interface. Il faut simplement que le produit réponde aux besoins du client, c’est ça le socle le plus important.
Avant d’ajouter de nouveaux modules qui vont surcharger l’interface de votre boutique PrestaShop, réfléchissez toujours si l’enjeu en vaut la peine. Chaque module ajouté nécessite des ressources et ajoute des composants sur l’interface du thème qu’il faudra tester, traduire, maintenir, etc.
Adaptez-vous au template PrestaShop et non l’inverse
Le cas le plus fréquent que je vois, ce sont les e-commerçants qui ont une idée précise en tête et qui veulent transformer le rendu du template pour se rapprocher de leur vision idéale. C’est une mauvaise pratique qui conduit bien souvent à un effet contraire.
Les créateurs de thème ont déjà mis en place toute sorte de règles responsives et de comportement adaptés avec les ressources qui sont intégrées par défaut. Il est préférable de calibrer les images des produits, des sliders, des bannières, du logo avec les dimensions officielles intégrées dans l’exemple de base (pas un pixel de plus ou de moins).
Si vous commencez à modifier l’ordre des modules sur votre thème et les dimensions des contenus (principalement des images), vous risquez de casser le fonctionnement du thème et de l’expérience client. Le fait de standardiser PrestaShop est une bonne pratique importante, cette manière de travailler permet de gagner du temps et d’être uniforme.
Désactiver des modules PrestaShop pour focusser l’attention du client
Il y a toujours cette croyance qu’un PrestaShop chargé de beaucoup de modules est forcément un gage de réussite, hier encore j’ai vu un site e-commerce avec 196 modules présents en back-office contre 73 sur une nouvelle installation. Vous savez quoi ? Cela est totalement contre-productif…
Il faut vraiment casser ses croyances et se demander ce qui est vraiment « important ». Dans la vidéo je le montre bien, des modules du type wishlist, partage social, réassurance, avis client, filtre à facettes, dans bien des cas il ne font qu’encombrer l’interface, donc autant les retirer.
Cela ne veut pas dire que ces modules sont inutiles, mais il faut que leur présence justifie un impact pour le visiteur… Exemple : Les avis clients c’est vital et tout le monde le dit ? Oui, mais dans votre cas quelle est la pertinence d’afficher 0 étoile sur le 99% de vos produits.
Faut-il créer un thème enfant PrestaShop et le mettre à jour ?
De mon côté j’ai fait le test de la création d’un thème enfant pour voir le concept si cela fonctionnait, c’est une stratégie intéressante qui permet de rester pragmatique en ne touchant pas le code original du thème (méthode recommandée par tout développeur chevronné).
La réalité c’est qu’en plus de 10 ans, je n’ai jamais mis à jour un thème PrestaShop, parce qu’il y a rarement un intérêt à le faire. Pourquoi mettre à jour un thème qui fonctionne chez le client, celui-ci ayant un business rentable et éprouvé au risque de compromettre son fonctionnement ?
Vous pouvez consulter aussi mon avis sur les mises à jour PrestaShop en général. C’est comme dans la vie réelle, il y a beaucoup de choses qu’on devrait faire (par principe)… mais qu’on ne fait pas forcément et dans une bonne partie des cas… tout se passe très bien quand même.
Que changer sur le thème PrestaShop ?
Une très bonne pratique serait de se conditionner à changer uniquement les couleurs du template, mais sans changer l’architecture du template. Dans les templates premium vous avez souvent un éditeur de couleur qui vous permet d’ajuster l’apparence des différents éléments, pour les novices je vous invite à vous limiter à ces options.
Pour ceux qui sont plus aventuriers ou qui utilisent le thème standard PrestaShop, je conseille dans un 1er temps de vous limiter seulement à la modification de 2 fichiers du thème, le « theme.css » et le « custom.css » présents dans le dossier « \themes\classic\assets\css » ce qui vous permettra de réviser l’apparence des couleurs.
Le but n’est pas de créer un maximum de règles avec un fichier « custom.css » qui contient 1000 ou 2000 lignes, mais plutôt de faire des changements intelligents afin de rester au plus proche du code original qui lui est fonctionnel. La simplicité permet aussi beaucoup d’agilité, gardez toujours cela en tête.
Résumé de la vidéo : Personnaliser le template PrestaShop
- Le thème standard de PrestaShop il est déjà très bien, il y a tout ce qu’il faut pour lancer un e-commerce et tenter de générer ses premières ventes.
- Avec le thème classique, sous « Apparence -> Thème et logo » vous avec accès aux emplacements stratégiques qui constituent votre thème. Vous pouvez aussi modifier l’agencement des colonnes (la question peut se poser pour la page catégorie).
- Laissez-vous guider par les exigences de votre thème PrestaShop. Concernant le contenu suivez les recommandations et dimensions indiquées dans les modules et dans la documentation du thème.
- Vos clients veulent un site e-commerce simple et facile à utiliser, désactivez tous les modules superflus… vos clients seront gagnants et vous aussi.
- Ne cherchez pas à customiser votre thème à un niveau « profond » et « complexe » utilisez ce que vous avez à disposition et limitez-vous à un ajustement sur les couleurs tout en gardant une uniformité / cohérence.
J’essaye de modifier la couleur orange pêche rgb(241, 157, 118) des icones du thème mais pas moyen de trouver le sélecteur CSS qui me permettrait de modifier cette couleur. Pour mon cas j’ai de bons arguments pour le module réassurance et j’essaye désespérément de modifier la couleur des icones..
je tombe sur les sélecteurs « element.style » ou « #Shape » ou encore « #baseline-local_shipping-24px » mais aucune modification ne prend effet sur ces sélecteurs. Je ne comprend pas, je suis bloqué la dessus. Si quelqu’un à une solution, ça m’intéresse