Modifier et personnaliser son thème Prestashop c’est très bien, mais savez-vous qu’il y’a une manière optimale de le faire grâce au thème enfant ? Et oui cette approche permet de faire facilement une extension du thème principal.
Le concept du « child theme »
A quoi ça sert d’avoir un thème enfant ? Cette fonction dévoile toute son utilité lorsqu’on doit modifier ou adapter un thème. Cela permet de créer un sous-thème du template principal afin de regrouper tous les changements dans un dossier précis. Le thème enfant contiendra donc uniquement les fichiers modifiés et cela évite donc de toucher aux fichiers originaux du thème.
Plus pratique pour les mises à jour
C’est là certainement que se trouve l’un des enjeu important du thème enfant… quand vous faites une mise à jour de Prestashop par exemple et que vos modifications sont faites sur un thème enfant toutes vos modifications seront conservées (c’est pas magnifique ça ?). Il est possible d’appliquer ce processus de « child theme » à tous les templates Prestashop. A la base, cette notion de thème enfant est souvent utilisée dans les templates WordPress… et à présent Prestashop a aussi intégré cette bonne pratique.
Modifier le template de base c’est mal !
Voilà des retours que j’ai eus suite à mes différents tutoriels « Pourquoi tu ne crées pas un thème enfant ? ». Pour les tutoriels c’est plus simple d’expliquer une notion sans forcément ajouter cette nouvelle couche à gérer. Par contre, de mon côté je n’utilise pas forcément le thème enfant, car avec mes clients on fait uniquement des « refontes » globales de shop et jamais de mise à jour de Prestashop.
Tu ne fais jamais de mise à jour ?
Contrairement à WordPress une version Prestashop peut durer dans le temps sans se faire hacker et donc je préfère consolider / optimiser une version durant plusieurs années, plutôt que de faire la course aux mises à jour. Une mise à jour ça prend du temps, même si mineure… et il faut avoir une certitude que cela ne perturbe pas tout ce qui est actuellement place. Cela implique aussi plus de budget au client… Et surtout le plus important, une mise à jour ne fait pas « vendre plus ».
Facile à mettre en place
De ce que j’ai testé je dois dire que le concept de child thème sous Prestashop se met en place très facilement et dans mon cas cela a fonctionné du 1er coup. Par contre, je n’ai pas expérimenté encore son utilisation sur un projet complet avec des subtilités pour voir si tous les cas de figure sont gérés correctement. Si vous avez de l’expérience à ce sujet n’hésitez pas à laisser un commentaire en dessous.
Ressources
Pour ce tutoriel vous aurez à disposition :
-
- 1 x exemple de dossier de thème enfant avec structure minimaliste
- 1 x fichier PSD de base pour la miniature du thème
Résumé de la vidéo : créer un sous-thème pour Prestashop
- Création de la structure minimale d’un thème enfant avec le fichier YML et sélection du child thème par défaut via le back-office.
- Test de surcharge du thème en modifiant le fichier TPL de la fiche produit.
- Intégration d’un fichier CSS (custom.css) et contrôle de la surcharge, avec vérification du nom du dossier dans le code source.
- Modification de la surcharge du thème pour un module (ps_sharebuttons) avec contrôle de l’affichage du texte.
- Une manière intéressante et structurée pour travailler sur le long terme.
Bonjour
J adore vos vidéos je les trouve très pratique et bien expliqué.
Je souhaiterais mettre sur mon site e commerce un questionnaire qui se termine par une vente
Pouvez vous m aider
Merci beaucoup
Angélique
http://www.conseil-fleur-de-bach.com
Bonjour,
Si vous voulez faire un questionnaire / formulaire facilement (et gratuitement), regardez plutôt du côté de Google Form. Faites ensuite un lien de votre shop vers le formulaire Google (celui-ci pourra récolter les réponses, y compris les adresses mails des clients par exemple).
A bientôt !
Bonjour,
Pourquoi pas expliquer comment ça fonctionne, mais pour de « semi-pros » en Prestashop il est mieux passer par un module 😉
« Personnalisation de thème » (actuellement en v1.0.9) développé par Prestashop
http://doc.prestashop.com/pages/viewpage.action?pageId=51840204#Th%C3%A8meetlogo-Personnalisationavanc%C3%A9e
Configurez et personnalisez facilement le thème de votre page d’accueil et vos principaux modules natifs. Fonctionnalité disponible dans la page « Apparence » !
Bonjour,
Après c’est une question de choix, car il n’est obligatoire non plus de créer un thème enfant… c’est surtout pour montrer que ça existe (pour le moment je n’ai pas eu l’occasion de l’utiliser réellement pour un cas client).
A bientôt !
Bonjour , est-ce compatible avec la 1.6 ? merci
Bonjour,
Sur Prestashop 1.6 il n’y a pas cette notion de thème enfant (mais vous pouvez dupliquer le thème de base).
A bientôt !
Merci pour le tuto. Quel est l’éditeur de textes / gestionnaire de fichiers,utilisé sur la vidéo, svp ? Il m’a l’air bien pratique
Bonjour,
Actuellement j’utilise Netbeans PHP https://netbeans.org/features/php/, mais Notepad++ est aussi très bien et facile à utiliser.
A bientôt !
Mon thème de base est déjà modifié, je suis en 1.7.5.0 et je veux faire la maj en 1.7.5.2 car une pârtie du backoffice est en anglais actuellement (les sous menu).
J’ai modif 5 fichier tpl, header footer product et autre, un fichier custom.css bien rempli, le htacces bien rempli par des redirect301 manuelles, de nombreuse pages cms de créé depuis le bo.
Est ce que il faut vraiment que le thème parent soit d’origine ou bien c’est encore possible de créé un theme enfant ?
Ps. Merci pour vos tuto.
Bon bah finalement j’ai fait une maj + thème enfant et ça a bien fonctionné. J’ai réupload tous mes fichiers modifiés dans un nouveau dossier dans /themes. Et je pourrais encaisser une prochaine mise a jour 1.7.+ sans sourciller.
Franchement merci pour le tutoriel! C’est super bien expliqué.
Super merci pour ce retour d’expérience !
Hello,
Personnellement j’ai rarement eu l’occasion d’utiliser le thème enfant, faites une copie complète du dossier thème avant la mise à jour et essayez ensuite de le remettre en place après coup pour voir ce que ça donne.
A bientôt !
Hello !
Depuis peu je réalise des sites Prestashop pour mes clients, c’est vraiment pas mal, et donc tes tutos sont d’une grande aide :).
J’aurais une question concernant le thème enfant, dans ton cas tout fonctionne le CSS est bien chargé. Cependant ce n’est pas mon cas avec du JS. Et je ne parviens pas à appeler correctement le fichier JS du thème parent dans le fichier theme.yml de mon thème enfant …
Aurais-tu une astuce ?
Merci encore pour tes vidéos 🙂
Hello,
Pour dire vrai j’ai utilisé le thème enfant uniquement lors de ce tutoriel Prestashop… donc j’ai pas assez le recul pour ce qui concerne les fichiers JS. Peut-être un post sur le forum Prestashop serait judicieux pour voir le retour d’expérience de ceux qui ont l’habitude de l’utiliser.
A bientôt !
Franchement, merci !
Bonjour
Super tuto comme d habitude…
Pas de problème pour le thème enfant sauf quand je mets theme .css dans le thème enfant les icônes affiche un carré blanc et le texte mon panier se transforme en shopping card dans une police différente et bien plus grosse ??? Avez vous une idée du problème ?
Merci d avance