1. Créer un thème enfant (Child Theme)

Ne touchez jamais directement aux fichiers du thème de base. Créez un thème enfant qui surcharge uniquement ce que vous voulez modifier. Dans /themes/votre-child-theme/ :

// themes/votre-child-theme/config/theme.yml
name: your-child-theme
display_name: "Mon Thème Enfant"
parent: classic
version: 1.0.0

Activez-le ensuite dans le back-office (Apparence > Thème) — toutes vos personnalisations resteront isolées.

2. Surcharger un template `.tpl`

Pour modifier le rendu d’une page produit ou du panier, copiez le fichier dans votre thème enfant en respectant l’arborescence :

// Copier depuis themes/classic/templates/catalog/listing/product-list.tpl
// Vers themes/votre-child-theme/templates/catalog/listing/product-list.tpl
{foreach $products as $product}
  {* Ajoutez votre badge promotionnel *}
  {if $product.on_sale}
    Promo !
  {/if}
  ... reste du code ...
{/foreach}

Sauvegardez, videz le cache (`Advanced Parameters > Performance`) et rechargez la page pour voir vos changements.

3. Ajouter du CSS personnalisé

Dans votre thème enfant, créez un fichier assets/css/custom.css et ajoutez-y :

/* Change la couleur des boutons principaux */
.btn.btn-primary {
  background-color: #ff5722;
  border-color: #e64a19;
}

/* Accentue l'effet au survol */
.btn-primary:hover {
  background-color: #e64a19;
}

/* Personnalise les titres H2 */
h2 {
  font-family: 'Montserrat', sans-serif;
  color: #1f2937;
}

Ensuite, déclarez-le dans theme.yml :

assets:
  css:
    - id: custom
      path: assets/css/custom.css

4. Injecter du code via un module simple

Pour ajouter un widget ou un script dans le ``, créez un mini-module :

// modules/mymodule/mymodule.php
class MyModule extends Module {
  public function __construct() {
    $this->name = 'mymodule';
    parent::__construct();
    $this->displayName = 'Mon Module';
  }
  public function install() {
    return parent::install() && $this->registerHook('displayHeader');
  }
  public function hookDisplayHeader($params) {
    return '';
  }
}

Installez et activez le module dans le back-office. Votre CSS sera injecté automatiquement.

5. Utiliser l’éditeur en direct (Live Edit)

Dans PrestaShop 8, Activez le mode Live Edit pour déplacer visuellement les blocs :

• Allez dans Design > Pages, sélectionnez la page d’accueil.
• Cliquez sur Configurer, puis Live Edit.
• Glissez-déposez les modules (slider, produits, texte…) où vous voulez.

Cette méthode ne requiert aucun code et reste entièrement réversible.