# Lookbook Comprável: Shop the Look > O módulo Lookbook Comprável — Shop the Look transforma as suas fotografias de ambiente em montras interativas: coloca pontos clicáveis (hotspots) sobre os produtos visíveis numa imagem, e os seus… - Página: - Idioma: pt - Atualizado em: 2026-09-09 - Outros idiomas: [fr](https://www.datafirefly.com/documentation/dfshopthelook/index.md), [en](https://www.datafirefly.com/en/documentation/dfshopthelook/index.md), [es](https://www.datafirefly.com/es/documentation/dfshopthelook/index.md), [de](https://www.datafirefly.com/de/documentation/dfshopthelook/index.md), [it](https://www.datafirefly.com/it/documentation/dfshopthelook/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfshopthelook/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfshopthelook/index.md) - Índice: O módulo **Lookbook Comprável — Shop the Look** transforma as suas fotografias de ambiente em montras interativas: coloca pontos clicáveis (hotspots) sobre os produtos visíveis numa imagem, e os seus visitantes podem descobrir cada artigo e adicionar o look completo ao carrinho com um só clique. Esta documentação abrange a instalação, a criação de um look, a escolha das combinações, os modos de exibição e o comportamento na loja. ## Compatibilidade - PrestaShop 8.0 a 8.2 - PrestaShop 9.0 - Loja única e multiloja - Interface traduzida em 8 idiomas (EN, FR, DE, ES, IT, PL, PT, NL) - Temas baseados no Classic ## Instalação 1. Vá a **Módulos > Gestor de módulos** no seu back-office. 2. Clique em **Carregar um módulo** e selecione o ficheiro `dfshopthelook.zip`. 3. Depois de instalado, surge um novo separador **Shop The Look** no menu **Catálogo**. Na instalação, o módulo regista automaticamente os seus hooks de exibição (página inicial e página de produto) e cria as tabelas necessárias para armazenar os looks e os seus hotspots. ## Criar o primeiro look Abra **Catálogo > Shop The Look** e clique em **Adicionar um novo look**. ### 1. Indicar o título e a imagem Introduza um **título** (traduzível por idioma) e, se quiser, uma breve **descrição**. Carregue depois a **imagem do look**: JPG, PNG, GIF ou WEBP, 8 MB no máximo, de preferência com pelo menos 1200 px de largura. Assim que seleciona o ficheiro, surge de imediato uma pré-visualização no editor, ainda antes de guardar. ### 2. Colocar os hotspots Clique diretamente na imagem no local onde se encontra um produto: abre-se uma janela de pesquisa. Escreva o **nome** ou a **referência** do produto e selecione-o na lista (as miniaturas facilitam a identificação). Pode reposicionar um ponto a qualquer momento **arrastando-o** com o rato. As coordenadas são guardadas em percentagem, o que garante um posicionamento fiel qualquer que seja o tamanho de exibição da imagem na loja. ### 3. Escolher a combinação visível na fotografia Se o produto selecionado tiver combinações, surge um segundo passo: **«Que combinação é visível na fotografia?»**. Escolha a combinação exata mostrada na imagem (por exemplo «Cor: Cru, Tamanho: M»), ou deixe **Combinação predefinida** se o visual não mostrar nenhuma variante em particular. Essa combinação continua **modificável a qualquer momento**: cada ponto da lista sob a imagem dispõe da sua própria lista pendente. Pode assim corrigir uma cor ou um tamanho num look guardado há muito tempo, sem eliminar e voltar a colocar o hotspot. Se uma combinação fixada for posteriormente removida do catálogo, a lista volta automaticamente a «Combinação predefinida». ### 4. Gerir a lista de pontos Sob a imagem, cada hotspot aparece com o seu número, o produto associado, a sua combinação e as suas coordenadas. Utilize o ícone do caixote do lixo para remover um ponto. Pode colocar tantos hotspots quantos precisar e até associar vários pontos ao mesmo produto. ### 5. Destaque e gravação Ative **Em destaque na página inicial** se este look deve alimentar o carrossel da página inicial. Defina a **posição** (ordem de exibição) e o estado **Ativado**, e clique em **Guardar**. Na lista de looks, uma coluna **Em destaque** permite alternar esse estado com um só clique, sem abrir o formulário. ## Configurar a exibição Na página de configuração do módulo (**Gestor de módulos > Configurar**), controla a página inicial e a página de produto de forma independente. ### Dois modos à escolha - **Carrossel**: vários looks apresentados lado a lado sob a forma de cartões. Um clique abre uma janela imersiva. - **Look único expandido**: um só look integrado diretamente na página, imagem à esquerda e lista de produtos à direita, **sem qualquer janela pop-up**. Os dois locais configuram-se separadamente: pode, por exemplo, apresentar um grande look expandido na página inicial e um carrossel na página de produto. ### Página inicial Em modo carrossel são mostrados apenas os looks **em destaque**, até ao limite que definir. Em modo look único, escolha o look pretendido na lista pendente **Look a apresentar na página inicial**, ou deixe «Primeiro look em destaque». Se o look selecionado for posteriormente eliminado ou desativado, o módulo passa automaticamente para o primeiro look em destaque, para evitar um bloco vazio na sua página inicial. ### Página de produto Em modo carrossel são mostrados os looks que contêm o artigo consultado, até ao limite definido. Em modo look único é apresentado expandido o look mais pertinente que contém esse artigo. Não é necessária qualquer seleção manual. ### Escolha da combinação pelo cliente A opção **Permitir que o cliente altere a combinação** apresenta um seletor junto de cada produto na loja. Se desativada, aplicam-se as combinações escolhidas no back office. Ative-a em moda (o cliente escolhe o seu tamanho) e desative-a em decoração se o look deve permanecer fixo. ## Na loja ### O carrossel Um carrossel horizontal apresenta os seus looks sob a forma de cartões. Cada cartão mostra a imagem, um selo com o número de produtos e dois botões ao passar o rato: **Ver o look** e **Comprar o look**. ### A janela «Ver o look» Um clique em **Ver o look** (ou no cartão) abre uma janela imersiva: a imagem ampliada com os seus pontos pulsantes de um lado, a lista de produtos do outro. Passar o rato sobre uma linha de produto destaca o ponto correspondente na imagem, e vice-versa. ### A exibição expandida Em modo look único, o mesmo conteúdo é integrado diretamente na página, sem pop-up. Clicar num ponto destaca a linha de produto correspondente. Em telemóvel, as duas colunas ficam uma sobre a outra. ### Preço e disponibilidade por combinação Cada produto mostra o preço e a imagem da sua combinação, formatados de acordo com a moeda e o idioma ativos. Se o seletor estiver ativado, mudar de combinação atualiza o preço e o estado de stock em direto. Os artigos indisponíveis são assinalados. ### «Comprar o look» num clique O botão **Comprar o look** adiciona ao carrinho, numa só ação, todos os produtos associados ao visual. O módulo: - adiciona a **combinação escolhida** pelo cliente, caso contrário a fixada no back office, e por fim a combinação predefinida; - respeita a **quantidade mínima** definida no produto; - **ignora automaticamente** os artigos esgotados sem reposição autorizada; - **desduplica** os produtos colocados em vários pontos. O carrinho PrestaShop é depois atualizado de forma nativa e uma notificação confirma a adição. Se alguns produtos não puderam ser adicionados, uma mensagem indica-o. ## Multilingue A interface do módulo está traduzida em oito idiomas (EN, FR, DE, ES, IT, PL, PT, NL) e segue o idioma ativo da loja. O título e a descrição de cada look são traduzidos idioma a idioma diretamente no formulário do look. ## Atualização a partir de uma versão anterior As atualizações são automáticas: carregue a nova versão a partir do gestor de módulos e o PrestaShop executa os scripts de migração. Os seus looks, hotspots e imagens são preservados. Após a atualização para a 1.2.0, todos os looks existentes ficam marcados como em destaque e ambos os locais permanecem em modo carrossel: a sua loja comporta-se exatamente como antes e ativa as novidades quando quiser. ## Resolução de problemas **O carrossel não aparece na página inicial.** Verifique que pelo menos um look está ativo _e_ em destaque: desde a 1.2.0, o carrossel da página inicial mostra apenas os looks em destaque. Aliás, surge um aviso na configuração quando nenhum o está. **O bloco não aparece na página de produto.** O bloco só é apresentado se pelo menos um look ativo contiver o produto consultado e a opção correspondente estiver ativada. **O seletor de combinação não aparece.** Só é apresentado se a opção «Permitir que o cliente altere a combinação» estiver ativada e o produto tiver pelo menos duas combinações. **Um produto não é adicionado pelo «Comprar o look».** É o comportamento esperado quando está esgotado sem reposição autorizada, desativado, indisponível para venda ou não associado à loja atual. **O carregamento da imagem falha.** A pasta `modules/dfshopthelook/views/img/looks/` tem de ter permissões de escrita. Caso contrário, surge um aviso na configuração do módulo. ## Desinstalação A desinstalação a partir do gestor de módulos elimina as tabelas do módulo, os looks, os seus hotspots e as imagens de looks carregadas. Lembre-se de guardar uma cópia dos seus visuais antes, se quiser conservá-los.