Aller au contenu principal

Theming : personnaliser l'apparence de PrestaShop

remarque

Cette section fait partie du cookbook PrestaShop. Pour le contexte global, voir la page principale.

L'apparence d'une boutique, c'est ce que ton client voit en premier — et ce qu'il juge en moins de 3 secondes. PrestaShop propose 3 niveaux de personnalisation visuelle, du plus rapide au plus puissant. Bien choisir son niveau évite de passer des semaines à déboguer des overrides qui se marchent dessus.

Lecture : 15min Twig + SCSS under the hood

🎨 Les 3 niveaux de personnalisation​

Complexité : faible | Délai : 1-3 jours | Coût : 50€ – 300€

Tu achètes un thème prêt à l'emploi sur PrestaShop Addons ou des marketplaces tierces (ThemeForest, Template Monster…). Tu le configures via le back-office (logo, couleurs, polices, blocs) sans toucher au code.

✅ Quand l'adopter

  • Budget serré et délai court
  • Design standard acceptable par le client
  • Équipe sans compétences front-end

⚠️ Les limites

  • Personnalisation limitée aux options proposées par l'éditeur
  • Dépendance à la maintenance du thème par l'éditeur
  • Risque d'avoir le même design qu'une autre boutique
  • Compatibilité à vérifier avec ta version PS

📁 Structure d'un thème PrestaShop — Les fichiers clés​

📂 Fichier / Dossier📋 Rôle
config/theme.ymlDéclaration du thème : nom, version, thème parent, hooks disponibles
templates/_partials/Composants réutilisables (header, footer, breadcrumb, pagination…)
templates/catalog/Pages catalogue : listing catégorie, fiche produit, recherche
templates/checkout/Tunnel d'achat : panier, commande, confirmation
templates/customer/Espace client : connexion, compte, historique commandes
templates/cms/Pages CMS statiques
assets/css/Feuilles de style (SCSS recommandé)
assets/js/Scripts JavaScript
assets/img/Images du thème (pas du catalogue produit)
preview.pngCapture d'écran pour le back-office (obligatoire)

✏️ Override d'un template Twig — Exemple concret​

Supposons que tu veuilles ajouter un badge "🇫🇷 Produit français" sur toutes les fiches produit. Sans toucher au core :

1. Identifie le template à surcharger

themes/classic/templates/catalog/product.tpl

2. Crée la copie dans ton thème enfant

themes/mon-theme-enfant/templates/catalog/product.tpl

3. Modifie uniquement ce dont tu as besoin

{* themes/mon-theme-enfant/templates/catalog/product.tpl *}

{* On étend le bloc existant sans tout réécrire *}
{block name='product_name'}
  {* Appel du bloc parent pour garder le titre d'origine *}
  {$smarty.block.parent}

  {* On ajoute notre badge juste après le titre *}
  {if $product.manufacturer_name == 'Artisan FR'}
    <span class="badge-origin">🇫🇷 Produit français</span>
  {/if}
{/block}
💡 La règle d'or

Ne jamais modifier les fichiers du thème parent ou du core. Toujours surcharger via un thème enfant. Si tu modifies directement classic/, la prochaine mise à jour du thème écrase tes changements — et tu passes ta soirée à retrouver tes modifs 😅

⚠️ Les pièges classiques du theming​

🔴 Dette technique : les overrides du core

PrestaShop propose un mécanisme d'override des classes PHP du core (dans le dossier /override/). C'est tentant pour corriger rapidement un comportement, mais c'est la source de bugs n°1 lors des mises à jour :

  • Une mise à jour PS modifie la classe originale → ton override n'hérite pas du fix
  • Deux modules overrident la même classe → conflit silencieux
  • Impossible de savoir qui a overridé quoi sans audit du code

Alternative recommandée : utiliser les hooks et les modules custom plutôt que les overrides de classes.

❌ Piège✅ Bonne pratique
Modifier classic/ directementCréer un thème enfant
Surcharger les classes PHP du coreUtiliser des hooks
Mettre du CSS inline dans les templatesUtiliser des fichiers .scss dédiés
Hardcoder des textes en dur dans les templatesUtiliser le système de traductions PS
Oublier le responsiveTester systématiquement sur mobile dès le début
Copier-coller des JS tiers sans vérificationPasser par GTM ou le hook displayHeader

🚀 Ce que Doing livre côté theming​

✅ Livrable📋 Détail
Audit du thème clientSi un thème existant est fourni — audit compatibilité PS + dette technique
Thème enfant structuréOrganisation propre, SCSS modulaire, commentaires
Composants customBadges, blocs, widgets métier selon le périmètre
Responsive garantiTests mobile/tablet/desktop sur les pages clés
PerformanceMinification CSS/JS, lazy loading images
Guide de maintenanceComment modifier le thème sans casser le travail existant
🏰 L'échoppe est parée, noble bâtisseur !

Les remparts sont sculptés, les étendards hissés et les vitrines du royaume brillent de mille feux. Tu portes désormais en toi la connaissance des trois arts du theming — de la tapisserie achetée au marché jusqu'à la cathédrale bâtie pierre par pierre.

Tu possèdes à présent toutes les armes pour conquérir le monde du e-commerce avec PrestaShop. Il ne reste plus qu'à dégainer le clavier et faire rugir les serveurs. ⚔️🔥

👉 Place aux travaux pratiques : Configuration de ta boutique ou Installation d'un module 🚀