Afficher 3 blocs côte à côte sur la page d'accueil PrestaShop

Pourquoi structurer sa page d'accueil en blocs

La page d'accueil d'une boutique PrestaShop est la vitrine principale de votre activité. Afficher trois blocs côte à côte — par exemple pour mettre en avant des catégories phares, des arguments commerciaux ou des promotions — est l'un des aménagements les plus demandés par les marchands. La grille Bootstrap intégrée à PrestaShop rend cette mise en page accessible sans framework externe.

Ce guide présente trois approches, de la plus rapide à la plus maintenable.

Approche 1 : Édition directe du template (rapide)

La méthode la plus immédiate consiste à modifier le fichier index.tpl de votre thème pour y insérer directement une rangée de trois colonnes Bootstrap.

Sur PrestaShop 1.6

Le fichier à modifier se trouve dans themes/votre-theme/index.tpl. PrestaShop 1.6 utilise Bootstrap 3 :

<div class="row">
  <div class="col-md-4">
    <div class="block-custom">
      <h3>{l s='Livraison offerte'}</h3>
      <p>{l s='Dès 49€ d\'achats, profitez de la livraison gratuite en France métropolitaine.'}</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="block-custom">
      <h3>{l s='Paiement sécurisé'}</h3>
      <p>{l s='Toutes vos transactions sont protégées par un chiffrement SSL 256 bits.'}</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="block-custom">
      <h3>{l s='Service client réactif'}</h3>
      <p>{l s='Une question ? Notre équipe vous répond sous 24 heures.'}</p>
    </div>
  </div>
</div>

Point important : utilisez systématiquement la fonction Smarty {l s='...'} plutôt que du texte brut. Cette fonction permet la traduction automatique de vos contenus si votre boutique est multilingue.

Sur PrestaShop 1.7 / 8.x

Le template d'accueil se situe dans themes/votre-theme/templates/index.tpl. Bootstrap 4 (PS 1.7) puis Bootstrap 5 (PS 8.x dans les thèmes récents) utilisent le même système de grille, mais avec quelques différences de classes :

{block name='three_columns_block'}
<div class="container my-4">
  <div class="row g-3">
    <div class="col-md-4">
      <div class="card h-100 text-center p-3">
        <h3>{l s='Livraison offerte' d='Shop.Theme.Custom'}</h3>
        <p>{l s='Dès 49€ d\'achats.' d='Shop.Theme.Custom'}</p>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card h-100 text-center p-3">
        <h3>{l s='Paiement sécurisé' d='Shop.Theme.Custom'}</h3>
        <p>{l s='Transactions protégées SSL.' d='Shop.Theme.Custom'}</p>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card h-100 text-center p-3">
        <h3>{l s='SAV réactif' d='Shop.Theme.Custom'}</h3>
        <p>{l s='Réponse sous 24h.' d='Shop.Theme.Custom'}</p>
      </div>
    </div>
  </div>
</div>
{/block}

Notez le paramètre d='Shop.Theme.Custom' obligatoire depuis PrestaShop 1.7 pour le domaine de traduction.

Approche 2 : Utiliser les hooks natifs (recommandée)

Plutôt que de coder en dur dans le template, la bonne pratique PrestaShop consiste à exploiter le système de hooks. Cela permet de gérer le contenu des blocs depuis le back-office sans toucher au code.

Principe

Chaque module peut s'accrocher à un point d'insertion (hook) de la page. Pour afficher trois blocs côte à côte, deux stratégies :

1. **Trois modules distincts** hookés sur le même emplacement (par exemple `displayHome`)
2. **Un seul module** qui génère les trois colonnes

Créer un hook personnalisé

Si vous souhaitez un emplacement dédié plutôt que le displayHome standard, déclarez un hook personnalisé.

Dans le fichier install() de votre module :

public function install()
{
    return parent::install()
        && $this->registerHook('displayHomeTripleBlock');
}

public function hookDisplayHomeTripleBlock($params)
{
    // Logique d'affichage
    return $this->display(__FILE__, 'views/templates/hook/triple-block.tpl');
}

Puis dans votre index.tpl, appelez ce hook à l'emplacement voulu :

{hook h='displayHomeTripleBlock'}

Cette méthode est plus propre car elle respecte l'architecture modulaire de PrestaShop : le contenu est géré par le module, la position est définie dans le template.

Approche 3 : Créer un module dédié (la plus maintenable)

Pour un résultat professionnel et administrable, la création d'un module reste la solution idéale. Voici la structure minimale d'un module qui affiche trois blocs configurables.

Structure du module

monmodule_tripleblock/
├── monmodule_tripleblock.php
├── views/
│   └── templates/
│       └── hook/
│           └── displayHome.tpl
└── logo.png

Fichier principal (PrestaShop 8.x)

<?php
if (!defined('_PS_VERSION_')) {
    exit;
}

class Monmodule_Tripleblock extends Module
{
    public function __construct()
    {
        $this->name = 'monmodule_tripleblock';
        $this->version = '1.0.0';
        $this->author = 'Votre nom';
        $this->need_instance = 0;
        $this->bootstrap = true;

        parent::__construct();

        $this->displayName = $this->l('Triple bloc accueil');
        $this->description = $this->l('Affiche 3 blocs côte à côte sur la page d\'accueil.');
    }

    public function install()
    {
        return parent::install()
            && $this->registerHook('displayHome');
    }

    public function hookDisplayHome($params)
    {
        $this->context->smarty->assign([
            'blocks' => [
                [
                    'icon' => 'icon-truck',
                    'title' => $this->l('Livraison offerte'),
                    'text' => $this->l('Dès 49€ d\'achats.'),
                ],
                [
                    'icon' => 'icon-lock',
                    'title' => $this->l('Paiement sécurisé'),
                    'text' => $this->l('Chiffrement SSL.'),
                ],
                [
                    'icon' => 'icon-headphones',
                    'title' => $this->l('Support réactif'),
                    'text' => $this->l('Réponse sous 24h.'),
                ],
            ],
        ]);

        return $this->display(__FILE__, 'views/templates/hook/displayHome.tpl');
    }
}

Template Smarty associé

<div class="container triple-block-wrapper my-4">
  <div class="row g-3">
    {foreach $blocks as $block}
      <div class="col-md-4">
        <div class="card h-100 text-center p-4">
          <i class="{$block.icon} fa-3x mb-3 text-primary"></i>
          <h3 class="h5">{$block.title}</h3>
          <p class="text-muted">{$block.text}</p>
        </div>
      </div>
    {/foreach}
  </div>
</div>

Le système de grille Bootstrap en bref

PrestaShop embarque Bootstrap nativement. La grille repose sur un conteneur de 12 colonnes. Pour afficher trois blocs de largeur égale, chaque bloc occupe 4 colonnes (col-md-4, car 12 ÷ 3 = 4).

Les classes responsives à connaître :

ClasseLargeur d'écranComportement `col-12`< 576px (mobile)Pleine largeur, blocs empilés `col-sm-6`≥ 576px2 blocs par ligne `col-md-4`≥ 768px3 blocs par ligne `col-lg-3`≥ 992px4 blocs par ligne

Pour un comportement responsive optimal (empilé sur mobile, côte à côte sur desktop) :

<div class="col-12 col-md-4">

Styliser les blocs avec du CSS personnalisé

Ajoutez un fichier CSS dans votre module ou dans le fichier custom.css de votre thème :

.triple-block-wrapper .card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.triple-block-wrapper .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.triple-block-wrapper .card i {
  color: var(--ps-primary, #25b9d7);
}

Bonnes pratiques à retenir

• **Ne modifiez jamais le thème parent** : créez un thème enfant ou un module. Les mises à jour écraseront vos modifications.
• **Utilisez `{l s='...'}` systématiquement** pour permettre la traduction.
• **Testez le responsive** : vérifiez le rendu sur mobile (blocs empilés) et tablette (2 colonnes éventuellement).
• **Videz le cache** après toute modification de template : *Paramètres avancés > Performances > Vider le cache*.
• **Préférez un module** à une modification de template dès que le contenu doit être éditable par un non-développeur.