Homepage Banner Grid - Collage d'images cliquable, trois mises en page responsive, sans toucher au thème

Votre page d'accueil a environ trois secondes pour indiquer une direction

Un carrousel que tout le monde fait défiler et une rangée de « produits vedettes », ce n'est pas du merchandising. Une grille de bannières, si : quelques images, chacune ouvrant un chemin choisi vers la partie de votre catalogue où vous voulez vraiment amener vos visiteurs. Ce module construit cette grille depuis le back-office, sans toucher au moindre fichier de thème.

Trois mises en page, prêtes à remplir

• Feature Split (vitrine dominante) — une grande tuile principale et quatre tuiles secondaires. Cinq tuiles au total, pour une boutique avec un message phare et quelques chemins complémentaires.
• Mosaic (mosaïque) — une grille riche de seize tuiles, façon page de magazine, pour les catalogues qui ont beaucoup de catégories à mettre en avant.
• Showcase (vitrine équilibrée) — une composition éditoriale de cinq tuiles, quand rien ne doit écraser le reste.

Chaque mise en page dispose d'un aperçu en direct sur la page de configuration : vous choisissez en regardant, pas en devinant.

Comment ça marche

• 1. Choisissez une mise en page — cliquez sur l'une des trois cartes d'aperçu ; la page se recharge et affiche les emplacements d'images correspondants.
• 2. Réglez les options de style — zoom au survol, légendes en surimpression, coins arrondis, ouverture dans un nouvel onglet et espacement entre les tuiles, de 0 à 16 px.
• 3. Remplissez les tuiles — chargez une image pour chacune, définissez le lien à ouvrir et ajoutez un titre si vous voulez une légende. Enregistrez : c'est en ligne sur votre page d'accueil.

Chaque tuile est un vrai lien

Une tuile peut ouvrir une catégorie, une marque, un produit ou n'importe quelle page — un chemin interne comme /3-clothes ou une adresse https:// complète. Les liens sont validés : seuls les chemins internes et les URL http(s) sont acceptés, tout le reste est ignoré. Les titres servent à la fois de légende en surimpression et d'étiquette d'accessibilité pour le lien.

Responsive, à partir d'une seule feuille de style

La version 1.x livrait une feuille de style distincte pour chaque largeur fixe en pixels — 980, 1000, 1110, 1170 — et un template différent par version de PrestaShop. Les dix feuilles de style et les sept templates ont disparu, remplacés par une seule feuille de style CSS-Grid et un unique template piloté par les données. Chaque mise en page passe d'elle-même du bureau à une grille tablette sur deux colonnes, puis à une colonne unique sur mobile. Vous n'avez plus à choisir une largeur en pixels pour votre boutique.

Le module vérifie sa propre installation

Le panneau Statut, en haut de la page de configuration, vous indique si la grille est réellement rattachée à la page d'accueil et si le dossier d'images est accessible en écriture — avec un bouton Afficher sur la page d'accueil en un clic quand ce n'est pas le cas. Les anciennes consignes du type « passez le dossier en 777 » et « déplacez le module en première position » cèdent la place à de vraies vérifications.

Plus sûr que le module qu'il remplace

Les images chargées sont validées comme de véritables images, sur la base d'une liste blanche d'extensions, puis enregistrées sous libs/custom/ avec des noms distincts : une future mise à jour du module ne peut donc jamais écraser vos bannières avec les exemples fournis — un bug latent de la conception 1.x. La feuille de style est chargée via actionFrontControllerSetMedia plutôt que par l'ancien hook displayHeader, et le bloc s'affiche via l'interface widget de PrestaShop : vous pouvez donc aussi le placer où vous voulez avec {widget name='blockpicturecollagepro'}.

Compatibilité

PrestaShop 1.7, 8 et 9, en huit langues : allemand, anglais, espagnol, français, italien, néerlandais, polonais et turc. Compatible multiboutique : vous pouvez charger des bannières différentes pour chaque boutique. Le module se rattache au hook Home à l'installation et ne modifie ni ne surcharge aucun fichier de thème — sa désinstallation supprime ses réglages, ses liens, ses titres et les images chargées, et laisse votre thème exactement dans l'état où il était.

Questions fréquentes

Quelle taille doivent faire mes bannières ?

Les tuiles recadrent l'image pour remplir l'espace : les dimensions exactes ne sont donc pas critiques. Environ 1200×800 px pour les grandes tuiles et 600×400 px pour les petites donnent un rendu net. Les formats JPG, PNG, GIF et WEBP sont acceptés.

Chaque tuile peut-elle mener à un endroit différent ?

Oui — chaque tuile a sa propre image, son propre lien et un titre facultatif, et peut pointer vers n'importe quelle catégorie, marque, produit ou page.

Est-ce que ça fonctionne sur mobile ?

Oui. Une seule feuille de style CSS-Grid adapte chaque mise en page du bureau à une grille tablette sur deux colonnes, puis à une colonne unique sur mobile.

Dois-je modifier mon thème ?

Non. Le module se rattache au hook Home dès l'installation. Si votre thème utilise un hook d'accueil personnalisé, placez-le plutôt avec {widget name='blockpicturecollagepro'}.

La grille ne s'affiche pas sur ma page d'accueil — que faire ?

Le panneau Statut vous dit si elle est bien rattachée et propose un bouton « Afficher sur la page d'accueil » en un clic. Vous pouvez aussi vérifier le hook displayHome dans Design → Positions et remonter la grille au-dessus de votre carrousel.

Puis-je utiliser des bannières différentes selon la boutique ?

Oui, le module est compatible multiboutique — les bannières se chargent boutique par boutique.

Que deviennent mes bannières lors d'une mise à jour du module ?

Rien. Vos images sont justement enregistrées sous libs/custom/ avec des noms distincts pour qu'aucune mise à jour ne puisse les remplacer par les exemples fournis.