Thèmes Enfants dans PrestaShop : Pourquoi ne Jamais Modifier le Thème Parent

Vous installez un thème PrestaShop. Il est superbe, mais vous voulez modifier quelques éléments — une police différente, des couleurs personnalisées, une mise en page de fiche produit modifiée. Alors vous ouvrez les fichiers du thème et commencez à les modifier. Tout fonctionne parfaitement jusqu'à ce que le développeur du thème publie une mise à jour. Vous appliquez la mise à jour et toutes vos modifications ont disparu.

Cela arrive constamment. C'est l'erreur la plus courante en matière de personnalisation PrestaShop. La solution existe et existe depuis des années : les thèmes enfants.

Qu'est-ce qu'un thème enfant ?

Un thème enfant est un thème séparé qui hérite de tout le thème parent mais vous permet de surcharger des fichiers spécifiques. Imaginez-le comme une couche transparente au-dessus du thème parent. Tout ce que vous ne surchargez pas est hérité du parent. Tout ce que vous surchargez a la priorité.

Lorsque le thème parent est mis à jour, votre thème enfant reste intact car c'est un répertoire séparé. Le parent se met à jour, et vos surcharges continuent de fonctionner par-dessus la nouvelle version.

Comment fonctionnent les thèmes enfants PrestaShop

Un thème enfant PrestaShop se compose de :

• theme.yml — déclare le nom du thème et quel thème parent il étend
• Templates de surcharge — tout fichier .tpl placé dans le thème enfant remplace le même fichier dans le parent
• CSS/JS personnalisés — feuilles de style et scripts supplémentaires chargés après les assets du thème parent
• Assets personnalisés — images, polices ou autres fichiers statiques spécifiques à votre personnalisation

La structure des répertoires reflète celle du thème parent. Pour surcharger un template, copiez-le depuis le parent vers le même chemin dans le thème enfant et modifiez la copie.

Configurer un thème enfant

Créer un thème enfant est simple :

1. Créez un nouveau répertoire dans /themes/ — par exemple, /themes/my-custom-theme/
2. Créez theme.yml avec la référence au parent :

   parent: hummingbird
   name: my-custom-theme
   display_name: My Custom Theme
   version: 1.0.0

3. Copiez uniquement les fichiers que vous souhaitez modifier — ne copiez pas l'intégralité du thème parent. Ne surchargez que ce qui est nécessaire.
4. Activez le thème enfant dans votre back office sous Apparence → Thème & Logo

Ce qu'il faut surcharger dans un thème enfant

Templates (fichiers .tpl)

Copiez tout template que vous souhaitez modifier du thème parent vers le même chemin relatif dans votre thème enfant. Par exemple, pour personnaliser la page produit :

• Parent : /themes/hummingbird/templates/catalog/product.tpl
• Enfant : /themes/my-custom-theme/templates/catalog/product.tpl

Modifiez la version enfant. PrestaShop l'utilisera à la place du template parent.

CSS

Ajoutez un custom.css (ou custom.scss si votre processus de build le supporte) dans les assets de votre thème enfant. Il est chargé après le CSS du parent, donc vos styles ont la priorité. Vous n'avez pas besoin de copier l'intégralité de la feuille de style du parent — écrivez simplement les règles qui surchargent ce que vous voulez modifier.

JavaScript

De même, ajoutez des fichiers JavaScript personnalisés qui se chargent en même temps ou après les scripts du thème parent.

Templates de modules

Les thèmes enfants peuvent également surcharger les templates de modules. Placez-les à :

/themes/my-custom-theme/modules/[nom-du-module]/views/templates/front/[template].tpl

Cela remplace le template par défaut du module sans modifier le module lui-même.

Ce qu'il ne faut pas surcharger

Ne surchargez pas tout. Moins il y a de fichiers dans votre thème enfant, mieux c'est. Chaque surcharge est un fichier qui ne bénéficiera pas automatiquement des mises à jour du thème parent. Si le parent corrige un bug dans un template que vous avez surchargé, vous devez appliquer manuellement cette correction à votre copie.

Ne surchargez que les fichiers où vous avez des modifications réelles. Si vous devez seulement ajouter une classe CSS à un élément, surchargez ce seul template — pas tous les templates du thème.

Personnalisations uniquement CSS

Pour les modifications purement visuelles (couleurs, polices, espacements, visibilité), préférez les surcharges CSS aux modifications de templates. Les surcharges CSS sont moins susceptibles de casser lors des mises à jour du parent car elles ne dépendent pas de la structure des templates.

Exemple : masquer un élément sur la page produit. Vous pourriez surcharger l'intégralité de product.tpl et supprimer l'élément, ou ajouter une simple règle CSS : .product-extra-element { display: none; }. L'approche CSS survit aux changements de structure des templates lors des mises à jour du parent. Les personnalisations uniquement CSS facilitent également la mise en œuvre d'optimisations de performance puisque vous ne dupliquez pas la logique des templates.

Quand un thème enfant ne suffit pas

Les thèmes enfants gèrent bien les personnalisations visuelles. Mais si vous devez modifier la logique métier — comment les prix sont calculés, comment la livraison fonctionne, comment le processus de commande se déroule — vous avez besoin de modules, pas de modifications de thème.

Une erreur courante : ajouter de la logique PHP dans les templates de thème. Les templates ne doivent qu'afficher des données, pas les traiter. Si vous vous retrouvez à écrire du PHP complexe dans un fichier .tpl, vous résolvez le mauvais problème au mauvais endroit. Utilisez un module à la place.

Mises à jour du thème avec un thème enfant

Lorsque le thème parent publie une mise à jour :

1. Mettez à jour le thème parent — votre thème enfant est dans un répertoire séparé, rien n'est écrasé
2. Vérifiez les changements cassants — si le parent a modifié un template que vous avez surchargé, vous devrez peut-être mettre à jour votre surcharge
3. Testez minutieusement — surtout les pages concernées par vos surcharges

Comparez vos fichiers surchargés avec les versions mises à jour du parent en utilisant un outil de diff. Si le parent a ajouté de nouvelles fonctionnalités ou corrigé des bugs dans un template que vous surchargez, fusionnez ces modifications dans votre version enfant.

PrestaShop 9.1 et Hummingbird

PrestaShop 9.1 a introduit Hummingbird comme nouveau thème par défaut, remplaçant Classic. Si vous construisez une nouvelle boutique, créez votre thème enfant basé sur Hummingbird. Si vous migrez depuis PrestaShop 8 avec un thème enfant basé sur Classic, vous devrez évaluer si vous migrez votre thème enfant vers Hummingbird ou si vous continuez avec Classic (qui reste disponible en téléchargement séparé).

Le principe du thème enfant est le même quel que soit le parent. Hummingbird utilise des outils frontend plus modernes (Webpack, SCSS), donc le processus de build pour le CSS personnalisé peut différer des thèmes basés sur Classic.

Pièges courants

Oublier d'activer le thème enfant — créer le répertoire du thème enfant ne suffit pas. Vous devez l'activer dans le back office.

Surcharger trop de fichiers — chaque surcharge est une charge de maintenance. Gardez votre thème enfant léger.

Ne pas versionner votre thème enfant — votre thème enfant est du code personnalisé. Il devrait être sous contrôle de version (Git) avec des messages de commit significatifs.

Modifier le thème parent « juste cette fois » — il n'y a pas de « juste une fois ». Une modification devient deux, puis vingt, et ensuite vous ne pouvez plus mettre à jour. Utilisez toujours le thème enfant, aussi petite soit la modification.

L'essentiel

Un thème enfant se met en place en 10 minutes et vous économise des heures de problèmes à chaque mise à jour du thème parent. Ce n'est pas facultatif — c'est la bonne façon de personnaliser n'importe quel thème PrestaShop. Si vous modifiez actuellement les fichiers du thème parent directement, créez un thème enfant aujourd'hui et déplacez-y vos personnalisations avant que la prochaine mise à jour ne les efface. Pour en savoir plus sur la construction d'une base PrestaShop solide, consultez notre guide sur les bases du SEO PrestaShop.