Siga os passos exatos para colocar um catálogo flipbook interativo em uma página de produto do WooCommerce: converta seu PDF, copie o código de incorporação, adicione-o em uma aba ou na descrição do produto, ajuste para celular e acompanhe quais páginas os compradores realmente leem.
Um cliente chega à página do seu produto, gosta da foto e então faz a pergunta que decide a venda: "Essa linha vem em quais outras opções?" Se a resposta for um link para baixar um PDF, a maioria vai embora. Se a resposta for um catálogo com efeito de virar página logo abaixo da descrição do produto, muitos ficam e continuam navegando. É exatamente isso que você pode criar com o Flipbooks AI e alguns minutos no painel do seu WooCommerce.
Este tutorial mostra o processo completo: transformar um PDF em flipbook, obter o código de incorporação, colocá-lo em uma página de produto e corrigir os problemas de layout que costumam aparecer nas telas de celular.
Um link de PDF força o download, abre outra aba e quebra o fluxo de compra. Já o flipbook carrega dentro da própria página, então o visitante nunca sai da sua loja.
Veja como as duas opções se comparam em uma loja de verdade:
| Funcionalidade | Link de download de PDF | Flipbook incorporado |
|---|---|---|
| Abre dentro da página do produto | Não | Sim |
| Animação de virar página | Não | Sim |
| Funciona bem em celulares | Costuma ser desajeitado | Responsivo |
| Links de produto clicáveis | Às vezes | Sim |
| Estatísticas por página | Não | Sim (plano Professional) |
| Atualiza sem mudar a página | Não | Sim |
💡 Dica de ouro: Um flipbook não substitui a galeria de fotos do produto. Use-o como uma segunda camada para quem quer ver a linha completa, os tamanhos ou as fichas técnicas.
Catálogos reduzem o número de cliques entre "interessado" e "adicionado ao carrinho". Quando o visitante consegue virar para um item equivalente sem sair da página, você elimina um ponto de decisão onde as pessoas normalmente desistem.
Você não precisa de um desenvolvedor. Precisa de quatro coisas:
Arquivos de origem bem feitos geram flipbooks melhores. Exporte seu PDF em um tamanho razoável, de preferência com menos de 50 MB, com as imagens comprimidas, mas ainda nítidas. Sempre que possível, use uma ideia de produto por página, porque os compradores viram as páginas rápido e decidem em segundos.
✅ Boa prática: Use páginas duplas em paisagem para lookbooks e páginas em retrato para tabelas de preços. Orientações misturadas fazem o visualizador pular de um lado para o outro.
Nem todo produto precisa de catálogo. Coloque-o onde ele responde a uma dúvida real:
| Tipo de produto | Catálogo a exibir | Posicionamento |
|---|---|---|
| Item principal único | Catálogo completo da coleção | Abaixo da descrição |
| Produto variável | Catálogo de tabela de tamanhos e cores | Aba dedicada |
| Kit ou conjunto | Catálogo de conteúdo e opções | Área da descrição curta |
| Item de atacado | Flipbook da tabela de preços | Aba visível para compradores logados |
Esta etapa leva cerca de cinco minutos. Se você vende produtos físicos, o Gerador de catálogo de produtos é um bom ponto de partida, e o Conversor de PDF para flipbook faz a conversão principal.
Cada página vira uma página dupla nítida, com zoom e com efeito natural de dobra.
Ajuste o visualizador à sua loja para que ele pareça parte do site, e não um acréscimo:
💡 Dica de ouro: Vincule cada item do catálogo à URL do produto no WooCommerce. O cliente vira a página, toca e cai direto em uma página onde pode comprar.
Abra o painel de compartilhamento e decida quem pode ver o catálogo:
| Opção | Use quando |
|---|---|
| Link público | O catálogo é para qualquer visitante |
| Proteção por senha | Preços só para atacado ou revendedores |
| Código de incorporação | Você quer o catálogo dentro da página |
| Download offline | Os compradores querem uma cópia para depois |
Para uma página de produto, você quer o código de incorporação. Copie-o. Ele parece um trecho curto que começa com uma tag iframe. O Incorporar flipbook em site explica as opções com mais detalhes.
Há três maneiras confiáveis de posicionar a incorporação. Escolha a que combina com a forma como o seu tema foi construído.
Este é o caminho mais rápido.
Se você usa o editor de blocos, adicione um bloco HTML personalizado e cole o código dentro dele.
As abas deixam a página organizada, porque o flipbook só carrega quando alguém pede. Adicione uma aba personalizada de produto pelas opções do seu tema ou por um plugin simples de abas. Dê à aba um nome direto, como "Catálogo completo" ou "Tabela de tamanhos". Cole o código de incorporação no conteúdo da aba.
✅ Boa prática: As abas carregam mais rápido na primeira visualização. Se a sua loja já parece pesada, este é o método a escolher.
Se você quer o mesmo catálogo em vinte produtos, evite colar o código vinte vezes. Crie um bloco reutilizável ou um shortcode simples no seu tema que exiba a incorporação e, depois, insira-o em cada produto. Quando você trocar o flipbook mais tarde, atualiza em um único lugar.
| Método | Nível de habilidade | Ideal para | Velocidade |
|---|---|---|---|
| Editor de descrição | Iniciante | Um ou dois produtos | Mais rápido |
| Aba personalizada | Intermediário | Lojas que querem páginas limpas | Rápido |
| Shortcode ou bloco reutilizável | Intermediário | Muitos produtos, um catálogo | Mais rápido de manter |
Mais da metade do tráfego da loja chega pelo celular, então a visualização no celular não é opcional.
Troque as larguras fixas em pixels do código de incorporação por 100% para que o visualizador se ajuste à tela. Depois, defina uma altura adequada, em torno de 500 a 600 pixels no computador. O visualizador de flipbook do Flipbooks AI é responsivo para celular e muda para a visualização de uma página em telas estreitas.
Se o catálogo carregar com atraso, a página pode se mexer sob o polegar do cliente. Reserve o espaço com um contêiner que tenha uma proporção fixa. Um contêiner simples de 16:9 resolve o problema na maioria dos temas.
Abra o produto no seu celular, em um tablet e em um notebook. Verifique três coisas:
Mesmo uma incorporação simples pode dar problema. Estes são os que os donos de loja mais relatam.
Seu editor pode estar removendo o iframe. Mude para o modo HTML personalizado ou pergunte à sua hospedagem se iframes são permitidos. Alguns plugins de segurança os bloqueiam por padrão.
Verifique a largura de conteúdo do seu tema. Se a coluna for estreita, mova o catálogo para uma seção de largura total ou para uma aba.
Comprima as imagens do PDF antes de enviar. Use carregamento sob demanda (lazy loading) no iframe se o seu tema suportar, e prefira o método de aba.
| Problema | Causa provável | Solução rápida |
|---|---|---|
| Espaço em branco | Iframe bloqueado | Use o bloco HTML personalizado |
| Páginas cortadas | Largura fixa no código | Defina a largura como 100% |
| Carregamento lento | PDF pesado | Comprima as imagens primeiro |
| Links não funcionam | URLs de produto erradas | Revise os links no editor |
⚠️ Atenção: Nunca cole a incorporação em uma aba de editor visual que reescreve o HTML. Ele pode apagar tags sem avisar e deixar você com uma caixa quebrada.
A teoria é útil, mas os exemplos mostram o que é possível.
Uma loja que vende estantes modulares coloca um flipbook da coleção abaixo de cada produto de estante. Os clientes folheiam montagens de ambientes, encontram a mesa lateral combinando e clicam para comprar as duas peças. O Criador de catálogo de móveis serve exatamente para isso.
Uma boutique adiciona um lookbook de temporada em cada página de vestido. Os visitantes navegam pelos looks, tocam no sapato da foto e caem na página do produto do sapato. O Estilista de lookbook interativo torna essa camada clicável simples, e o Criador de catálogo de moda oferece um layout de vitrine.
Um fornecedor de presentes coloca uma tabela de preços protegida por senha em uma aba para compradores cadastrados. Os visitantes de varejo nunca veem os preços, enquanto os clientes de atacado recebem um flipbook organizado. O Gerador de lista de preços digital ajuda a montá-lo.
Quando o catálogo estiver publicado, começa a parte interessante. Com o plano Professional, você vê quais páginas as pessoas abrem, quanto tempo ficam e onde desistem. Veja os planos e preços para mais detalhes.
Se a página 12 recebe a maior atenção, mova esse produto para a primeira página dupla. Se ninguém chega às últimas dez páginas, corte-as. Envie o PDF de novo, e a incorporação publicada se atualiza sem mexer no WooCommerce.
💡 Dica de ouro: Revise os números todo mês. Catálogos de temporada envelhecem rápido, e uma atualização rápida mantém a página com cara de atual.
Alguns hábitos separam as lojas que se beneficiam dos catálogos daquelas que só acrescentam confusão.
| Hábito | Efeito nos compradores |
|---|---|
| Catálogo curto | Decisões mais rápidas |
| Primeira página dupla forte | Mais páginas vistas |
| Produtos vinculados | Menos cliques para comprar |
| Atualizações regulares | Mais confiança |
O Flipbooks AI nunca adiciona marcas d’água, então seu catálogo sempre parece seu. O plano Standard e os superiores oferecem flipbooks ilimitados, o que é útil quando você tem um catálogo por coleção.
Agora você tem tudo o que precisa para colocar um catálogo com efeito de virar página em uma página de produto do WooCommerce: um PDF bem feito, um código de incorporação e um dos três métodos de posicionamento que combinam com o seu tema.
Veja para onde ir em seguida:
Escolha uma página de produto, adicione o catálogo hoje e veja como os compradores o usam. Se ele gerar cliques, repita em toda a loja. Quando estiver pronto para crescer, veja os planos e upgrades e escolha o que combina com a sua loja.
Escolha seu idioma
