# DF Product Story: blocos de storytelling na ficha de produto > Apresentação O DF Product Story acrescenta secções de storytelling ricas às suas fichas de produto PrestaShop 8 e 9: blocos imagem + texto alternados, vídeo click-to-play, tabela comparativa, grelha de… - Página: - Idioma: pt - Atualizado em: 2026-09-02 - Outros idiomas: [fr](https://www.datafirefly.com/documentation/dfproductstory/index.md), [en](https://www.datafirefly.com/en/documentation/dfproductstory/index.md), [es](https://www.datafirefly.com/es/documentation/dfproductstory/index.md), [de](https://www.datafirefly.com/de/documentation/dfproductstory/index.md), [it](https://www.datafirefly.com/it/documentation/dfproductstory/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfproductstory/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfproductstory/index.md) - Índice: ## Apresentação O DF Product Story acrescenta secções de storytelling ricas às suas fichas de produto PrestaShop 8 e 9: blocos imagem + texto alternados, vídeo click-to-play, tabela comparativa, grelha de ícones de benefícios e texto livre. As stories compõem-se num builder drag & drop no back-office e aparecem depois automaticamente nos produtos ou categorias que segmentar, sob a descrição ou num separador dedicado. Uma story atribuída a uma categoria cobre automaticamente todos os seus produtos. As atribuições diretas a produtos mantêm a prioridade: ideal para dar um conteúdo específico aos seus best-sellers. Os títulos de separador por defeito são fornecidos em FR/EN/ES/DE/IT. Numa loja em português, preencha o campo multilingue « Título do separador » em pt na página de configuração, caso contrário o separador aparece em inglês. ## Instalação 1. No seu back-office PrestaShop, vá a **Módulos > Gestor de módulos > Instalar um módulo**. 2. Carregue o ficheiro `dfproductstory-1.1.0.zip`. 3. Clique em **Instalar**. O módulo cria as suas tabelas, o seu separador de administração e os títulos de separador por defeito em FR/EN/ES/DE/IT. Depois da instalação, ficam disponíveis duas entradas: a página de configuração do módulo (Módulos > DF Product Story > Configurar) e o gestor de stories em **Catálogo > DF Product Story**. ## Configuração geral A página de configuração do módulo contém quatro definições: - **Local de apresentação**: « Sob o conteúdo do produto » (hook displayFooterProduct, por defeito) ou « Separador de produto adicional » (hook displayProductExtraContent, ao lado da descrição). - **Título do separador**: etiqueta multilingue usada apenas em modo separador. São fornecidos valores por defeito nos cinco idiomas. - **Lazy-load dos vídeos**: ativado por defeito. Substitui os iframes YouTube/Vimeo por uma fachada click-to-play leve, vivamente recomendado para os Core Web Vitals. - **Carregar Font Awesome (CDN)**: desativado por defeito. Carrega o Font Awesome 6 nas fichas de produto para usar classes como « fa-solid fa-star » nos ícones de benefícios. Inútil se o seu tema já incluir o Font Awesome. ## Criar uma story 1. Vá a **Catálogo > DF Product Story** e clique em **Adicionar uma story**. 2. Preencha o **nome interno** (nunca mostrado no front-office), a **prioridade** (quanto mais baixo o número, mais acima aparece a story quando várias se acumulam) e o estado **Ativo**. 3. Adicione os seus blocos através dos botões **+ Adicionar um bloco**, preencha-os e clique em **Guardar a story**. A gravação é feita em AJAX: permanece na página e pode encadear as alterações. Um toast confirma cada gravação. ## Os 5 tipos de blocos ### Imagem + texto O bloco de assinatura do storytelling: uma imagem de um lado, um título e um texto do outro. Escolha a posição da imagem (esquerda ou direita) e alterne os blocos para criar um ritmo visual em zigue-zague. A imagem é carregada diretamente a partir do builder (jpg, png, webp, gif, 4 MB no máximo). O campo de texto aceita HTML. ### Vídeo Três fontes possíveis: **YouTube** (cole qualquer URL watch, embed, shorts ou youtu.be), **Vimeo** ou **MP4 direto** (URL completo do ficheiro). Com o lazy-load ativado, o YouTube e o Vimeo aparecem como fachada click-to-play com miniatura: o iframe só é carregado ao clicar, via youtube-nocookie.com e o parâmetro dnt=1 do Vimeo. O campo de legenda aparece sob o vídeo. ### Tabela comparativa Adicione tantas colunas e linhas quantas precisar com os botões + Coluna / + Linha. A definição **Coluna em destaque** aplica um realce azul à coluna da sua escolha, prático para orientar para a sua gama principal. A tabela desloca-se horizontalmente em telemóvel. ### Ícones de benefícios Uma grelha de 2 a 4 colunas de argumentos-chave. Cada item tem um ícone (um emoji, uma classe Font Awesome como « fa-solid fa-star » ou o caminho de uma imagem carregada), um título e um texto. Os itens reordenam-se com as setas. ### Texto Um título e um conteúdo HTML livre, para as secções narrativas longas ou qualquer necessidade não coberta pelos outros blocos. ## Organizar os blocos - **Drag & drop**: agarre a pega ⋮⋮ de um bloco e largue-o na sua nova posição. - **Setas** ↑ ↓: alternativa de teclado/rato ao drag & drop. - **Duplicar**: copia o bloco com todas as suas definições e conteúdos em todos os idiomas. - **Eliminar**: pede confirmação antes de retirar o bloco. ## Traduzir o conteúdo No topo do painel dos blocos, separadores mostram cada idioma ativo da sua loja (PT, EN, ES…). Clique num separador para mudar todos os editores para esse idioma: títulos, textos, colunas de tabela e itens de benefícios traduzem-se de forma independente. As definições estruturais (posição da imagem, fonte do vídeo, número de colunas) são partilhadas entre todos os idiomas. Lembre-se de guardar antes de sair da página: os conteúdos introduzidos em todos os idiomas são enviados numa única gravação. ## Segmentar produtos e categorias O painel Segmentação funciona em dois níveis: - **Produtos segmentados**: pesquise por nome, referência ou ID e clique num resultado para o adicionar como chip. Se pelo menos um produto estiver selecionado, a story só aparece nesses produtos. - **Categorias (alternativa)**: marque categorias na árvore. A story aparece em todos os produtos que pertencem a essas categorias, salvo se já existir uma story de produto direta para eles. Quando várias stories correspondem a um mesmo produto, aparecem todas, ordenadas por prioridade crescente. ## Multiloja Em contexto multiloja, uma story criada a partir do contexto « Todas as lojas » é visível em toda a rede. Uma story criada a partir de uma loja precisa fica limitada a essa loja. ## Desempenho e RGPD - O CSS e o JS do front-office só são carregados nas fichas de produto. - As imagens dos blocos usam o lazy loading nativo do navegador. - Os vídeos em fachada click-to-play não carregam nenhum script de terceiros antes do clique do visitante, via youtube-nocookie.com e Vimeo dnt=1: nenhum cookie de terceiros é colocado no carregamento da página. - O CSS do front-office é neutro e herda a tipografia do seu tema. ## Desinstalação A desinstalação elimina as tabelas do módulo, as stories e blocos, as atribuições, o separador de administração e os valores de configuração. As imagens carregadas na pasta do módulo são igualmente retiradas com ele. ## FAQ / Resolução de problemas ### A story não aparece no front-office - Verifique que a story está **ativa** e que contém pelo menos um bloco com conteúdo no idioma consultado. - Verifique a segmentação: se houver produtos selecionados, a story só aparece neles; caso contrário, segue as categorias marcadas. - Em modo separador, alguns temas fortemente personalizados não implementam displayProductExtraContent: mude para « Sob o conteúdo do produto ». ### O vídeo YouTube não aparece Verifique que o URL contém um identificador de vídeo válido (formatos watch?v=, youtu.be/, embed/ ou shorts/ aceites). As playlists isoladas não são suportadas. ### O carregamento de imagem falha Formatos aceites: jpg, jpeg, png, webp, gif, tamanho máximo 4 MB. Verifique também que a pasta do módulo tem permissão de escrita para o servidor web.