Adicione um flipbook interativo de virada de página diretamente na sua loja Shopify, sem programar. Este artigo passo a passo mostra como converter um catálogo em PDF, personalizar o visualizador e incorporá-lo em qualquer página da Shopify, de listagens de produtos à sua página inicial, em todas as versões de tema.
Incorporar um flipbook na sua loja Shopify é uma das formas mais rápidas de transformar uma página de produto plana, feita para rolagem, em algo com que o cliente de fato para e interage. Seja você dono de uma boutique de roupas, de uma loja de móveis ou de uma marca de alimentos especiais, um catálogo digital de virada de página colocado dentro da sua loja cria uma experiência de compra que imagens estáticas não conseguem reproduzir. O Flipbooks AI torna o processo simples: envie um PDF, pegue um código de incorporação e cole na Shopify. Este artigo percorre cada etapa, da criação da conta à incorporação publicada, nos três métodos de incorporação da Shopify.
A maioria das lojas Shopify segue o mesmo padrão: título do produto, algumas imagens, botão de adicionar ao carrinho, e assim por diante. Essa estrutura funciona para quem busca e já sabe exatamente o que quer. Quase não ajuda quem apenas navega, os clientes que ainda estão decidindo e precisam de contexto, de combinações e de inspiração antes de se comprometer.
Um flipbook incorporado diretamente em uma página da Shopify oferece ao cliente uma experiência estruturada, no estilo de uma revista. Ele navega no próprio ritmo, passando de um produto para o seguinte como faria em uma revista impressa. Essa mudança de comportamento importa: os leitores passam bem mais tempo com formatos de virada de página do que com páginas de rolagem estáticas, e mais tempo na página está, de forma constante, associado a maior intenção de compra e menor taxa de rejeição.
Os flipbooks de catálogo interativo funcionam em uma ampla variedade de categorias de loja Shopify:
💡 Um flipbook em uma página de coleção da Shopify pode substituir por completo a sua página de destino sazonal, oferecendo aos compradores um percurso editorial pelo seu estoque, com a seleção feita por você, em vez de uma grade de produtos que eles precisam filtrar manualmente.
Além da experiência do cliente, os flipbooks incorporados em páginas da Shopify contribuem indiretamente para o desempenho de SEO. Uma duração média de sessão maior sinaliza aos mecanismos de busca que a página oferece valor. Clientes que passam mais tempo folheando um flipbook aumentam a sua métrica de tempo de permanência sem precisar de nenhuma otimização de conteúdo adicional. Os flipbooks também transformam páginas antes simples em conteúdos que outros sites querem linkar: um catálogo digital bem feito é algo que o comprador salva e compartilha, gerando tráfego de indicação natural para a sua loja.
Antes de incorporar, você precisa de três coisas:
Não é preciso um desenvolvedor. Não é preciso instalar nenhum aplicativo da Shopify na loja. Não há problemas de compatibilidade com o seu tema atual. O visualizador do flipbook é servido externamente e incorporado por meio de um iframe padrão, que todos os temas da Shopify suportam.
⚠️ Finalize o seu PDF antes de converter. Mesmo que você possa substituí-lo depois, um novo envio significa refazer do zero as configurações de marca, o que consome tempo sem necessidade.
Acesse o Flipbooks AI e crie sua conta. O plano gratuito permite criar e incorporar um flipbook imediatamente. Para flipbooks ilimitados e sem marca d’água, o plano Standard é onde a maioria das lojas Shopify começa.
No seu painel, clique em Novo flipbook e envie seu arquivo PDF. O Flipbooks AI o converte automaticamente em um visualizador de virada de página. Um catálogo de 20 páginas normalmente é processado em menos de 30 segundos. Documentos mais longos, com fotografias de alta resolução, podem levar um ou dois minutos.
Depois da conversão, você pode ajustar cada elemento visual do visualizador do flipbook:
💡 Use os códigos hexadecimais exatos do tema da sua Shopify nas configurações de fundo e de interface do flipbook. Quando o flipbook combina com a página onde está incorporado, o cliente não percebe uma transição entre "loja" e "catálogo". Parece uma experiência única e contínua.
Clique em Compartilhar e depois em Incorporar. O Flipbooks AI gera um trecho limpo de iframe que você cola diretamente na Shopify:
<iframe src="https://flipbooksai.com/view/YOUR-FLIPBOOK-ID" width="100%" height="600px" frameborder="0" allowfullscreen></iframe>
Copie este código. Você vai usá-lo na próxima seção.
Antes de publicar, decida as configurações de acesso:
| Método | Dificuldade | Ideal para | Compatibilidade com temas |
|---|---|---|---|
| Seção de HTML personalizado | Fácil | Temas Shopify 2.0 com editor de arrastar e soltar | Dawn, Sense, Refresh e temas modernos |
| Edição de código Liquid do tema | Médio | Posicionamento preciso em qualquer modelo | Todos os temas da Shopify |
| Editor de conteúdo de página | Fácil | Incorporação rápida em uma única página, em minutos | Todos os temas da Shopify |
Este é o método mais rápido para lojas que usam temas modernos da Shopify 2.0, como Dawn, Sense, Refresh ou Craft.
O flipbook aparece imediatamente na sua loja, sem nenhuma edição de código.
Para temas mais antigos ou quando você precisa posicionar o flipbook em um ponto muito específico dentro de um modelo:
templates/page.liquid. Para uma página de produto, é templates/product.liquid⚠️ Sempre duplique o seu tema antes de editar arquivos Liquid. Acesse a lista de temas, clique no menu de três pontos e selecione Duplicar. Isso cria um ponto de restauração seguro caso algo dê errado.
O método mais simples para uma página de catálogo dedicada:
<> na barra de ferramentas)Isso funciona em todos os temas da Shopify, sem nenhuma personalização. A contrapartida é menos controle de layout: o flipbook aparece em linha com qualquer outro conteúdo da página, sem os controles de espaçamento e posicionamento por seção disponíveis no Método 1.
Um flipbook incorporado na sua página inicial funciona melhor como uma seção dedicada, em largura total, logo abaixo do banner principal. Essa posição captura os visitantes logo após a primeira impressão da marca, levando-os a uma experiência de catálogo antes que cheguem à grade de produtos. Campanhas sazonais, novidades e conteúdo sobre a história da marca funcionam bem aqui.
Incorpore um flipbook específico do produto, que mostre o item em uso em diferentes contextos: ambientes diversos, combinações diferentes ou iluminações distintas. Na moda, isso significa mostrar uma jaqueta combinada de três formas. Nos móveis, significa mostrar o mesmo sofá em três configurações de cômodo. O contexto vende de maneiras que a fotografia de produto isolada simplesmente não consegue.
Crie um catálogo específico para cada uma das suas linhas de produtos mais importantes. Incorpore o flipbook no topo da página de coleção, acima da grade de produtos. Os clientes leem primeiro o catálogo editorial, formam preferências e uma lista mental de escolhas, e depois rolam a página para adicionar itens diretamente ao carrinho. Essa estrutura aumenta bastante a quantidade de itens adicionados por sessão em comparação com uma grade simples.
Crie uma página independente chamada "Catálogo" ou "Lookbook" e incorpore nela o flipbook completo dos seus produtos. Adicione essa página ao menu de navegação principal. Compradores que visitam especificamente uma página de catálogo costumam ter um valor médio de pedido mais alto, porque estão em modo de navegação deliberada, e não em modo de busca.
✅ Adicione um link "Ver catálogo" ao cabeçalho da sua loja ou à barra de anúncios. Até um pequeno botão de chamada para a sua página de catálogo pode aumentar de forma significativa o engajamento com toda a sua linha de produtos.
| Funcionalidade | Gratuito | Standard | Professional |
|---|---|---|---|
| Flipbooks | 1 | Ilimitados | Ilimitados |
| Marca d’água | Sim | Não | Não |
| Marca personalizada | Não | Sim | Sim |
| Proteção por senha | Não | Sim | Sim |
| Painel de estatísticas | Não | Não | Sim |
| Formulários de contato | Não | Não | Sim |
| Downloads offline | Não | Sim | Sim |
| Incorporação na Shopify | Sim | Sim | Sim |
| Incorporações de vídeo e áudio | Não | Sim | Sim |
| Visualizador responsivo para celular | Sim | Sim | Sim |
Para a maioria das lojas Shopify, o plano Standard é o equilíbrio certo. Sem marcas d’água nos flipbooks incorporados, catálogos ilimitados para diferentes coleções ou temporadas, proteção por senha para compradores no atacado e a possibilidade de incorporar clipes de vídeo diretamente nas páginas de produto. O plano Professional passa a valer a pena quando você quer estatísticas por página, mostrando quais produtos do seu catálogo recebem mais atenção, e formulários de contato para captar consultas de compradores no atacado diretamente no visualizador do flipbook.
Confira os planos e preços completos para ver exatamente o que cada nível inclui.
💡 Se você gerencia flipbooks para várias lojas Shopify de marcas diferentes, uma conta Professional cobre todas elas, sem taxas por loja e com flipbooks ilimitados.
Uma pequena marca de acessórios incorpora um flipbook de lookbook sazonal na página inicial a cada trimestre. As novas coleções são lançadas dentro do flipbook duas semanas antes de estarem disponíveis na grade de produtos, dando aos assinantes da newsletter uma prévia exclusiva que estimula compras antecipadas. O Estilista de lookbook interativo do Flipbooks AI foi feito justamente para esse caso, com modelos de layout pensados para fotografia editorial de joias e acessórios.
Marcas de moda incorporam um catálogo editorial completo nas páginas de coleção da Shopify. Cada página dupla mostra looks montados da cabeça aos pés, com pontos interativos que levam diretamente às páginas de cada item do look. Os clientes leem primeiro o editorial, formam a intenção de compra do look e depois clicam para adicionar os itens. O Criador de flipbook de lookbook facilita a criação desses catálogos de moda com várias páginas, com modelos editoriais de moda prontos.
Lojas de móveis se beneficiam muito de catálogos com cenas de ambientes, que mostram como as peças funcionam juntas em interiores reais. Em vez de navegar por imagens isoladas de produtos em fundo branco, o cliente folheia fotografias completas de cômodos. O Criador de catálogo digital gratuito é o ponto de partida certo para catálogos de produtos estruturados, com layouts de várias colunas e seções de especificações de produto ao lado das fotos.
Lojas Shopify que atendem compradores no atacado usam flipbooks protegidos por senha incorporados em uma página dedicada de login de revendedor. Os compradores recebem um catálogo completo de produtos, com SKUs e faixas de preço por volume, acessível somente depois de entrar ou de receber uma senha compartilhada. Isso substitui o envio de arquivos PDF por e-mail, mantém o catálogo atualizável sem novos envios e mostra, com as estatísticas do plano Professional, quais páginas cada comprador vê com mais frequência.
A causa mais comum é o editor de texto rico da Shopify remover o código do iframe ao voltar do modo HTML para o modo visual. Solução: use o método de Seção de HTML personalizado (Método 1, acima) em vez do editor de conteúdo de página para as incorporações. A seção de HTML personalizado preserva o código HTML original, sem sanitização.
Uma causa menos comum é uma Política de Segurança de Conteúdo (CSP) definida pelo seu tema que bloqueia iframes de domínios externos. Verifique se o flipbook aparece em uma janela anônima com as extensões desativadas. Se aparecer, uma extensão do navegador está interferindo. Se não aparecer, entre em contato com o suporte do Flipbooks AI com a URL da sua loja para receber ajuda específica sobre o domínio.
Um iframe com altura fixa em pixels (por exemplo, height="600px") transborda em telas de celular estreitas. Substitua-o por um contêiner de proporção responsiva:
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe
src="YOUR-FLIPBOOK-URL"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
frameborder="0"
allowfullscreen>
</iframe>
</div>
Este contêiner mantém automaticamente a proporção de 16:9 em todos os tamanhos de tela, de monitores de computador a celulares pequenos.
PDFs grandes geram arquivos de flipbook mais pesados. Se o carregamento inicial estiver visivelmente lento:
loading="lazy" à tag do iframe para que o navegador adie o carregamento do flipbook até que o cliente role a página até perto dele.✅ O Flipbooks AI hospeda todos os recursos do flipbook em uma CDN global, então o visualizador carrega rápido para clientes do mundo todo, e não apenas na sua região. A compressão reduz a carga inicial que a CDN entrega, e é daí que vem o ganho de velocidade.
O Flipbooks AI oferece ferramentas específicas para os formatos de loja Shopify mais comuns. Veja todas as ferramentas de flipbook ou comece pela que combina com o tipo do seu catálogo:
| Tipo de loja | Ferramenta recomendada |
|---|---|
| Moda e vestuário | Criador de flipbook de lookbook |
| Casa e móveis | Criador de catálogo digital gratuito |
| Varejo em geral | Gerador de catálogo de produtos |
| Atacado e B2B | Gerador de lista de preços digital |
| Qualquer documento em PDF | Conversor de PDF para flipbook |
| Pronto para incorporar em site | Incorpore flipbook em site |
| Catálogo de moda | Criador de catálogo de moda |
| Portfólio e criativos | Criador de portfólio digital |
Adicionar um flipbook à sua loja Shopify leva cerca de 15 minutos, do envio do PDF à incorporação publicada. O resultado é uma página de produto que prende a atenção, conta uma história visual e oferece ao comprador a experiência editorial que separa as marcas de alto padrão das lojas comuns.
Pronto para criar o seu? Crie sua conta gratuita no Flipbooks AI e envie seu primeiro catálogo hoje. Para flipbooks ilimitados, marca personalizada, catálogos de atacado protegidos por senha e vídeos incorporados, compare os planos e preços e escolha o nível que combina com o volume da sua loja. Todos os planos suportam a incorporação completa na Shopify, então você pode publicar o seu primeiro flipbook sem nenhum compromisso inicial.
Escolha seu idioma
