Galeria de Produto PrestaShop: guia completo
Instalar e configurar a galeria de produto: zoom HD, ecrã inteiro em telemóvel, filtragem por declinação e otimizações LCP.
Apresentação
A Galeria de Produto PrestaShop (pasta do módulo dfgallerypro) substitui a galeria de imagens nativa da ficha de produto por uma galeria moderna: zoom interno de alta resolução ao passar o rato, miniaturas verticais ou horizontais, visualizador em ecrã inteiro com pinça em telemóvel, filtragem das imagens por declinação selecionada e estratégia de carregamento otimizada para o Largest Contentful Paint.
O módulo não substitui nenhum template: a galeria é montada em JavaScript no lugar do bloco de imagens nativo, que é ocultado. Não usa nenhuma tabela SQL, nenhum override, e o seu JavaScript é escrito em nativo, sem jQuery.
Instalação
Pré-requisitos
- PrestaShop 8.0 a 9.x
- PHP 7.4 ou superior
- Um tema baseado no tema classic (ou que exponha os contentores de imagens padrão da ficha de produto)
Instalar o módulo
- No back-office, abra Módulos → Gestor de módulos.
- Clique em Instalar um módulo e selecione o arquivo
dfgallerypro.zip. - Terminada a instalação, clique em Configurar.
A instalação não acrescenta nenhuma tabela à base de dados: só são criadas chaves de configuração padrão. A desinstalação elimina-as integralmente.
Configuração
Todas as definições estão no ecrã de configuração do módulo. As alterações são tidas em conta imediatamente do lado da loja, sem limpar a cache.
Posição das miniaturas
- Esquerda (vertical): coluna de miniaturas à esquerda da imagem principal. É a definição por defeito.
- Direita (vertical): coluna à direita da imagem principal.
- Baixo (horizontal): faixa horizontal sob a imagem principal.
Em telemóvel (menos de 768 px), as miniaturas passam sempre a faixa horizontal deslizante sob a imagem principal, qualquer que seja a definição escolhida.
Modo de zoom e nível de zoom
- Passar o rato (zoom interno): o zoom segue o cursor no interior da imagem. Ativo apenas nos dispositivos com ponteiro preciso (computadores), detetados automaticamente.
- Clique (abre o ecrã inteiro): sem zoom ao passar o rato; um clique abre o visualizador em ecrã inteiro.
- Desativado: nenhuma interação de zoom na cena.
O nível de zoom define o fator de ampliação do zoom ao passar o rato, entre 1,5 e 4. O valor recomendado situa-se entre 2 e 3.
Ao primeiro passar do rato, o módulo pré-carrega em segundo plano a imagem fonte original que carregou (sem redimensionamento) e usa-a depois para o zoom. Quanto maiores forem as suas imagens fonte, mais nítido é o zoom.
Visualizador em ecrã inteiro e pinça
Quando o visualizador em ecrã inteiro está ativado, um clique na imagem principal (ou no botão de ampliação em baixo à direita) abre um visualizador imersivo sobre fundo escuro: contador de imagens, setas, fecho pela tecla Esc ou por um clique no fundo.
A opção Zoom por pinça em telemóvel ativa neste visualizador a pinça com dois dedos (até ×4), o duplo toque para ampliar e reduzir, e o deslocamento da imagem ampliada com o dedo. Em computador, a roda do rato permite ampliar.
Filtragem das imagens por declinação
- Estrito: só as imagens associadas à declinação selecionada são apresentadas.
- Inteligente (recomendado): as imagens da declinação são apresentadas primeiro, seguidas das outras imagens do produto.
- Desativado: todas as imagens são sempre apresentadas.
Em todos os modos, se a declinação selecionada não tiver nenhuma imagem associada, a galeria completa é apresentada como recurso. A galeria ressincroniza-se automaticamente a cada mudança de variante, incluindo depois da atualização AJAX do bloco de imagens pelo núcleo do PrestaShop.
Lazy loading e pré-carregamento LCP
- Lazy loading: só a primeira imagem é carregada imediatamente; as miniaturas para lá da quarta e as imagens seguintes são carregadas em diferido. As imagens vizinhas são pré-carregadas a cada navegação para transições instantâneas.
- Pré-carregar a imagem de capa (LCP): acrescenta no cabeçalho da página uma etiqueta de pré-carregamento com prioridade alta para a imagem de capa, o que melhora o Largest Contentful Paint da ficha de produto.
- Mostrar as setas de navegação: mostra setas anterior / seguinte na imagem principal (visíveis ao passar o rato em computador, sempre visíveis em telemóvel).
Associar imagens às declinações
A filtragem por declinação apoia-se nas associações nativas do PrestaShop, sem configuração adicional no módulo:
- Abra a ficha de produto no back-office, separador Declinações.
- Abra cada declinação e marque as imagens que lhe correspondem na secção Imagens.
- Guarde: a galeria usará essas associações imediatamente do lado da loja.
Boas práticas: associe a cada declinação as suas fotografias específicas (cor, acabamento) e deixe as fotografias genéricas (packshots de ambiente, tabelas de dimensões) sem associação. Em modo inteligente, continuarão visíveis depois das fotografias da declinação.
Funcionamento do lado da loja
Em computador
- Passar o rato na imagem: zoom interno que segue o cursor (se o modo passar o rato estiver ativo).
- Clique na imagem ou no botão de ampliação: abertura do visualizador em ecrã inteiro.
- Setas do teclado para navegar, Esc para fechar, roda para ampliar no visualizador.
Em telemóvel
- Deslizar horizontal na imagem principal para passar de uma imagem a outra.
- Toque na imagem: abertura do ecrã inteiro.
- No ecrã inteiro: pinça com dois dedos, duplo toque, deslizar para navegar, contador de posição.
Desempenho e LCP
O módulo foi concebido para melhorar os Core Web Vitals da ficha de produto em vez de os degradar:
- A imagem de capa é anunciada em pré-carregamento com prioridade alta logo no cabeçalho da página (opção ativável).
- A primeira imagem de cena é carregada com o atributo de prioridade alta e uma descodificação assíncrona.
- As miniaturas usam o lazy loading nativo do navegador; a imagem original destinada ao zoom só é carregada ao primeiro passar do rato.
- O JavaScript é carregado no fundo da página, sem dependência externa.
Compatibilidade de temas e resolução de problemas
O módulo visa os contentores de imagens padrão dos temas baseados no classic. Se o seu tema usar uma estrutura inteiramente diferente, a galeria nativa continua a ser apresentada tal como está, sem erro.
- A galeria não aparece: verifique que o seu tema expõe um contentor de imagens padrão na ficha de produto. Contacte o nosso suporte com o URL de uma ficha de produto: a adaptação a um tema específico é geralmente rápida.
- O zoom parece desfocado: a nitidez do zoom depende da resolução das imagens fonte carregadas. Carregue imagens com pelo menos 1500 px de largura para um resultado ótimo.
- A filtragem não reage à mudança de declinação: verifique que as imagens estão associadas às declinações no separador Declinações da ficha de produto, e que o modo de filtragem não está em Desativado.
- Pré-visualização rápida: a janela de pré-visualização rápida conserva voluntariamente a galeria nativa para evitar qualquer interferência com o JavaScript do núcleo.
Desinstalação
A desinstalação a partir do gestor de módulos elimina todas as chaves de configuração do módulo. Não subsiste nenhum dado residual: o módulo não criou nem tabela, nem override, nem ficheiro fora da sua própria pasta.
Changelog
- 1.0.0 (16/07/2026): versão inicial: zoom HD ao passar o rato baseado na imagem original, visualizador em ecrã inteiro com pinça, filtragem das imagens por declinação (estrito / inteligente), pré-carregamento LCP, lazy loading, miniaturas verticais ou horizontais, traduções FR, EN, ES, DE, IT (o português traduz-se em Internacional → Traduções).