Prestashop : comment fixer une image sur home slider ?

1. PrestaShop : ajouter une image fixe dans le module "Home Slider"

Le module natif "Image Slider for your homepage" de PrestaShop permet d’ajouter une image unique à afficher en continu. Il suffit d’ajouter une seule slide et de désactiver le défilement automatique.

Pour cela, rendez-vous dans l’onglet Modules > Module Manager, puis configurez le slider d’accueil. Supprimez les autres images et activez seulement celle que vous souhaitez afficher de façon permanente.

2. PrestaShop : désactiver la rotation automatique du slider

Pour fixer une image dans le slider PrestaShop, il faut empêcher le défilement entre plusieurs slides. Cela se configure directement dans les paramètres du module.

Désactivez l’option "lecture automatique" et indiquez une durée infinie ou désactivez le timer de transition. Ainsi, votre image reste visible en permanence sur la page d’accueil, sans animation.

3. PrestaShop : n’utiliser qu’une seule image active

Si plusieurs images sont actives, le slider passera automatiquement à la suivante. Pour garder une seule image fixe, supprimez les autres entrées depuis le tableau de gestion.

Dans le module "Home Slider", cliquez sur "Supprimer" pour toutes les slides sauf celle souhaitée. Cela garantit que PrestaShop n’a qu’une seule image à afficher et aucune raison de défiler.

4. PrestaShop : désactiver les contrôles de navigation

Même avec une seule image, certains sliders affichent encore des flèches de navigation ou des points de pagination. Cela peut perturber visuellement l’effet d’image fixe.

Dans les paramètres du module slider, désactivez l’affichage des contrôles utilisateur. Cela renforce l’aspect statique de votre visuel et évite toute confusion d’utilisation.

5. PrestaShop : adapter la taille de l’image pour éviter les déformations

Pour que l’image fixe s’intègre parfaitement, elle doit respecter les dimensions recommandées par le thème PrestaShop. Une mauvaise taille peut provoquer des découpes ou flous.

Utilisez une image de même ratio que l’espace réservé au slider. Privilégiez une taille de 1200x500 pixels ou adaptée au thème actif. Cela garantit un rendu net et professionnel.

6. PrestaShop : fixer l’image via le fichier CSS du thème

Pour aller plus loin, vous pouvez fixer une image d’arrière-plan directement dans le fichier CSS lié au slider. Cela permet de ne pas utiliser le module du tout, en ayant un effet purement statique.

Ajoutez une règle CSS avec background-image dans le sélecteur du slider. Cette méthode garantit une intégration rapide, surtout si vous voulez afficher une bannière permanente sans effet dynamique.

7. PrestaShop : intégrer une image fixe via un bloc HTML personnalisé

Une autre méthode consiste à insérer une image fixe en page d’accueil via un module de bloc HTML personnalisé. Cela contourne complètement le slider natif.

Ajoutez une balise <img> dans le bloc HTML et positionnez-le à l’endroit du slider (hook displayHome). Cela vous offre une flexibilité totale sur le style et l’affichage.

8. PrestaShop : supprimer les scripts JavaScript du slider

Même si une seule image est active, le script JavaScript du slider peut encore générer des animations ou appels inutiles. Cela ralentit le site et gêne l’effet voulu.

Désactivez les scripts JS du module depuis le thème ou via un override si nécessaire. Cela permet de bloquer le comportement dynamique et de garantir un affichage totalement statique.

9. PrestaShop : gérer le slider avec un module alternatif plus simple

Le module natif de PrestaShop peut parfois être trop limité ou rigide. Certains modules alternatifs permettent de créer un slider avec une seule image fixe, sans dépendance à des animations.

Installez un module d’image statique ou de bannière personnalisée pour remplacer complètement le Home Slider. Cela améliore la performance et la simplicité de gestion.

10. PrestaShop : vérifier le cache pour afficher l’image fixée

Après avoir modifié les paramètres du slider, il se peut que l’image fixe ne s’affiche pas immédiatement. Cela est dû au cache actif de PrestaShop.

Pensez à vider le cache depuis "Paramètres avancés > Performance" et à désactiver la compilation Smarty temporairement. Cela vous garantit que le changement est bien pris en compte côté front-office.