Blog
Cómo añadir un botón «Cargar más» o scroll infinito a las páginas de categoría de PrestaShop
Una página de categoría de PrestaShop muestra un número fijo de productos y una fila de números de página al final. Para ver más, el cliente hace clic en «2», espera a que se cargue la página completa y vuelve a empezar desde el principio de la lista.
Un botón «Cargar más» o el scroll infinito añaden los siguientes productos a la misma página. Esta guía explica cómo elegir entre los dos, cómo mantener las páginas paginadas visibles para Google y cómo configurarlo en PrestaShop 1.7 y 8 sin editar el tema.
¿Botón «Cargar más» o scroll infinito automático?
Ambos cargan los siguientes productos con AJAX. La diferencia está en quién decide cuándo ocurre.
- Cargar más: el cliente hace clic en un botón bajo la cuadrícula de productos. El pie de página sigue siendo accesible y el cliente decide cuánto se carga.
- Scroll infinito: los siguientes productos se cargan automáticamente cuando el cliente se acerca al final de la lista. La navegación es más rápida en el móvil, pero cuesta más llegar al pie de página.
Una opción práctica por defecto para la mayoría de tiendas es el botón «Cargar más», probando la carga automática en categorías donde los clientes ven muchos productos seguidos, como moda o decoración.
Botón «Cargar más» frente a scroll infinito automático: la comparativa completa →
Mantén rastreables las páginas paginadas
Los buscadores no hacen scroll ni pulsan botones. Si los productos de las páginas 2, 3 y 4 solo aparecen tras una acción de JavaScript, es posible que un rastreador no los vea nunca.
Las directrices de Google sobre paginación y carga incremental de páginas se resumen en unas pocas reglas:
- Cada página de la categoría conserva su propia URL, como ?page=2.
- Cada página enlaza con la siguiente mediante un enlace normal que un rastreador pueda seguir.
- Cargar más productos en la página no elimina esos enlaces del HTML.
La configuración segura mantiene la paginación nativa de PrestaShop en la página y la oculta visualmente solo cuando se ejecuta JavaScript. Los visitantes ven el botón «Cargar más» y los rastreadores siguen encontrando los enlaces a todas las páginas.
Paginación frente a scroll infinito en PrestaShop: el lado SEO →
Paso a paso: añadir «Cargar más» o scroll infinito a las páginas de categoría
Los pasos siguientes utilizan Infinite Scroll, nuestro módulo para PrestaShop 1.7 y 8. Funciona mediante hooks, así que los archivos del tema no se tocan.
1. Sube el módulo
- En el back office, ve a Módulos → Gestor de módulos.
- Haz clic en «Subir un módulo».
- Arrastra el archivo ZIP del módulo a la zona de carga.
- Cuando termine la instalación, haz clic en «Configurar».
2. Elige el modo de carga
- Tipo de carga infinita: «Botón Cargar más» (por defecto) o «Al hacer scroll».
- Estilo del indicador de carga: un mensaje de texto o una de seis animaciones.
- Textos: la etiqueta del botón, el mensaje «Cargando…» y el mensaje que se muestra cuando no hay más productos.
- Colores del botón, del indicador de carga y del texto.
3. Decide dónde funciona
El módulo funciona en las páginas de categoría y también en las de búsqueda, marca, proveedor, novedades, más vendidos y bajadas de precio. Un bloque opcional en la página de inicio carga productos de la categoría que elijas, unos pocos cada vez.
4. Comprueba los selectores en temas personalizados
El módulo necesita saber dónde están los productos y la paginación en tu tema. Los valores por defecto corresponden al tema Classic:
- Contenedor de productos: #products .products.row
- Paginación: .pagination
- Enlace a la página siguiente: .page-list .next
- Producto individual: .products.row article
En un tema personalizado, abre una página de categoría, haz clic derecho en un producto, elige «Inspeccionar» y copia en los ajustes del módulo los nombres de clase que usa tu tema. No hace falta cambiar código.
5. Prueba con filtros
La búsqueda por facetas es donde la carga de productos falla con más frecuencia. Prueba estos casos en una página de categoría:
- Carga más productos y después aplica un filtro (marca, precio o un atributo).
- Aplica primero un filtro y después carga más productos.
- Cambia el orden y vuelve a cargar más.
- Abre la página 2 directamente desde su URL y comprueba que sigue mostrando los productos correctos.
El módulo lee los filtros activos y el orden, así que los siguientes productos coinciden con lo que ha seleccionado el cliente.
6. Comprueba el resultado en un móvil
- Carga unos cuantos bloques y comprueba que las imágenes aparecen sin que la página dé saltos.
- Usa el botón de volver arriba para regresar a los filtros.
- Abre un producto, vuelve atrás y comprueba que la página de categoría sigue funcionando.
Todos los ajustes de Infinite Scroll explicados en la documentación →
Velocidad e imágenes
Los productos que se cargan después no deben ralentizar la primera vista de la página. Las imágenes que añade el módulo usan carga diferida nativa, decodificación asíncrona y prioridad de descarga baja. También se admiten los temas que usan su propia carga diferida con atributos data-src.
Optimización de las páginas de categoría de PrestaShop: la guía completa →
Preguntas frecuentes
¿El scroll infinito perjudica el SEO en PrestaShop?
No, si cada página de la categoría conserva su URL y los enlaces de paginación permanecen en el HTML. Los problemas empiezan cuando a los productos de las páginas siguientes solo se puede llegar haciendo scroll o clic.
¿Funciona con la búsqueda por facetas?
Sí. Los siguientes productos respetan los filtros activos y el orden, incluidos marca, precio y atributos.
¿Qué versiones de PrestaShop son compatibles?
Infinite Scroll funciona en PrestaShop 1.7 y 8.
¿Puedo usar un botón «Cargar más» en lugar de la carga automática?
Sí. El botón es el modo por defecto. La carga automática al hacer scroll se activa con un solo interruptor en los ajustes.
¿Tengo que editar mi tema?
No. El tema Classic funciona con los ajustes por defecto. En los temas personalizados puede ser necesario introducir sus selectores CSS en los ajustes del módulo.