# Galeria de Produto PrestaShop: guia completo > 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… - Página: - Idioma: pt - Atualizado em: 2026-09-03 - Outros idiomas: [fr](https://www.datafirefly.com/documentation/dfgallerypro/index.md), [en](https://www.datafirefly.com/en/documentation/dfgallerypro/index.md), [es](https://www.datafirefly.com/es/documentation/dfgallerypro/index.md), [de](https://www.datafirefly.com/de/documentation/dfgallerypro/index.md), [it](https://www.datafirefly.com/it/documentation/dfgallerypro/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfgallerypro/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfgallerypro/index.md) - Índice: ## 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 1. No back-office, abra **Módulos → Gestor de módulos**. 2. Clique em **Instalar um módulo** e selecione o arquivo `dfgallerypro.zip`. 3. 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: 1. Abra a ficha de produto no back-office, separador **Declinações**. 2. Abra cada declinação e marque as imagens que lhe correspondem na secção **Imagens**. 3. 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).