Fermer

Créer un thème enfant pour PrestaShop 1.7.*

Nous allons faire un thème enfant du thème PrestaShop par defaut nommé classic, le thème par défaut de prestashop 1.7.*

Dans le dossier /themes/ de PrestaShop, créons un nouveau dossier que nous allons appeler classic-themeenfant.

Dans ce dossier, créons un dossier config, dans lequel nous allons créer un fichier nommé theme.yml. Éditons ce fichier avec un éditeur de texte : Sublime Text, bloc-note, textmate,…

Contenu du fichier :

parent: classic
name: classic-themeenfant
display_name: Mon très beau et joli thème enfant
version: 1.0.0
assets:
 use_parent_assets: true

Quelques explications sur le fichier config.yml

parent: correspond au nom du dossier du thème parent, ici il s’agit du thème classic

name: correspond au nom de notre thème et également au nom du dossier du thème enfant

display_name: correspond au nom qui s’affichera dans le Back-Office

version: correspond au numéro de version de votre thème

On ne touche ni à la ligne assets ni à la ligne use_parent_assets.

Créez également un visuel preview.png qui peux être une capture d’écran de votre nouveau thème.

Utiliser le thème enfant

Il faut aller dans le back-office puis Apparence / Thème & logo.

Le thème PrestaShop que l’on vient de créer doit être apparu dans la liste des thèmes PrestaShop disponibles.

Pour utiliser le thème, survoler votre thème et cliquer le lien « Utiliser le thème ».

Sans autre modification, le thème enfant utilisera tous les fichiers du thème parent.

Surcharger les templates

Le thème PrestaShop enfant utilise, par défaut, tous les fichiers du thème parent.
Vous pouvez étendre les fichiers du parent, en recréant les fichiers dans votre thème enfant, et le modifier.

Exemple pour ajouter une nouvelle feuille de style

Copie de /themes/classic/templates/assets/css/custom.css vers /classic-themeenfant/templates/assets/css/custom.css

Vous allez pouvoir éditer et modifier ce fichier pour modifier le style de votre boutique.

/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
#header {
    background: red;
}

Exemple pour changer le logo

Nous allons créer le dossier suivant : templates/_partials et copier/coller le fichier header.tpl du thème parent.

Copie de /themes/classic/templates/_partials/header.tpl vers /classic-themeenfant/templates/_partials/header.tpl

J’édite le fichier /classic-themeenfant/templates/_partials/header.tpl et me positionne à la ligne 63, pour y modifier mon logo :
<img class= »logo img-responsive » src= »http://blog.enguehard.info/wp-content/uploads/2018/01/prestashop-avatar-logo.png » alt= »{$shop.name} »>

Laisser une réponse

Votre adresse email ne sera pas publiée. Les champs obligatoires sont indiqués par *