Tuto PrestaShop 1.7 créer un child theme (Thème enfant)

Tuto PrestaShop 1.7 création child theme (Thème enfant)

Votre boutique en ligne PrestaShop est installée et vous souhaitez en personnaliser le thème graphique. Vous pouvez le personnaliser avec les options disponibles dans le thème, bien sûr, mais vous voudrez surement changer des petites choses non prises en compte dans ses paramètres en passant directement par son code source comme les CSS, ou modifier un de ses modules.

Remarque : Si vos faites ces modifications directement dans votre thème, le jour où vous mettrez à jour votre thème PrestaShop 1.7 vous perdrez toutes ces modifications. Et donc retour à la case départ.

Pour ne pas subir ce genre de désagréments, vous devez créer un thème enfant à votre PrestaShop 1.7, en Anglais « Child Theme ».

C’est quoi un child theme pour PrestaShop ?

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.

Comment créer un child theme pour PrestaShop 1.7 ?

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 ».

1. Création du dossier du thème enfant

  • Sur votre ordinateur, créez un dossier nommé « classic-child ».
  • Récupérez dans le thème parent sur votre serveur via votre FTP l’image de pré-visu « preview.png » et copier la dans le thème enfant.
  • A l’intérieur de ce dossier « classic-child », créez un sous-dossier « config ».
  • Dans ce sous dossier créez un fichier nommé « theme.yml ».
  • Dans ce fichier « theme.yml » copier le code suivant :
parent: classic
name: classic-child
display-name: Thème enfant du thème classic
version: 1.0.0
assets:
    use_parent_assets: true

ATTENTION ne mettez pas d’espaces avant les deux points !

  • parent : c’est le nom du dossier du thème parent
  • name : c’est le nom de votre Child Theme
  • display-name : c’est le texte qui s’affichera dans l’admin de PrestaShop
  • assets : vous le laissez vide
  • use_parent_assets : mettez-le sur « true » pour que le Child Theme reprenne les réglages css et js du thème parent

Votre dossier de Child Theme PrestaShop est maintenant prêt et doit ressembler à ça :

Tuto PrestaShop 1.7 création child theme - Contenu du dossier

2. Activation du thème enfant de PrestaShop

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.

Tuto PrestaShop 1.7 création child theme - Copie du dossier via FTP

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.

Tuto PrestaShop 1.7 création child theme - Thème et logo

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.

Tuto PrestaShop 1.7 création child theme - Activation

Votre thème enfant PrestaShop 1.7 est maintenant activé, vous allez pouvoir modifier des éléments sans risque.

Tuto PrestaShop 1.7 création child theme - Actif

Besoin d’un peu d’aide ?

Formation PrestaShop

Formation complète PrestaShop | Nicolas MAUHIN

Modification d’éléments via votre child theme 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 ».

Tuto PrestaShop 1.7 création child theme - Modification 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.

Remarque : Pensez à vider le cache de votre boutique PrestaShop si vous ne voyez pas les modifications apparaître en allant dans « CONFIGURER >Paramètres avancés > Performances » puis cliquez sur le bouton « Vider le cache » en haut à droite.

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.

Tuto PrestaShop 1.7 création child theme - Modification Module

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.

Ce tuto vous a plus ? Alors n’hésitez pas à le partager sur vos réseaux sociaux préférés et à laisser un commentaire sur ce site.

À propos de l'auteur...

Avatar

J’aime ce métier de Formateur Web. Transmettre mon expérience aux apprenants dans un subtile mélange de cours web théorique et exercices pratiques, je les accompagne tout au long de leur formation pour qu’ils réalisent dans les meilleurs conditions tous leurs projets.

1 COMMENTAIRE

Laisser un commentaire