PrestaShop Diseño & Navegación

Galería de Producto PrestaShop — Zoom HD, Pantalla Completa y Variantes

Galería de producto de nueva generación: zoom HD, miniaturas verticales, pantalla completa móvil con pellizco y filtrado de imágenes por combinación.

La galería de producto que PrestaShop debería haber incluido: zoom de alta resolución, pantalla completa móvil e imágenes filtradas por combinación.

De un vistazo
  • Zoom interno HD al pasar el ratón: cambio automático a la imagen original sin redimensionar
  • Visor a pantalla completa móvil: pellizco de dos dedos, doble toque, deslizamiento, contador de imágenes
  • Filtrado de imágenes por combinación seleccionada, modo estricto o inteligente, resincronizado en cada cambio de variante
  • Carga optimizada LCP: portada precargada con prioridad alta, miniaturas e imágenes vecinas en diferido
  • PrestaShop 8 & 9, sin overrides ni tablas SQL, vanilla JS sin jQuery
PrestaShop 8 & 9 Zoom HD Pellizco móvil Filtro combinaciones LCP optimizado
  • Reembolso de 30 días
  • 12 meses de actualizaciones
  • Soporte 24h
www.datafirefly.com/es/
Galería de producto de PrestaShop con zoom HD y vista a pantalla completa
v1.0.0 · actualizado 2026-07-16
Qué hace

La versión corta.

01

Zoom de alta resolución, de verdad

El zoom al pasar el ratón sigue el cursor con un factor configurable de 1,5 a 4. Al primer paso, la galería precarga silenciosamente la imagen original sin redimensionar y cambia a ella: el zoom se mantiene nítido incluso en fotos muy detalladas, donde el zoom nativo se queda en el formato large.

02

Pantalla completa móvil con pellizco

Visor inmersivo construido sobre Pointer Events: pellizco de dos dedos con límites de desplazamiento recalculados en continuo, doble toque para ampliar, deslizamiento para navegar, contador de imágenes y cierre con la tecla Escape o tocando el fondo. Zoom con rueda en escritorio.

03

Imágenes filtradas por combinación

La galería lee las asociaciones nativas imagen / combinación de la ficha de producto y solo muestra las imágenes pertinentes: modo estricto (solo las imágenes de la combinación) o inteligente (primero las de la combinación, luego las demás). Se resincroniza en cada cambio de variante, incluso tras el refresco AJAX del núcleo.

04

Pensado para el Largest Contentful Paint

La imagen de portada se anuncia como precarga de prioridad alta en la cabecera, la primera imagen de escena se carga con prioridad mientras miniaturas e imágenes siguientes se difieren, y las imágenes vecinas se precargan en cada navegación. Su ficha de producto gana velocidad percibida y medida.

La versión larga

Todo lo que querrías saber antes de instalar.

Una mirada detallada a cómo funciona Galería de Producto PrestaShop — Zoom HD, Pantalla Completa y Variantes, por qué lo construimos así y la lógica detrás de las características anteriores.

§ 01

Sustituir la galería nativa sin tocar el tema

El módulo no sobrescribe ninguna plantilla: inyecta los datos de la ficha de producto al cargar la página y monta la galería con JavaScript en el lugar del bloque de imágenes nativo, que oculta limpiamente. Este enfoque lo hace compatible con el tema classic y la gran mayoría de temas derivados, sin conflictos de plantilla ni deuda de mantenimiento en cada actualización del tema. La vista rápida conserva deliberadamente la galería nativa para evitar interferencias con el núcleo.

§ 02

Un zoom que por fin aprovecha sus fotos a plena resolución

El zoom nativo de PrestaShop se limita al formato large generado por la tienda, a menudo 800 píxeles. Aquí, el zoom interno sigue el cursor con un factor ajustable y, desde el primer paso del ratón, la galería precarga en segundo plano la imagen original que usted subió y cambia a ella de forma invisible. Costuras, texturas y detalles se mantienen nítidos incluso con gran aumento: un argumento real para moda, joyería, mueble o fotografía de producto cuidada.

§ 03

La pantalla completa móvil que sus visitantes esperan

En móvil, el visor a pantalla completa se abre con un toque: fondo oscuro, pellizco de dos dedos con límites de desplazamiento recalculados en continuo, doble toque para ampliar y reducir, deslizamiento horizontal para pasar de una imagen a otra y contador de posición. En escritorio, el mismo visor responde a la rueda del ratón, a las flechas del teclado y a la tecla Escape. La experiencia se acerca a la de los grandes marketplaces, directamente en su tienda.

§ 04

Imágenes coherentes con la combinación elegida

Cuando un cliente selecciona el color coñac, mostrarle las fotos del modelo negro genera dudas y devoluciones. La galería lee la tabla nativa de asociaciones imagen / combinación y filtra la visualización en consecuencia: en modo estricto solo aparecen las imágenes de la combinación; en modo inteligente pasan primero y las demás siguen. Si una combinación no tiene imágenes asociadas, se muestra la galería completa como respaldo. La resincronización ocurre en cada cambio de variante, incluso tras la sustitución AJAX del bloque de imágenes por el núcleo de PrestaShop.