Galería de Producto PrestaShop — Guía completa
Instalar y configurar la galería de producto: zoom HD, pantalla completa móvil, filtrado por combinación y optimizaciones LCP.
Presentación
Galería de Producto PrestaShop (carpeta del módulo dfgallerypro) sustituye la galería de imágenes nativa de la ficha de producto por una galería moderna: zoom interno de alta resolución al pasar el ratón, miniaturas verticales u horizontales, visor a pantalla completa con pellizco en móvil, filtrado de imágenes por combinación seleccionada y estrategia de carga optimizada para el Largest Contentful Paint.
El módulo no sobrescribe ninguna plantilla: la galería se monta con JavaScript en el lugar del bloque de imágenes nativo, que se oculta. No usa tablas SQL ni overrides, y su JavaScript está escrito en vanilla JS, sin jQuery.
Instalación
Requisitos
- PrestaShop 8.0 a 9.x
- PHP 7.4 o superior
- Un tema basado en el tema classic (o que exponga los contenedores de imágenes estándar de la ficha de producto)
Instalar el módulo
- En el back office, abra Módulos → Gestor de módulos.
- Haga clic en Subir un módulo y seleccione el archivo
dfgallerypro.zip. - Una vez instalado, haga clic en Configurar.
La instalación no añade ninguna tabla en la base de datos: solo se crean claves de configuración estándar. La desinstalación las elimina por completo.
Configuración
Todos los ajustes están en la pantalla de configuración del módulo. Los cambios se aplican de inmediato en la tienda, sin necesidad de vaciar la caché.
Posición de las miniaturas
- Izquierda (vertical) — columna de miniaturas a la izquierda de la imagen principal. Es el ajuste por defecto.
- Derecha (vertical) — columna a la derecha de la imagen principal.
- Abajo (horizontal) — banda horizontal bajo la imagen principal.
En móvil (menos de 768 px), las miniaturas pasan siempre a una banda horizontal desplazable bajo la imagen principal, sea cual sea el ajuste elegido.
Modo y nivel de zoom
- Al pasar el ratón (zoom interno) — el zoom sigue el cursor dentro de la imagen. Activo solo en dispositivos con puntero preciso (escritorio), detectados automáticamente.
- Clic (abre la pantalla completa) — sin zoom al pasar el ratón; un clic abre el visor a pantalla completa.
- Desactivado — ninguna interacción de zoom en la escena.
El nivel de zoom define el factor de aumento del zoom al pasar el ratón, de 1,5 a 4. El valor recomendado está entre 2 y 3.
Al primer paso del ratón, el módulo precarga en segundo plano la imagen original que usted subió (sin redimensionar) y la usa para el zoom. Cuanto más grandes sean sus imágenes originales, más nítido será el zoom.
Visor a pantalla completa y pellizco
Con el visor a pantalla completa activado, un clic en la imagen principal (o en el botón de ampliar en la esquina inferior derecha) abre un visor inmersivo sobre fondo oscuro: contador de imágenes, flechas, cierre con la tecla Escape o con un clic en el fondo.
La opción Zoom con pellizco en móvil activa en este visor el pellizco de dos dedos (hasta 4x), el doble toque para ampliar y reducir, y el arrastre de la imagen ampliada. En escritorio, la rueda del ratón amplía.
Filtrado de imágenes por combinación
- Estricto — solo se muestran las imágenes asociadas a la combinación seleccionada.
- Inteligente (recomendado) — las imágenes de la combinación aparecen primero, seguidas de las demás imágenes del producto.
- Desactivado — todas las imágenes se muestran siempre.
En todos los modos, si la combinación seleccionada no tiene imágenes asociadas, se muestra la galería completa como respaldo. La galería se resincroniza automáticamente en cada cambio de variante, incluso tras el refresco AJAX del bloque de imágenes por el núcleo de PrestaShop.
Carga diferida y precarga LCP
- Carga diferida (lazy loading) — solo la primera imagen se carga de inmediato; las miniaturas a partir de la cuarta y las imágenes siguientes se cargan en diferido. Las imágenes vecinas se precargan en cada navegación para transiciones instantáneas.
- Precargar la imagen de portada (LCP) — añade en la cabecera de la página una indicación de precarga de prioridad alta para la imagen de portada, mejorando el Largest Contentful Paint de la ficha de producto.
- Mostrar las flechas de navegación — muestra flechas anterior / siguiente sobre la imagen principal (visibles al pasar el ratón en escritorio, siempre visibles en móvil).
Asociar imágenes a las combinaciones
El filtrado por combinación se apoya en las asociaciones nativas de PrestaShop, sin configuración adicional en el módulo:
- Abra la ficha de producto en el back office, pestaña Combinaciones.
- Abra cada combinación y marque las imágenes que le corresponden en la sección Imágenes.
- Guarde: la galería usará estas asociaciones de inmediato en la tienda.
Buena práctica: asocie a cada combinación sus fotos específicas (color, acabado) y deje sin asociar las fotos genéricas (ambientes, guías de tallas). En modo inteligente seguirán visibles después de las fotos de la combinación.
Comportamiento en la tienda
En escritorio
- Al pasar el ratón por la imagen: zoom interno que sigue el cursor (con el modo correspondiente activo).
- Clic en la imagen o en el botón de ampliar: se abre el visor a pantalla completa.
- Flechas del teclado para navegar, Escape para cerrar, rueda del ratón para ampliar en el visor.
En móvil
- Deslizamiento horizontal sobre la imagen principal para cambiar de imagen.
- Toque en la imagen: se abre la pantalla completa.
- Dentro de la pantalla completa: pellizco de dos dedos, doble toque, deslizamiento para navegar, contador de posición.
Rendimiento y LCP
El módulo está diseñado para mejorar los Core Web Vitals de la ficha de producto, no para degradarlos:
- La imagen de portada se anuncia como precarga de prioridad alta en la cabecera de la página (opcional).
- La primera imagen de escena se carga con prioridad alta y decodificación asíncrona.
- Las miniaturas usan la carga diferida nativa del navegador; la imagen original para el zoom solo se carga al primer paso del ratón.
- El JavaScript se carga al final de la página, sin dependencias externas.
Compatibilidad de temas y solución de problemas
El módulo apunta a los contenedores de imágenes estándar de los temas basados en classic. Si su tema usa una estructura completamente distinta, la galería nativa sigue mostrándose tal cual, sin errores.
- La galería no aparece — compruebe que su tema exponga un contenedor de imágenes estándar en la ficha de producto. Contacte con nuestro soporte con la URL de una ficha: la adaptación a un tema específico suele ser rápida.
- El zoom se ve borroso — la nitidez del zoom depende de la resolución de las imágenes originales subidas. Suba imágenes de al menos 1500 px de ancho para un resultado óptimo.
- El filtrado no reacciona al cambio de combinación — compruebe que las imágenes estén asociadas a las combinaciones en la pestaña Combinaciones de la ficha de producto, y que el modo de filtrado no esté en Desactivado.
- Vista rápida — la ventana de vista rápida conserva deliberadamente la galería nativa para evitar interferencias con el JavaScript del núcleo.
Desinstalación
La desinstalación desde el gestor de módulos elimina todas las claves de configuración del módulo. No queda ningún dato residual: el módulo no creó tablas, ni overrides, ni archivos fuera de su propia carpeta.
Changelog
- 1.0.0 (16/07/2026) — Versión inicial: zoom HD al pasar el ratón basado en la imagen original, visor a pantalla completa con pellizco, filtrado de imágenes por combinación (estricto / inteligente), precarga LCP, carga diferida, miniaturas verticales u horizontales, traducciones FR, EN, ES, DE, IT.