Prestashop : comment mettre une banniere ou slider uniquement sur mobile ?

Prestashop : Utiliser les classes CSS responsive

Dans Prestashop, la méthode la plus simple pour afficher une bannière uniquement sur mobile est d’utiliser des classes CSS spécifiques comme .d-block d-md-none. Ces classes permettent de contrôler l’affichage par écran.

Ajoute ta bannière dans un bloc HTML personnalisé ou directement dans le fichier template, puis applique la classe CSS. Prestashop, via Bootstrap, gère le responsive nativement. Cela garantit que ta bannière mobile s’affiche uniquement sur les petits écrans.

Prestashop : Intégrer une condition media query dans le thème

Tu peux aussi utiliser des media queries CSS pour afficher un slider spécifique aux appareils mobiles. Ajoute dans le fichier custom.css une règle qui cache le bloc sur desktop avec @media(min-width: 768px).

Cette méthode fonctionne bien si tu veux garder la gestion côté front-end. Prestashop permet d’associer des styles personnalisés aux modules visuels, ce qui facilite la création de contenus adaptés aux mobiles uniquement.

Prestashop : Créer deux versions du module et les masquer

Une autre approche consiste à dupliquer le module (ex : le module "Image slider") et en afficher un uniquement sur mobile, l’autre sur desktop. Dans chaque module, insère une classe CSS différente.

Par exemple, applique .mobile-only à l’un et .desktop-only à l’autre, puis cache l’un ou l’autre via display: none en fonction des résolutions. Prestashop autorise plusieurs instances d’un même module, ce qui rend cette méthode totalement fonctionnelle.

Prestashop : Modifier les fichiers template du thème

Si tu veux un contrôle total, tu peux insérer ta bannière mobile directement dans le fichier header.tpl ou index.tpl, avec une condition CSS. Ajoute une div avec la classe .d-md-none ou une media query personnalisée.

Grâce à cette technique, Prestashop ne chargera le code qu’une seule fois, et l’affichage dépendra entièrement du type d’écran. Cela évite le double chargement des ressources pour desktop et mobile, ce qui optimise les performances.

Prestashop : Utiliser le module HTML personnalisé par boutique

Si tu utilises le module HTML personnalisé, insère ton code image ou slider uniquement dans un bloc activé pour les mobiles. Ajoute un div avec une classe comme .visible-mobile et applique le style dans ton fichier CSS.

Ce module est très flexible dans Prestashop et te permet de gérer le contenu visuel par emplacement. C’est une solution simple pour afficher une bannière mobile sans toucher au code source du thème.

Prestashop : Gérer le slider mobile via un constructeur de page

Si tu utilises un page builder comme Creative Elements ou Elementor pour Prestashop, tu peux gérer les blocs selon le type d’appareil. Ces constructeurs permettent de masquer ou afficher les éléments en un clic selon la résolution.

Crée deux versions du slider, puis configure chaque bloc pour qu’il s’affiche uniquement sur mobile ou desktop. Prestashop devient alors un outil encore plus flexible en gestion visuelle sans avoir besoin de coder manuellement.

Prestashop : Utiliser un module de slider responsive

Choisis un module de slider compatible responsive qui permet d’ajouter des règles d’affichage selon l’appareil. Certains modules du marketplace Prestashop proposent cette fonction en natif.

Dans la configuration du module, coche l’option "Afficher uniquement sur mobile" si disponible, ou utilise les options CSS intégrées. Cela permet de créer un slider optimisé pour les smartphones sans surcharger l’expérience desktop.

Prestashop : Cacher la bannière desktop via JavaScript

Tu peux utiliser un petit script JavaScript pour détecter la largeur de l’écran et afficher/masquer un bloc. Par exemple, avec if (window.innerWidth < 768), tu peux ajouter une classe active à ta bannière mobile.

Ce script peut être inséré dans le fichier footer.tpl ou dans un module HTML personnalisé. Prestashop ne limite pas ce type de personnalisation, ce qui te permet d’avoir une bannière 100 % mobile-friendly de manière dynamique.

Prestashop : Affecter le bloc à un hook mobile uniquement

Si ton thème ou ton développeur a prévu des hooks personnalisés, tu peux insérer la bannière uniquement dans un hook mobile (comme displayMobileTop). Cette technique nécessite un petit développement, mais reste propre et efficace.

Crée un module ou insère ton code dans un module existant, puis accroche-le au bon emplacement. Prestashop saura alors ne charger ce bloc que lorsque l’appareil mobile accède à la boutique, ce qui évite tout contenu inutile pour les PC.

Prestashop : Optimiser les images pour mobile uniquement

Si tu insères une bannière image ou un slider uniquement pour mobile, pense à l’optimiser. Utilise un fichier plus léger, en WebP par exemple, pour réduire le temps de chargement sur mobile.

Prestashop ne réduit pas automatiquement la taille des bannières, donc il est crucial de fournir un fichier adapté. Cela garantit une navigation fluide, tout en gardant un bon rendu visuel sur les petits écrans.