Um passo a passo prático para adicionar flipbooks interativos à sua loja Shopify. Da geração dos códigos de incorporação até a colocação deles em páginas de produtos, coleções ou páginas de destino, este artigo cobre todos os métodos, ferramentas e estratégias para fazer sua loja Shopify se destacar com catálogos e lookbooks com efeito de virar página.
Se você vende produtos online, a distância entre um visitante que navega e um visitante que compra costuma depender de uma coisa: como você apresenta bem o que tem. Adicionar um flipbook interativo à sua loja Shopify reduz essa distância rapidamente. Um flipbook do Flipbooks AI transforma qualquer catálogo, lookbook ou folheto em PDF em uma experiência digital com virada de página que fica dentro da sua loja, sem precisar instalar aplicativos.
Este artigo mostra o processo completo, desde criar seu flipbook até colocar o código de incorporação no tema da sua Shopify.
Grades estáticas de produtos são o padrão da maioria das lojas Shopify. Mas grades estáticas obrigam o cliente a clicar, uma a uma, em dezenas de páginas de produtos. Um flipbook permite que o comprador percorra uma coleção inteira em segundos, do mesmo jeito que folheia um catálogo impresso.
Quem interage com um flipbook permanece mais tempo na sua página. A animação de virar página cria um ritmo tátil e envolvente que mantém os olhos em movimento. Sessões mais longas significam mais produtos vistos e mais intenção de compra.
Um flipbook é um destino em si. Quando um visitante chega a uma página com um catálogo incorporado, há algo para fazer imediatamente. Essa interação reduz a chance de ele sair antes de explorar sua linha de produtos.
Todo flipbook criado no Flipbooks AI é totalmente responsivo. O mesmo código de incorporação que funciona em um computador se exibe bem em uma tela de celular de 375px. Não é preciso ter uma versão móvel separada.
| Benefício | Grade estática de produtos | Flipbook interativo |
|---|---|---|
| Velocidade de navegação | Lenta, com muitos cliques | Rápida, baseada em deslizar |
| Duração da sessão | Média | Acima da média |
| Impacto visual | Baixo | Alto |
| Experiência no celular | Varia conforme o tema | Sempre constante |
| Tempo de configuração | Já incluso | Menos de 30 minutos |
Antes de mexer no tema da sua Shopify, prepare três coisas, nesta ordem.
O flipbook começa como um PDF. Pode ser um catálogo de produtos, um lookbook de temporada, um cardápio, um folheto ou até uma lista de preços. Se você ainda não tem um, crie no Canva, no Adobe InDesign ou em qualquer ferramenta que exporte PDF. A resolução importa: exporte com pelo menos 150 DPI para que as páginas fiquem nítidas.
Você precisa de uma conta no Flipbooks AI para enviar e hospedar seu flipbook. A plataforma cuida de toda a hospedagem, da entrega por CDN e da geração do código de incorporação. Você não precisa hospedar arquivos por conta própria nem configurar armazenamento externo.
Você vai precisar acessar o painel administrativo da Shopify, especificamente a seção Loja Online > Temas > Editar código ou o editor de seções com arrastar e soltar. Os dois caminhos são explicados em detalhes abaixo.
💡 Duplique seu tema publicado da Shopify antes de fazer qualquer edição de código. Assim você tem um ponto seguro para voltar caso algo não apareça como esperado.
O Flipbooks AI é a ferramenta que gera o código de incorporação que sua loja Shopify precisa. Veja o processo passo a passo.
A plataforma gera automaticamente uma versão com virada de página do seu PDF, com animações suaves e um visualizador responsivo.
Depois do envio, configure o flipbook para combinar com sua marca:
✅ Use o código hexadecimal exato da cor da sua loja Shopify para a barra de ferramentas. Isso cria uma experiência visual contínua entre o visualizador do flipbook e a página ao redor.
Antes de pegar o código de incorporação, configure o acesso:
⚠️ Proteção por senha e estatísticas são funcionalidades do plano Professional. Confira a página de preços se você precisar desses recursos para sua loja.
Depois que seu flipbook estiver publicado no Flipbooks AI:
O Flipbooks AI oferece dois formatos de incorporação para diferentes layouts da Shopify:
| Formato | Ideal para | Personalização |
|---|---|---|
| Iframe | Colocação simples e rápida | Largura, altura, raio da borda |
| Script (responsivo) | Layouts de largura total, comportamento fluido | Se ajusta ao contêiner pai |
Para a maioria dos casos na Shopify, a incorporação por iframe é a mais simples de usar. A incorporação por script responsivo é melhor para seções de destaque de largura total na página inicial.
Um trecho típico de iframe tem esta aparência:
<iframe src="https://flipbooksai.com/embed/your-flipbook-id"
width="100%"
height="600px"
frameborder="0"
allowfullscreen>
</iframe>
Defina width="100%" e escolha uma altura que se encaixe no seu layout. Para páginas de catálogo de produtos, de 550 a 700 pixels de altura funcionam bem no computador.
O lugar do flipbook depende do que ele contém e de quem ele se destina.
Um lookbook de temporada ou um catálogo de novidades colocado na página inicial comunica a história da marca logo de início. Quem chega à sua página inicial tem uma experiência visual imediata. O Estilista de lookbook interativo cria conteúdo feito especificamente para essa posição.
Uma loja de móveis pode incorporar um catálogo por cômodo diretamente em uma página de coleção. Quem navega pela coleção "Sala de estar" vê o catálogo completo da sala ali mesmo. Isso reduz a necessidade de abrir páginas de produtos individuais antes de ter a visão completa. O Criador de catálogo digital gratuito lida com PDFs de muitas páginas e cheios de produtos, com uma exibição limpa.
Crie uma página Shopify independente, dê a ela o título "Nosso catálogo" ou "Lookbook da temporada" e incorpore o flipbook como conteúdo principal. Essa página pode ter um link na barra de navegação, em campanhas de e-mail ou em perfis de redes sociais.
💡 Crie uma página
/catalogdedicada na Shopify e adicione um link para ela na sua navegação principal. Ela funciona como um centro de navegação permanente para clientes que voltam.
Este é o método mais rápido e não exige editar código.
A maioria dos temas modernos da Shopify, incluindo Dawn, Debut, Prestige e Brooklyn, oferece suporte nativo a blocos HTML personalizados.
Para colocar um flipbook em uma página de conteúdo específica:
<>.⚠️ Sempre mude para a visualização HTML antes de colar. Se você colar na visualização de texto formatado, o código bruto do iframe aparecerá como texto visível na página, em vez de exibir o flipbook.
Para uma colocação permanente em uma seção que aparece em várias páginas:
.liquid adequado, por exemplo sections/main-collection-product-grid.liquid.⚠️ Editar arquivos Liquid diretamente afeta todas as páginas que usam esse modelo. Sempre teste em um tema duplicado antes de fazer mudanças na sua loja publicada.
Escolher o plano certo define quais funcionalidades o seu flipbook incorporado oferece dentro da sua loja Shopify.
| Funcionalidade | Gratuito | Standard | Professional |
|---|---|---|---|
| Número de flipbooks | 1 | Ilimitado | Ilimitado |
| Marca d’água | Sim | Não | Não |
| Marca personalizada | Não | Sim | Sim |
| Proteção por senha | Não | Não | Sim |
| Painel de estatísticas | Não | Não | Sim |
| Downloads offline | Não | Não | Sim |
| Incorporar em site | Sim | Sim | Sim |
| Formulários de contato | Não | Não | Sim |
| Vídeo e áudio nas páginas | Não | Sim | Sim |
| Responsivo para celular | Sim | Sim | Sim |
Para a maioria dos donos de lojas Shopify, o plano Standard é a escolha certa. Ele remove as marcas d’água, permite flipbooks ilimitados e oferece marca personalizada completa, para que o visualizador combine com a identidade visual da sua loja. O plano Professional acrescenta estatísticas e formulários de contato, o que vale a pena se você quer acompanhar quais páginas do catálogo geram mais cliques e conversões.
Uma marca de roupas pode enviar o PDF do lookbook da temporada, incorporá-lo em uma página Shopify dedicada e linkar para ele nas bios do Instagram e em campanhas de e-mail. Quem navega pelo flipbook vê a história editorial completa e depois clica nas páginas de produtos individuais. O Criador de flipbook de lookbook foi feito sob medida para esse fluxo, com layouts otimizados para fotografia de moda.
Um varejista de móveis com 300 ou mais produtos não consegue exibir tudo em uma grade de coleção padrão da Shopify. Um catálogo em PDF incorporado, organizado por tipo de cômodo, permite que o cliente navegue pela linha completa sem sair da loja. Visitantes que encontram o que querem no catálogo têm muito mais chances de concluir a compra do que quem procura produto por produto sem nenhum contexto.
Restaurantes que vendem molhos, kits de refeições ou produtos com a marca pela Shopify podem incorporar o cardápio completo ou o livro de receitas como um flipbook. O Criador de flipbook de cardápio de restaurante gera um flipbook no formato de cardápio que se incorpora bem em qualquer página da Shopify, reforçando a experiência da marca junto aos produtos físicos.
Lojas B2B que vendem pela Shopify podem criar um flipbook protegido por senha com os preços de atacado. Os compradores recebem um link de compartilhamento que abre uma lista de preços profissional e com a marca. Sem anexos de PDF em e-mails, sem tabelas estáticas, sem capturas de tela desatualizadas. O Gerador de lista de preços digital foi feito exatamente para esse caso de uso.
Um detalhe que importa mais do que a maioria dos donos de loja imagina: o comportamento de deslizar no celular. As incorporações do Flipbooks AI são otimizadas para toque. No celular, o cliente arrasta as páginas para a esquerda ou para a direita para virá-las, o mesmo gesto que ele usa em qualquer outro lugar do celular. Não é preciso dar zoom com dois dedos, o que é incômodo. A incorporação se ajusta automaticamente à largura da tela, então um iframe com 100% de largura na Shopify preenche corretamente a tela do celular em qualquer dispositivo.
Depois de incorporar, teste o flipbook em um celular de verdade, e não apenas redimensionando a janela do navegador no computador. Alguns temas da Shopify aplicam um espaçamento extra no contêiner que afeta o tamanho do iframe no celular. Adicione max-width: 100% no CSS personalizado se o flipbook transbordar em telas menores.
Adicionar um flipbook à sua loja Shopify leva menos de 30 minutos do começo ao fim. O resultado é uma experiência de navegação que parece mais uma loja de verdade e menos um banco de dados de produtos. Clientes que folheiam um catálogo passam mais tempo com a sua marca, veem mais produtos por sessão e saem com uma impressão mais forte do que você vende.
Os passos são claros: crie seu flipbook no Flipbooks AI, copie o código de incorporação e cole-o em um bloco HTML da Shopify, no editor de páginas ou em um modelo Liquid. A incorporação funciona em todos os temas da Shopify e não exige aplicativo nem plugin de terceiros.
Pronto para criar o seu? Crie seu primeiro flipbook de graça e tenha-o incorporado na sua loja hoje mesmo. Veja todas as ferramentas e modelos disponíveis para encontrar o formato certo para o seu catálogo, lookbook ou folheto. Quando estiver pronto para ativar a marca completa e remover as marcas d’água, confira os planos de preços e escolha a faixa ideal para a sua loja.
Escolha seu idioma
