Prestashop est installé avec un thème de base que vous pouvez avoir envie de modifier, de personnaliser. La manière la plus simple et la plus sûre de le faire est de passer par la création d’un thème enfant du thème principal et de ne modifier que les fichiers que vous souhaitez.
Ainsi le thème enfant est en quelque sorte une extension du thème principal. Tous les changements que vous apporterez seront placés dans le répertoire du thème enfant. L’avantage de procéder ainsi est de conserver intactes les pages natives du thème Prestashop par défaut. C’est pratique en cas d’erreur de codage des fichiers que vous modifierez car vous pouvez toujours revenir en arrière. Par ailleurs lorsque vous mettrez à jour votre boutique Prestashop les modifications faites dans le thème enfant seront conservées.
La création d’un thème enfant peut se faire en quelques clics à partir de l’interface d’administration. Seulement, afin de comprendre cette notion de thème enfant, voyons dans un premier temps comment le faire manuellement.
Le thème principal de Prestashop se nomme classic. Il se situe dans le répertoire …/themes, et se compose de 5 dossiers et d’une image.
Pour créer un thème enfant vous aurez besoin de créer à minima un dossier que vous pouvez nommer comme vous le souhaitez. Dans notre exemple il est appelé : theme-enfant.
Dans ce dossier créez un sous-dossier : config et ajoutez une image nommée preview.png. Cette image peut-être une copie de celle du thème classic ou tout autre image de votre choix. Elle sert à prévisualiser votre thème enfant dans l’interface d’administration de Prestashop. Il est simplement conseiller de respecter la taille initiale de 500×746 px et l’extension .png.
Vous avez maintenant une structure de répertoire qui doit correspondre à l’image ci-dessous.
Dans le dossier …/themes/theme-enfant/config créez un fichier qui sera nommé theme.yml et copier le code comme sur l’image ci-dessous.
Une fois ces étapes effectuées, le thème enfant est désormais visible dans la partie administration de votre site Prestashop.
Dans le menu de navigation, cliquez sur le lien Apparence du bloc PERSONNALISER, puis sur le lien Thème et logo. Votre thème enfant apparait, et vous pouvez l’activer sur votre boutique.
Le thème enfant est donc désigné par le nom que vous avez donné, la version, et l’auteur de conception.
Pour modifier l’auteur, il suffira d’ajouter dans le fichier theme.yml les éléments d’auteur : nom, email et url, comme sur l’image ci-dessous.
A noter : il peut être nécessaire de vider le cache de votre navigateur.
Il est possible de créer directement un thème enfant à partir de l’interface d’administration. Pour cela, cliquez sur le lien Thème et logo du menu Apparence du bloc PERSONNALISER. Puis cliquez sur le troisième onglet Personnalisation avancée.
Vous pouvez alors télécharger le thème classic. Un fichier zippé nommé child_classic se charge dans le répertoire …/themes.
Extraire le contenu de ce fichier, et le mettre dans le répertoire …/themes. Vous devez avoir une structuration de fichiers comme sur l’image ci-contre. On remarque la création d’un répertoire supplémentaires nommé assets. Il contient un sous-dossier css dans lequel se trouve le fichier custom.css.
C’est dans ce fichier que vous pourrez écrire toutes les règles de mise en forme css que vous souhaitez apporter à votre boutique.
Maintenant que votre thème enfant est crée il est possible d’y apporter toutes les modifications et de l’adapter au rendu que vous souhaitez pour votre boutique. A noter, si vous avez appliqué la méthode 1 pour la création du thème enfant, il faudra rajouter dans le répertoire de votre thème le dossier assets, le sous-dossier css et le fichier custom.css.