Accéder au code source de la page d'accueil PrestaShop

Comprendre l'architecture des templates PrestaShop

Quand on débute sur PrestaShop, une question revient systématiquement : où se trouve le code HTML de ma page d'accueil ? La réponse n'est pas aussi simple qu'un fichier unique, car PrestaShop utilise un système de templates modulaire basé sur le moteur Smarty. Chaque page est en réalité un assemblage de plusieurs fichiers .tpl qui, mis bout à bout, composent le rendu final.

Comprendre cette architecture est indispensable pour personnaliser efficacement votre boutique sans casser l'existant.

Les trois fichiers fondamentaux

La page d'accueil de PrestaShop repose sur trois fichiers template principaux, chargés dans cet ordre :

FichierRôleContenu typique `header.tpl`En-tête de pageLogo, navigation, barre de recherche, panier `index.tpl`Corps de la page d'accueilAppel des modules hookés (slider, produits vedettes…) `footer.tpl`Pied de pageLiens utiles, réseaux sociaux, mentions légales

Localisation selon votre version

PrestaShop 1.6 :

/themes/votre-theme/header.tpl
/themes/votre-theme/index.tpl
/themes/votre-theme/footer.tpl

PrestaShop 1.7 et 8.x :

L'architecture a été profondément remaniée. Les templates sont désormais organisés dans une structure plus modulaire :

/themes/votre-theme/templates/layouts/layout-full-width.tpl
/themes/votre-theme/templates/index.tpl
/themes/votre-theme/templates/_partials/header.tpl
/themes/votre-theme/templates/_partials/footer.tpl

Le fichier layout-full-width.tpl (ou layout-both-columns.tpl) orchestre l'assemblage du header, du contenu principal et du footer.

Le rôle central des hooks et des modules

Voici le point qui déroute souvent les débutants : le fichier index.tpl ne contient pas directement le contenu visible. Il se contente d'appeler des hooks, qui sont des points d'ancrage où les modules viennent injecter leur propre template.

Concrètement, quand vous voyez un slider d'images sur votre page d'accueil, ce n'est pas index.tpl qui contient le HTML du slider. C'est le module slider (par exemple ps_imageslider) qui est hooké sur la position displayHome et qui injecte son propre fichier .tpl.

Identifier quel module affiche quoi

Pour savoir quel module génère un bloc précis de votre page d'accueil, activez le mode debug de Smarty :

PrestaShop 1.6 :

1. Allez dans **Paramètres avancés > Performances**
2. Activez le **mode debug** de Smarty
3. Rechargez la page : chaque bloc affiche le chemin du fichier `.tpl` responsable

PrestaShop 1.7 / 8.x :

1. Allez dans **Paramètres avancés > Performances**
2. Passez le **mode debug** sur "Oui"
3. Alternativement, ajoutez `?SMARTY_DEBUG` à l'URL de votre page d'accueil

Vous pouvez aussi inspecter les positions de hooks dans le back-office :

Modules > Positions des modules

Filtrez par le hook displayHome pour voir tous les modules qui s'affichent sur votre page d'accueil.

Exemples concrets : trouver le bon fichier

Voici les cas les plus fréquents lorsqu'on cherche à modifier un élément précis de la page d'accueil :

Modifier le logo

Le logo se trouve dans la partie header de votre thème.

PrestaShop 1.6 : éditez themes/votre-theme/header.tpl et cherchez la balise contenant {$logo_url}.

PrestaShop 8.x : le logo est géré dans themes/votre-theme/templates/_partials/header.tpl et utilise la variable {$shop.logo}.

Bonne pratique : Ne modifiez jamais le logo directement dans le template. Utilisez Apparence > Thème & Logo dans le back-office pour uploader votre logo. Cela garantit la compatibilité lors des mises à jour.

Modifier le slider d'images

Le slider est géré par un module dédié :

• **PS 1.6 :** module `homeslider` → `/modules/homeslider/homeslider.tpl`
• **PS 1.7 / 8.x :** module `ps_imageslider` → `/modules/ps_imageslider/views/templates/hook/slider.tpl`

Modifier le bloc "Ajouté au panier avec succès"

Ce message est géré par le module panier :

• **PS 1.6 :** module `blockcart` → `/modules/blockcart/blockcart.tpl` (ou `blockcart-json.tpl`)
• **PS 1.7 / 8.x :** module `ps_shoppingcart` → `/modules/ps_shoppingcart/modal.tpl`

Modifier le bouton "Envoyer à un ami"

Ce module n'existe plus en PrestaShop 8.x (supprimé depuis la 1.7), mais sur les anciennes versions :

• **PS 1.6 :** module `sendtoafriend` → `/modules/sendtoafriend/sendtoafriend.tpl`

Bonnes pratiques pour modifier les templates

1. Toujours utiliser un thème enfant

Ne modifiez jamais les fichiers du thème par défaut. Créez un thème enfant pour que vos modifications survivent aux mises à jour.

Structure d'un thème enfant (PS 1.7 / 8.x) :

# themes/mon-theme-enfant/config/theme.yml
parent: classic
name: mon-theme-enfant
display_name: Mon Thème Personnalisé
version: 1.0.0

Placez ensuite vos fichiers .tpl modifiés dans la même arborescence que le thème parent : PrestaShop chargera automatiquement votre version.

2. Surcharger les templates de modules

Pour modifier le template d'un module sans toucher à ses fichiers source :

PrestaShop 1.6 :

/themes/votre-theme/modules/nom_module/nom_template.tpl

PrestaShop 1.7 / 8.x :

/themes/votre-theme/modules/nom_module/views/templates/hook/nom_template.tpl

Cette surcharge est prioritaire sur le template original du module.

3. Combiner Smarty et HTML intelligemment

Les fichiers .tpl mélangent du HTML classique et des balises Smarty. Voici les bases :

{* Ceci est un commentaire Smarty *}

{* Afficher une variable *}
<h1>{$page.page_title}</h1>

{* Condition *}
{if $page.page_name == 'index'}
  <div class="homepage-banner">Bienvenue !</div>
{/if}

{* Boucle *}
{foreach $products as $product}
  <div class="product">{$product.name}</div>
{/foreach}

4. Vider le cache après chaque modification

PrestaShop met en cache les templates compilés. Après toute modification d'un fichier .tpl :

• Videz le cache dans **Paramètres avancés > Performances > Vider le cache**
• Ou supprimez manuellement le contenu de `/var/cache/` (PS 1.7 / 8.x) ou `/cache/smarty/compile/` (PS 1.6)

Résumé de l'arborescence complète

Voici une vue synthétique de tous les fichiers impliqués dans le rendu de la page d'accueil :

themes/votre-theme/
├── templates/              # PS 1.7 / 8.x
│   ├── index.tpl           # Page d'accueil (appelle les hooks)
│   ├── layouts/
│   │   └── layout-full-width.tpl
│   └── _partials/
│       ├── header.tpl      # En-tête (logo, nav, recherche)
│       └── footer.tpl      # Pied de page
└── modules/                # Surcharges des templates modules
    ├── ps_imageslider/
    ├── ps_featuredproducts/
    └── ps_shoppingcart/