# Acrescentar hotspots de produto numa imagem PrestaShop para vender um conjunto completo > Um ponto colocado em píxeis fica no sítio errado assim que a imagem muda de tamanho. Onde colocar os pontos, como tratar o tátil onde não existe rato, e o elemento que resolve sozinho a acessibilidade e a indexação. - Página: - Idioma: pt - Publicado em: 2026-10-06 - Atualizado em: 2026-10-06 - Outros idiomas: [fr](https://www.datafirefly.com/2026/10/06/hotspots-produits-image-prestashop/index.md), [en](https://www.datafirefly.com/en/2026/10/06/product-hotspots-image-prestashop/index.md), [es](https://www.datafirefly.com/es/2026/10/06/hotspots-productos-imagen-prestashop/index.md), [de](https://www.datafirefly.com/de/2026/10/06/produkt-hotspots-bild-prestashop/index.md), [it](https://www.datafirefly.com/it/2026/10/06/hotspot-prodotti-immagine-prestashop/index.md), [pl](https://www.datafirefly.com/pl/2026/10/06/hotspoty-produktowe-obraz-prestashop/index.md), [nl](https://www.datafirefly.com/nl/2026/10/06/producthotspots-afbeelding-prestashop/index.md) - Índice: Uma fotografia de ambiente mostra um conjunto completo, um interior mobilado, uma bancada equipada. O visitante vê o todo e não sabe que produtos o compõem nem onde os encontrar. Os hotspots resolvem este problema, desde que sejam colocados e implementados corretamente. O interesse comercial deste formato foi tratado à parte. Este artigo trata da implementação. ## Onde colocar os pontos Quatro regras, por ordem de importância. **Sobre o produto, não ao lado.** Um ponto colocado no centro do objeto é compreendido de imediato. Um ponto a flutuar a alguns centímetros obriga a adivinhar o que designa. **Espaçados pelo menos o tamanho de um dedo.** Dois pontos demasiado próximos são impossíveis de distinguir ao toque. Conte uma distância equivalente à zona tátil mínima entre dois centros. **Cinco a oito no máximo por imagem.** Acima disso, a imagem torna-se uma sementeira de pastilhas e o visitante não abre nenhuma. Se o seu visual contém doze produtos, mostre oito e proponha a lista completa por baixo. **Sobre zonas legíveis.** Um ponto numa zona muito escura ou muito texturada desaparece. Preveja um contorno ou uma sombra para garantir a visibilidade seja qual for o fundo. ## O problema das coordenadas Principal dificuldade técnica, e está subestimada. Um ponto colocado a 340 píxeis da margem esquerda numa imagem de 1200 píxeis fica no sítio errado assim que a imagem é apresentada a 380 píxeis num telemóvel. A regra: **guarde as coordenadas em percentagem** da largura e da altura, nunca em píxeis. O ponto fica no lugar seja qual for o tamanho de apresentação. Segunda armadilha: o recorte. Se a sua imagem for recortada de forma diferente conforme o formato de ecrã, larga no computador e quadrada no telemóvel, os pontos calculados numa estão errados na outra. Duas respostas possíveis. Usar a **mesma imagem** em todo o lado, apenas redimensionada. Ou definir **conjuntos de coordenadas distintos** por formato, o que duplica o trabalho de colocação. A primeira solução é a mais simples e chega na grande maioria dos casos. ## O comportamento tátil É o que decide o uso real, já que este formato é muito consultado no telemóvel. No computador, passar o rato mostra uma pré-visualização e o clique leva ao produto. Num ecrã tátil não existe rato, e transpor diretamente esse comportamento produz uma interface inutilizável. Três opções para o tátil. **Um toque abre a pré-visualização, um segundo leva ao produto.** Comportamento comum, com o inconveniente de exigir dois gestos. **Um toque abre uma ficha compacta** com imagem, nome, preço e botão de adição ao carrinho. O visitante pode comprar sem sair da imagem, o que é comercialmente o melhor comportamento. **Um toque leva diretamente ao produto.** Rápido, e faz perder o contexto da imagem, o que é pena num conjunto completo. A segunda opção é a que converte melhor, porque permite compor várias compras a partir da mesma imagem. Duas precisões de implementação. A **zona tátil** tem de ser maior do que o ponto visível, pelo menos quarenta e quatro píxeis de lado. E o fecho da pré-visualização tem de ser possível com um toque no exterior, não só numa cruz pequena. ## A acessibilidade Ponto sistematicamente descurado neste formato e, no entanto, tratável em poucas linhas. Uma imagem com zonas clicáveis levanta três questões. **A própria imagem** tem de ter um texto alternativo a descrever a cena, não a lista dos produtos. «Sala com sofá cinzento, mesa de centro em carvalho e candeeiro de pé» chega. **Cada ponto** tem de ser um elemento interativo com nome, com o nome do produto que designa. Um ponto sem descrição é um botão mudo para um leitor de ecrã. **A navegação por teclado** tem de permitir chegar a cada ponto por uma ordem lógica e abrir a pré-visualização com a tecla de ativação. Acrescente um elemento que resolve tudo: **uma lista textual dos produtos sob a imagem**. Serve os leitores de ecrã, quem usa teclado, os motores e os visitantes que preferem uma lista. É o complemento mais rentável deste dispositivo, e conta também para as exigências de acessibilidade do Decreto-Lei n.º 82/2022. ## O que os motores veem Os hotspots são construídos por scripts e o conteúdo deles não é necessariamente legível. Três consequências práticas. As **ligações para os produtos** têm de ser ligações verdadeiras no código, não elementos clicáveis geridos apenas por script. Caso contrário perde uma malha natural entre a sua página de ambiente e as suas fichas. O **texto alternativo** da imagem leva a informação sobre a cena, o que ajuda a pesquisa de imagens. A **lista sob a imagem**, referida acima, torna o conteúdo inteiramente legível sem depender da execução de scripts. ## O desempenho Uma imagem de lookbook é geralmente grande e pesada. Três precauções. **Servir a dimensão certa** conforme o ecrã, com formatos adaptativos. Uma imagem de 2400 píxeis num telemóvel é desperdício puro. **Declarar as dimensões** para reservar o espaço e evitar que a página salte quando a imagem chega. **Carregar os pontos depois da imagem**, mas reservar a posição deles desde o início para que não apareçam deslocados. Ponto complementar: se tiver várias imagens de lookbook na mesma página, carregue apenas a primeira de imediato e difira as seguintes. ## O conteúdo da pré-visualização Cinco elementos, não mais. A **miniatura** do produto, que confirma visualmente do que se trata. O **nome**, completo mas curto. O **preço**, com a menção de indisponibilidade se for o caso. O **botão de adição ao carrinho**, ou de escolha de tamanho se o produto tiver declinações. A **ligação para a ficha completa**, para quem quiser saber mais. Nos produtos com declinações, coloca-se a questão do tamanho. Duas abordagens: abrir um seletor na pré-visualização, ou remeter para a ficha. A primeira converte melhor nos produtos simples de escolher, a segunda evita erros nos produtos em que a escolha exige reflexão. ## A manutenção Aspeto muitas vezes descoberto ao fim de alguns meses. Uma imagem de lookbook envelhece com o catálogo. Três situações a tratar. **O produto está esgotado.** O ponto deve manter-se, com a menção de indisponibilidade e eventualmente um alerta de regresso a stock. Eliminá-lo deixa um buraco na imagem sem explicação. **O produto foi retirado definitivamente.** Duas opções: retirar o ponto, ou redirecioná-lo para um produto equivalente com uma menção explícita. **A imagem inteira fica obsoleta.** Uma coleção passada. Preveja uma data de fim por imagem, ou no mínimo uma revisão periódica. Um controlo útil, a automatizar: listar os pontos que apontam para produtos inativos ou eliminados. Numa loja que acumulou vinte lookbooks, esta lista enche-se depressa. ## Medir Três indicadores. A **taxa de interação** com os pontos, sobre as visualizações da imagem. Diz-lhe se o dispositivo é compreendido e notado. O **número de produtos diferentes abertos** por sessão. É o interesse próprio do formato: um visitante que abre três está a compor um conjunto. O **valor médio do carrinho das sessões** que passaram por um lookbook, comparado com as outras. É aí que o formato se justifica ou não. O monta este dispositivo no PrestaShop 8 e 9: colocação dos pontos em coordenadas relativas para se manterem certos em todos os tamanhos, ficha compacta com adição ao carrinho no toque, lista textual dos produtos sob a imagem para a acessibilidade e a indexação, e deteção dos pontos que apontam para produtos inativos.