Avant de voir comment créer un Child Theme PrestaShop 1.7, il est bon de savoir ce qu’est un thème enfant. Un thème enfant ou Child Theme est basé sur le thème parent et reprend l’ensemble des fonctionnalités de celui-ci sans les modifier. Vous pourrez ainsi personnaliser votre thème PrestaShop à partir de son thème enfant sans jamais perdre vos modifications lors d’une mise à jour du thème parent. Vous pourrez aussi modifier ses modules de la même manière ou tous autres fichiers de sa structure.
Pour créer le thème enfant PrestaShop, vous aurez besoin, du thème d’origine (le thème parent) et un accès FTP à votre serveur d’hébergement. Ici nous prenons comme exemple le thème par défaut de PrestaShop 1.7 qui est « classic ».
ATTENTION ne mettez pas d’espaces avant les deux points !
Votre dossier de Child Theme PrestaShop est maintenant prêt et doit ressembler à ça :
Connectez-vous à votre serveur d’hébergement et copiez l’ensemble du dossier « classic-child » dans le dossier « /themes » de votre boutique PrestaShop 1.7.
Rendez-vous maintenant dans l’administrateur de votre boutique PrestaShop dans « PERSONNALISER > Apparence > Thème et logo », vous devriez voir votre thème enfant apparaître.
Activez maintenant votre thème enfant en passant la souris dessus et en cliquant sur le bouton « Utiliser ce thème » et en confirmant « Oui » sur la fenêtre qui s’affiche.
Votre thème enfant PrestaShop 1.7 est maintenant activé, vous allez pouvoir modifier des éléments sans risque.
Formation PrestaShop
Pour modifier les CSS d’un thème dans PrestaShop vous devez utiliser le fichier « custom.css » qui se trouve dans « themes/classic/assets/css/ » du thème parent en le copiant dans le thème enfant et en respectant l’arborescence des dossiers et sous-dossiers « themes/classic-child/assets/css ».
Éditer le fichier « custom.css », faites vos modifications CSS puis envoyez-le sur votre serveur d’hébergement. Visualisez vos modifications sur votre boutique PrestaShop.
Si vous voulez modifier un module du thème, répétez la même démarche en copiant son fichier et en respectant l’arborescence des dossiers et sous-dossiers du thème parent dans votre thème enfant.
Vous pouvez maintenant faire toutes les modifications que vous voulez à votre thème tout en continuant à pouvoir mettre à jour votre thème parent grâce au Child Theme PrestaShop 1.7 que vous venez de créer.
Voir les commentaires
Bonjour, je reprends le développement d'un site sous PS avec un thème acheté, un thème enfant, ... et pas d'infos sur ce qui a été fait par le dev. précédent… :(
Le site était en ligne mais ne fonctionnait pas bien, jusqu'à ce que plus du tout.
J'ai entrepris de refaire depuis la base, car certaines modifications avaient été faites dans le thème classic..
Je n'arrive pas à faire afficher mes pages cms... snif. une idée svp ?
Petit conseil d'un dev : les trois derniers commentaires bien flatteurs ci dessous (robinet de bassin en cuivre etc...) sont issus de robots avec tentative d'insertion de liens vers un site de vente de plomberie.
Vous ne devriez pas laissez ça trainer en encore moins y répondre avec des "Merci", votre crédibilité en tant que formateur Web en prend un coup.
Ceci dit votre article est inintéressant, j'ai suivis le tuto sur un PS 1.7.8.0.6, jusqu'à m'apercevoir que le fichier custom.css n'existe pas dans le thème classic parent.
Les fichiers css sont dans _dev et compilés en scss dans un seul fichier theme.css. Je cherche comment faire dans ce cas.
Autre soucis moins génant, le thème enfant apparait bien dans la liste des thèmes mais porte le même nom que son parent et sa description n'apparait pas, du coup pas moyen de les distinguer.
Bonjour
Bien vu pour les faux commentaires, j'avais pas fait attention.
Pour le nom de votre thème essayez de modifier display-name par display_name
Avez-vous réglé votre problème de css ?
Bonjour,
J'ai suivi ces instructions et mon thème enfant n'apparait pas sur l'admin.
Une idée? (je suis sur Prestashop 1.7.8)
Cordialement,
Essayez de modifier display-name par display_name
Merci pour votre travail.
Je laisse un commentaire juste pour ceux qui passeront sur votre article. Pour que le nom du thème enfant s'affiche, il faut modifier le - dans display-name et le remplacer par le undercore _ ; c'est à dire display_name.
Merci encore !
parent: classic
name: classic-child
display_name: Thème enfant du thème classic
version: 1.0.0
assets:
use_parent_assets: true
Bonjour Abdoul aziz
Bien vu :)
Je viens de corriger mon erreur
Cordialement
Bonjour,
J'ai malencontreusement fait des modifications css ( couleurs, fome du header...) sur mon thème parent sur prestashop et après avoir installé le thème enfant celui ci reprend les réglages du thème parent mais gros problème d'affichage.
J'ai vérifié mon thème enfant et il n'a à priori pas de problème, il contient bien le fichier custom.css nécessaire.
Impossible de continuer à modifier mon site à présent car les modifications futures ne sont pas prises en compte.
Si je restaure les fichiers css de base tout fonctionne mais dès que j'inclus le même fichier css ( custom.css) avec des modifications avancées, retour au même problème d'affichage, je ne comprends pas d'où vient le problème ...
Pouvez-vous m'éclairer ?
Merci infiniment.
Cordialement,