Polaco 
Inglês Kowal_ProductGalleryHover é um módulo que adiciona às listas de produtos (vista de categoria) em Magento 2 uma funcionalidade moderna de galeria hover, ou seja, a pré-visualização de fotografias adicionais do produto diretamente ao nível da categoria. O utilizador pode ver as fotografias seguintes ao passar o cursor ou ao deslizar com o dedo (em dispositivos móveis), sem ter de aceder à página do produto.
WhatsApp
+48608012047view.xml) para minimizar a transferência de dados.O módulo foi concebido com foco no máximo desempenho. Não modifica o layout do Magento nem a estrutura DOM – funciona como um script JS leve que:
mouseenter / touchstart nos elementos dos produtos.Além disso, o módulo utiliza IntersectionObserver, um mecanismo nativo de lazy loading que carrega automaticamente as galerias dos produtos visíveis no viewport. Assim, o utilizador vê imediatamente galerias prontas, enquanto a página mantém o seu desempenho.
O módulo foi otimizado para não afetar negativamente o crawl budget, o LCP, o CLS nem o TBT. Todas as imagens dinâmicas são carregadas após o carregamento do conteúdo principal da página (inicialização em before.body.end), tornando o módulo totalmente seguro em termos de SEO e desempenho.
As lojas e-commerce modernas devem oferecer acesso rápido e intuitivo às informações do produto. O módulo Kowal_ProductGalleryHover proporciona exatamente isso — uma pré-visualização interativa sem atrasos, sem risco de perda de desempenho, totalmente compatível com Magento 2 e com as boas práticas de SEO.
A SMMASH é uma loja de vestuário desportivo, onde o produto é vendido não só pelo corte e tamanho, mas também pela energia do padrão, cor, estampado e adequação a uma atividade específica. A marca comunica através de coleções visuais fortes e de uma ampla divisão por modalidades desportivas: MMA, OCR, Crossfit, corrida, BJJ, Muay Thai, judo, boxe e kickboxing.
A loja opera no setor do vestuário, mas o seu catálogo exige uma apresentação mais dinâmica do que uma loja clássica de moda. Os produtos diferem frequentemente em detalhes gráficos, construção, finalidade de treino e forma de utilização. Para o utilizador, uma pré-visualização rápida de um segundo ângulo, cor ou variante visual pode ser mais importante do que o próprio nome do produto.
A SMMASH combina a venda de vestuário técnico com um forte caráter visual da marca. A oferta inclui produtos para homem, mulher e criança, bem como vestuário de clube e projetos personalizados. No site são visíveis categorias lifestyle e desportivas, entre as quais Combat, OCR, Treino e Corrida, o que mostra que o cliente navega frequentemente pelos produtos segundo o estilo de atividade, e não apenas segundo o tipo de roupa.
Um elemento importante da loja é também a apresentação de projetos e visualizações. No caso do vestuário desportivo, a decisão de compra está fortemente ligada ao aspeto do produto: cores intensas, padrões, contrastes e disposição do estampado têm de ser visíveis já ao nível da listagem.
O maior desafio num catálogo deste tipo é conciliar duas necessidades:
No vestuário desportivo, uma imagem estática na listagem muitas vezes não é suficiente. O cliente quer ver rapidamente como é o produto noutro ângulo, como assenta o estampado, se a cor é suficientemente expressiva e se o produto se adequa a um estilo de treino específico.
Ao mesmo tempo, uma loja com um catálogo alargado não pode carregar demasiadas imagens logo de início, porque isso sobrecarregaria a página, pioraria a experiência em mobile e poderia influenciar negativamente os Core Web Vitals.
Para este tipo de loja, funciona particularmente bem um mecanismo de galeria de produto ativado ao passar o cursor ou ao tocar no produto. A listagem mantém-se leve no primeiro render, mas o utilizador pode pré-visualizar rapidamente a imagem seguinte sem sair da categoria.
Pressupostos principais:
No caso da SMMASH, este mecanismo permite mostrar mais valor do produto já na listagem: estampado, esquema de cores, detalhe, ângulo alternativo ou forma de apresentação do produto no corpo.
O utilizador pode comparar produtos mais rapidamente sem abrir várias páginas de produto. Isto é particularmente importante quando o catálogo inclui muitos tipos de vestuário semelhantes, mas cada produto tem um design gráfico diferente.
Benefícios:
A SMMASH vende produtos com uma forte componente visual. No caso de rashguards, t-shirts, leggings, calções ou maillots desportivos, o cliente reage frequentemente ao aspeto antes de analisar os detalhes técnicos. Por isso, a listagem deve funcionar não apenas como catálogo, mas também como um lookbook rápido.
O mecanismo hover/swipe ajuda a mostrar:
A SMMASH é um exemplo de uma loja de vestuário em que a apresentação visual faz parte do produto. A cor, o estampado e a energia do design têm impacto direto na decisão de compra. A galeria ativada na listagem permite mostrar estes elementos mais rapidamente, sem sobrecarregar o primeiro carregamento da página.
Slumbersac é uma loja de sacos-cama infantis, na qual o produto pertence ao setor do vestuário, mas a decisão de compra é mais técnica do que no fashion clássico. O pai ou a mãe escolhe não só o padrão e o tamanho, mas também a construção do saco-cama, a espessura TOG, a estação, o material e os detalhes práticos relacionados com a segurança e o conforto da criança.
A oferta inclui, entre outros, sacos-cama com pernas, sacos-cama clássicos, variantes sazonais 0.5 TOG, 1.0 TOG, 2.5 TOG e 3.5 TOG, bem como soluções como mangas amovíveis e pernas dobráveis com ABS.
Na Slumbersac, o produto tem de ser explicado visualmente. O pai ou a mãe quer perceber rapidamente em que difere um modelo específico: se tem pernas, se as mangas são amovíveis, que intervalo de temperaturas suporta, se é adequado para o verão, inverno ou todo o ano.
No site são visíveis mensagens de produto e de confiança, entre outras mangas amovíveis, pernas dobráveis com ABS, classificação Google 4,8, envio rápido e comunicação do saco-cama mais escolhido. Isto mostra que a loja combina a apresentação emocional dos padrões com uma argumentação muito prática.
Numa loja de sacos-cama infantis, a lista de produtos tem de suportar vários tipos de informação ao mesmo tempo:
Uma imagem no listing pode mostrar a estampa, mas nem sempre explica a construção. Para o pai ou a mãe, é importante distinguir rapidamente um saco-cama clássico de um saco-cama com pernas ou de uma variante com mangas amovíveis.
O segundo desafio é o mobile. As compras de produtos infantis acontecem frequentemente no telemóvel, por isso a interação tem de funcionar de forma natural: o scroll da página não pode ser bloqueado e a passagem para a imagem seguinte deve ser simples.
Para a Slumbersac, é valioso alargar o listing de produtos com uma pré-visualização rápida da imagem seguinte do produto. Ao passar o cursor ou deslizar em mobile, o utilizador pode ver uma imagem adicional que mostra a construção do saco-cama ou um detalhe prático.
Pressupostos principais:
Numa loja deste tipo, um atributo dedicado de imagem, por exemplo on_hover, é especialmente útil. Graças a ele, a equipa da loja pode decidir por si própria qual a imagem que melhor explica o produto no listing.
Exemplos de utilização:
Isto é importante, porque a segunda imagem automática da galeria nem sempre tem de ser a melhor imagem de venda. No caso de produtos técnico-vestuário, é melhor dar ao merchandiser controlo sobre aquilo que o cliente verá como primeira interação.
O pai ou a mãe pode avaliar mais rapidamente se o produto responde a uma necessidade específica: um saco-cama mais quente para o inverno, um modelo leve para todo o ano, um saco-cama com pernas para uma criança que anda, ou um modelo com mangas amovíveis.
Benefícios:
A Slumbersac vende produtos que são ao mesmo tempo roupa, acessório de sono e produto funcional para a criança. A estética do padrão é importante, mas o pai ou a mãe observa com igual atenção as soluções práticas.
A galeria hover/swipe ajuda a mostrar:
on_hover para indicar a melhor imagem funcional,A Slumbersac é um exemplo de uma loja de vestuário em que a imagem do produto tem de explicar a função, não apenas o aspeto. Uma segunda imagem bem escolhida no listing pode mostrar o detalhe que decide a compra: pernas, mangas, material ou forma do saco-cama. O mecanismo hover/swipe e a imagem dedicada on_hover dão à loja maior controlo sobre a rapidez com que o cliente compreende o produto.
