Comment ajouter un bouton « Charger plus » ou le défilement infini aux pages catégorie de PrestaShop

Une page catégorie PrestaShop affiche un nombre fixe de produits et une rangée de numéros de page en bas. Pour en voir plus, le client clique sur « 2 », attend le chargement complet de la page et recommence depuis le haut de la liste.

Un bouton « Charger plus » ou le défilement infini ajoute plutôt les produits suivants sur la même page. Ce guide explique comment choisir entre les deux, comment garder les pages paginées visibles pour Google et comment tout configurer sur PrestaShop 1.7 et 8 sans modifier le thème.

Bouton « Charger plus » ou défilement infini automatique ?

Les deux chargent les produits suivants en AJAX. La différence, c’est qui décide du moment.

• « Charger plus » : le client clique sur un bouton sous la grille de produits. Le pied de page reste accessible et le client garde la main sur la quantité de produits chargés.
• Défilement infini : les produits suivants se chargent automatiquement quand le client approche de la fin de la liste. La navigation est plus rapide sur mobile, mais le pied de page est plus difficile à atteindre.

Pour la plupart des boutiques, le bouton « Charger plus » est un bon choix par défaut, le chargement automatique pouvant être testé sur les catégories où les clients parcourent beaucoup de produits à la suite, comme la mode ou la décoration.

Bouton « Charger plus » ou défilement infini automatique : la comparaison complète →

Garder les pages paginées explorables

Les moteurs de recherche ne font pas défiler les pages et ne cliquent pas sur les boutons. Si les produits des pages 2, 3 et 4 n’apparaissent qu’après une action JavaScript, un robot d’exploration risque de ne jamais les voir.

Les recommandations de Google sur la pagination et le chargement progressif des pages se résument à quelques règles :

• Chaque page de la catégorie conserve sa propre URL, par exemple ?page=2.
• Chaque page renvoie vers la suivante par un lien classique qu’un robot peut suivre.
• Charger plus de produits sur la page ne retire pas ces liens du HTML.

La configuration sûre conserve la pagination native de PrestaShop dans la page et ne la masque visuellement que lorsque JavaScript est actif. Les visiteurs voient le bouton « Charger plus », et les robots trouvent toujours les liens vers chaque page.

Pagination ou défilement infini dans PrestaShop : le volet SEO →

Pas à pas : ajouter « Charger plus » ou le défilement infini aux pages catégorie

Les étapes ci-dessous utilisent Infinite Scroll, notre module pour PrestaShop 1.7 et 8. Il fonctionne via des hooks, les fichiers du thème restent donc intacts.

1. Téléverser le module

1. Dans le back-office, allez dans Modules → Gestionnaire de modules.
2. Cliquez sur « Installer un module ».
3. Déposez le fichier ZIP du module dans la zone de téléversement.
4. Une fois l’installation terminée, cliquez sur « Configurer ».

2. Choisir le mode de chargement

• Infinite loading type : « Load more button » (par défaut) ou « On scroll ».
• Style de l’indicateur de chargement : un message texte ou l’une des six animations.
• Textes : le libellé du bouton, le message « Chargement… » et le message affiché lorsqu’il n’y a plus de produits.
• Couleurs du bouton, de l’indicateur de chargement et du texte.

3. Choisir où le module s’applique

Le module fonctionne sur les pages catégorie ainsi que sur les pages de recherche, de marque, de fournisseur, de nouveaux produits, de meilleures ventes et de promotions. Un bloc optionnel sur la page d’accueil charge les produits d’une catégorie de votre choix, quelques-uns à la fois.

4. Vérifier les sélecteurs sur les thèmes personnalisés

Le module doit savoir où se trouvent les produits et la pagination dans votre thème. Les valeurs par défaut correspondent au thème Classic :

• Conteneur des produits : #products .products.row
• Pagination : .pagination
• Lien vers la page suivante : .page-list .next
• Produit individuel : .products.row article

Sur un thème personnalisé, ouvrez une page catégorie, faites un clic droit sur un produit, choisissez « Inspecter » et copiez dans les réglages du module les noms de classes utilisés par votre thème. Aucune modification du code n’est nécessaire.

5. Tester avec les filtres

C’est avec la recherche à facettes que le chargement des produits pose le plus souvent problème. Testez ces cas sur une page catégorie :

• Charger plus de produits, puis appliquer un filtre (marque, prix ou attribut).
• Appliquer d’abord un filtre, puis charger plus de produits.
• Changer l’ordre de tri et charger à nouveau plus de produits.
• Ouvrir directement la page 2 via son URL et vérifier qu’elle affiche toujours les bons produits.

Le module lit les filtres actifs et l’ordre de tri, de sorte que les produits suivants correspondent à la sélection du client.

6. Vérifier le résultat sur mobile

• Charger quelques séries de produits et vérifier que les images apparaissent sans que la page saute.
• Utiliser le bouton de retour en haut pour revenir aux filtres.
• Ouvrir un produit, revenir en arrière et vérifier que la page catégorie fonctionne toujours.

Tous les réglages d’Infinite Scroll expliqués dans la documentation →

Vitesse et images

Les produits chargés plus tard ne doivent pas ralentir le premier affichage de la page. Les images ajoutées par le module utilisent le lazy loading natif, le décodage asynchrone et une priorité de chargement basse. Les thèmes qui utilisent leur propre lazy loading avec des attributs data-src sont également pris en charge.

Optimisation des pages catégorie PrestaShop : le guide complet →

Foire aux questions

Le défilement infini nuit-il au SEO dans PrestaShop ?

Pas si chaque page de la catégorie conserve son URL et que les liens de pagination restent dans le HTML. Les problèmes commencent quand les produits des pages suivantes ne sont accessibles qu’en faisant défiler ou en cliquant.

Fonctionne-t-il avec la recherche à facettes ?

Oui. Les produits suivants respectent les filtres actifs et l’ordre de tri, y compris la marque, le prix et les attributs.

Quelles versions de PrestaShop sont prises en charge ?

Infinite Scroll fonctionne sur PrestaShop 1.7 et 8.

Puis-je utiliser un bouton « Charger plus » plutôt que le chargement automatique ?

Oui. Le bouton est le mode par défaut. Le chargement automatique au défilement s’active d’un simple interrupteur dans les réglages.

Dois-je modifier mon thème ?

Non. Le thème Classic fonctionne avec les réglages par défaut. Pour les thèmes personnalisés, il peut être nécessaire de saisir leurs sélecteurs CSS dans les réglages du module.