PrestaShop Design & Navegação

Galeria de Produto PrestaShop: Zoom HD, Ecrã Inteiro e Filtro de Variantes

Galeria de produto de nova geração: zoom HD, miniaturas verticais, ecrã inteiro no telemóvel com pinça e filtragem das imagens por variante.

A galeria de produto que o PrestaShop devia ter fornecido: zoom de alta resolução, ecrã inteiro no telemóvel e imagens filtradas por variante.

At a glance
  • Zoom interno HD ao passar o rato: mudança automática para a imagem original sem redimensionamento
  • Visualizador de ecrã inteiro no telemóvel: pinça com dois dedos, duplo toque, deslize e contador de imagens
  • Filtragem das imagens pela variante selecionada, em modo estrito ou inteligente, ressincronizada a cada mudança de variante
  • Carregamento otimizado para o LCP: capa pré-carregada com prioridade alta, miniaturas e imagens vizinhas em diferido
  • PrestaShop 8 e 9, sem overrides nem tabelas SQL, JavaScript vanilla sem jQuery
PrestaShop 8 e 9 Zoom HD Pinça no telemóvel Filtro de variantes LCP otimizado
  • Reembolso em 30 dias
  • 12 meses de atualizações
  • Suporte em 24h
www.datafirefly.com/pt/
Galeria de produto PrestaShop com zoom HD e apresentação em ecrã inteiro
v1.0.0 · atualizado 2026-07-16
O que faz

A versão curta.

01

Zoom de alta resolução, a sério

O zoom ao passar o rato segue o cursor com um fator configurável de 1,5 a 4. No primeiro passar do rato, a galeria pré-carrega em silêncio a imagem original sem redimensionamento e muda para ela: o zoom mantém-se nítido mesmo em fotografias muito detalhadas, ao contrário do zoom nativo, que se fica pelo formato largo.

02

Ecrã inteiro no telemóvel com pinça

Visualizador imersivo construído sobre os Pointer Events: pinça com dois dedos e reenquadramento automático, duplo toque para ampliar, deslize para navegar, contador de imagens e fecho com a tecla Esc ou clique no fundo. Zoom com a roda do rato no computador.

03

Imagens filtradas por variante

A galeria lê as associações nativas entre imagens e combinações da ficha de produto e mostra apenas as imagens pertinentes: modo estrito (apenas as imagens da variante) ou inteligente (imagens da variante primeiro e depois as restantes). Volta a sincronizar-se a cada mudança de variante, incluindo depois da atualização AJAX do núcleo.

04

Pensado para o Largest Contentful Paint

A imagem de capa é anunciada em pré-carregamento com prioridade alta logo na etiqueta head, a primeira imagem da cena é carregada com prioridade e as miniaturas e imagens seguintes ficam em diferido, com pré-carregamento das imagens vizinhas a cada navegação. A sua ficha de produto ganha em velocidade percebida e medida.

A versão longa

Tudo o que quer saber antes de instalar.

Uma análise detalhada de como o Galeria de Produto PrestaShop: Zoom HD, Ecrã Inteiro e Filtro de Variantes funciona, porque o construímos assim e o raciocínio por trás das funcionalidades acima.

§ 01

Substituir a galeria nativa sem tocar no tema

O módulo não substitui qualquer template: injeta os dados da ficha de produto no carregamento da página e monta depois a galeria em JavaScript no lugar do bloco de imagens nativo, que oculta de forma limpa. Esta abordagem torna-o compatível com o tema classic e com a grande maioria dos temas que dele derivam, sem conflitos de template nem dívida de manutenção a cada atualização do seu tema. A vista rápida mantém propositadamente a galeria nativa, para evitar qualquer interferência com o núcleo.

§ 02

Um zoom que finalmente aproveita as suas fotografias em resolução total

O zoom nativo do PrestaShop limita-se ao formato largo gerado pela loja, muitas vezes 800 pixels. Aqui, o zoom interno segue o cursor com um fator ajustável e, logo no primeiro passar do rato, a galeria pré-carrega em segundo plano a imagem original que carregou e muda para ela de forma invisível. Costuras, texturas e detalhes mantêm-se nítidos mesmo com muita ampliação, um verdadeiro argumento para moda, joalharia, mobiliário ou fotografia de produto cuidada.

§ 03

O ecrã inteiro no telemóvel que os seus visitantes esperam

No telemóvel, o visualizador de ecrã inteiro abre com um toque: fundo escuro, pinça com dois dedos e limites de deslocamento recalculados continuamente, duplo toque para ampliar e reduzir, deslize horizontal para passar de uma imagem a outra e contador de posição. No computador, o mesmo visualizador responde à roda do rato, às setas do teclado e à tecla Esc. A experiência aproxima-se da dos grandes marketplaces, diretamente na sua loja.

§ 04

Imagens coerentes com a variante escolhida

Quando um cliente seleciona a cor conhaque, mostrar-lhe as fotografias do modelo preto cria dúvidas e devoluções. A galeria lê a tabela nativa das associações entre imagens e combinações e filtra a apresentação em conformidade: em modo estrito, só aparecem as imagens da variante; em modo inteligente, essas passam para a frente e as restantes seguem-se. Se uma combinação não tiver imagens associadas, é apresentada a galeria completa. A ressincronização acontece a cada mudança de variante, incluindo depois da substituição AJAX do bloco de imagens pelo núcleo do PrestaShop.