Como Incorporar um Flipbook na Sua Loja Shopify

Imagens estáticas de produtos contam apenas parte da história. Se você tem uma loja Shopify e quer exibir catálogos de produtos, lookbooks, guias de tamanhos ou revistas de marca em um formato mais envolvente, incorporar um flipbook interativo é uma das formas mais eficazes de fazer isso. Os visitantes podem folhear as páginas como um livro real — direto na sua loja, sem sair da página.

Este guia orienta você na incorporação de um flipbook FlipLink no Shopify, desde a geração do código de embed até a inserção em páginas de produto e landing pages personalizadas.

Por Que Usar Flipbooks no Shopify

O Shopify oferece ferramentas poderosas para vender produtos, mas suas opções nativas de conteúdo são limitadas quando se trata de conteúdo visual de várias páginas. É aí que os flipbooks preenchem a lacuna:

• Catálogos de Produtos — Permita que os clientes naveguem pelo catálogo completo com animações de virada de página em vez de rolar por grades estáticas
• Lookbooks — Marcas de moda, móveis e lifestyle podem apresentar coleções sazonais como lookbooks digitais imersivos
• Guias de Tamanhos — Substitua downloads de PDF complicados por um guia de tamanhos interativo incorporado que os clientes podem folhear na página do produto
• Revistas de Marca — Compartilhe histórias da marca, bastidores ou conteúdo editorial diretamente na sua loja
• Listas de Preços para Atacado — Ofereça aos compradores B2B uma forma elegante de navegar por preços sem um portal separado

Flipbooks mantêm os visitantes engajados por mais tempo, reduzem a taxa de rejeição e apresentam seus produtos em um formato que transmite qualidade premium.

Passo 1: Crie Seu Flipbook

Antes de incorporar qualquer coisa, você precisa de um flipbook. Se ainda não criou um:

1. Cadastre-se em go.fliplink.me
2. Faça upload do seu PDF — um catálogo de produtos, lookbook ou qualquer documento de várias páginas
3. O FlipLink converte automaticamente em um flipbook interativo com animações realistas de virada de página em 3D
4. Personalize a aparência, adicione botões de CTA vinculando aos seus produtos Shopify e configure as opções de compartilhamento

Quando seu flipbook estiver publicado, você está pronto para copiar o código de embed.

Passo 2: Obtenha o Código de Embed

O FlipLink fornece um código de embed iframe padrão para cada flipbook publicado:

1. Abra seu flipbook no painel do FlipLink
2. Clique no botão Compartilhar
3. Selecione a aba Embed
4. Copie o código iframe

O código de embed se parece com isso:

<iframe
  src="https://go.fliplink.me/view/your-flipbook-id"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
></iframe>

Você pode ajustar o valor de height dependendo do layout do seu tema Shopify. Para a maioria dos temas, uma altura entre 500 e 700 pixels funciona bem.

Para um mergulho mais profundo nas opções de incorporação com iframe, confira nosso guia sobre como incorporar um flipbook com iframe.

Passo 3: Incorpore em uma Página de Produto Shopify

Adicionar um flipbook a uma página de produto específica é uma ótima forma de substituir ou complementar um guia de tamanhos estático ou uma ficha técnica.

Usando o Editor de Tema do Shopify

1. Vá para Loja Online → Temas no admin do Shopify
2. Clique em Personalizar no seu tema ativo
3. Navegue até o template da página de produto
4. Adicione uma nova seção — escolha Custom Liquid (ou Custom HTML dependendo do seu tema)
5. Cole o código de embed iframe no campo de código
6. Posicione a seção onde deseja que o flipbook apareça (abaixo da descrição do produto é uma escolha comum)
7. Clique em Salvar

Usando Metafields para Incorporação Dinâmica

Se você quer flipbooks diferentes em páginas de produto diferentes, use metafields do Shopify:

1. Crie um metafield de produto chamado flipbook_url (tipo: URL)
2. Para cada produto, cole a URL de embed do flipbook no metafield
3. Na sua seção Custom Liquid, use:

{% if product.metafields.custom.flipbook_url %}
<div class="flipbook-embed">
  <iframe
    src="{{ product.metafields.custom.flipbook_url }}"
    width="100%"
    height="600"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>
{% endif %}

Essa abordagem mantém seu tema limpo e permite gerenciar flipbooks por produto sem editar o código do tema a cada vez.

Passo 4: Incorpore em uma Página Personalizada do Shopify

Para páginas independentes como uma landing page de catálogo ou uma seção de revista da marca:

1. Vá para Loja Online → Páginas no admin do Shopify
2. Crie uma nova página ou edite uma existente
3. No editor de página, clique no botão Mostrar HTML (o ícone <>)
4. Cole o código de embed iframe diretamente no HTML
5. Volte ao editor visual para confirmar que está correto
6. Salve a página

Você também pode usar o editor de tema para adicionar uma seção Custom Liquid a qualquer template de página, dando mais controle sobre posicionamento e estilo.

Passo 5: Torne Responsivo

Os temas Shopify variam bastante, e você quer que seu flipbook fique ótimo tanto no desktop quanto no mobile. Envolva o iframe em um container responsivo:

<div style="position: relative; width: 100%; padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe
    src="https://go.fliplink.me/view/your-flipbook-id"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

O padding-bottom: 75% cria uma proporção de 4:3. Ajuste esse valor para corresponder às dimensões das páginas do seu flipbook:

• Proporção 4:3 (paisagem): padding-bottom: 75%
• Proporção 16:9 (widescreen): padding-bottom: 56.25%
• Proporção 3:4 (retrato): padding-bottom: 133%

Isso garante que o flipbook se ajuste corretamente em todos os tamanhos de tela, sem barras de rolagem estranhas ou conteúdo cortado.

Passo 6: Adicione Botões de CTA Vinculados a Produtos

Um dos recursos mais poderosos para lojas Shopify é adicionar botões de CTA dentro do seu flipbook que vinculam diretamente às páginas de produto. Isso transforma seu catálogo de uma experiência passiva de visualização em uma ferramenta ativa de compras.

No editor do FlipLink:

1. Abra seu flipbook para edição
2. Selecione a página onde deseja adicionar um call-to-action
3. Adicione um botão de CTA com texto como "Comprar Agora" ou "Ver Produto"
4. Defina o link para a URL do produto Shopify (ex.: https://sualoja.myshopify.com/products/produto-handle)
5. Repita para cada produto apresentado no catálogo

Quando os clientes navegam pelo flipbook incorporado e veem algo que gostam, um clique os leva direto à página do produto para adicionar ao carrinho. Isso encurta drasticamente o caminho da descoberta até a compra.

Passo 7: Configure a Lista de Domínios Permitidos

Se você quer restringir onde seu flipbook pode ser incorporado — por exemplo, apenas na sua loja Shopify e em nenhum outro lugar — use a lista de domínios permitidos.

1. No painel do FlipLink, abra as configurações do flipbook
2. Navegue até a seção de lista de domínios permitidos
3. Adicione seu domínio Shopify (ex.: sualoja.com e sualoja.myshopify.com)
4. Salve as configurações

Isso impede que concorrentes ou sites não autorizados incorporem o conteúdo do seu flipbook. É especialmente importante para catálogos de atacado ou lookbooks exclusivos que você não quer acessíveis publicamente fora da sua loja.

Dicas para Sucesso com Flipbooks no Shopify

Otimize seu PDF antes do upload. Comprima as imagens no PDF original para manter o tamanho do arquivo gerenciável. Flipbooks mais leves carregam mais rápido, o que importa para compradores mobile em conexões mais lentas.

Use títulos descritivos nas páginas. O sumário do FlipLink é gerado a partir da estrutura do seu PDF. Capítulos bem organizados ajudam os clientes a pular para categorias específicas de produtos rapidamente.

Teste em vários dispositivos. Visualize o flipbook incorporado no desktop, tablet e mobile antes de publicar. Os temas responsivos do Shopify lidam com a maioria dos casos, mas verifique se o wrapper responsivo funciona com seu tema específico.

Acompanhe o engajamento. Os analytics do FlipLink mostram quais páginas recebem mais visualizações e quanto tempo os visitantes passam em cada spread. Use esses dados para entender quais produtos ou seções ressoam com seu público e ajuste o layout do catálogo de acordo.

Mantenha o conteúdo atualizado. Atualize seu flipbook quando adicionar novos produtos ou criar promoções sazonais. O código de embed permanece o mesmo — basta atualizar o flipbook no painel do FlipLink e as alterações aparecem instantaneamente na sua loja Shopify. Não é preciso mexer no código do tema novamente.

Vincule flipbooks em campanhas de e-mail. Além de incorporar na loja, compartilhe links diretos para seus catálogos em flipbook em e-mails de marketing e posts em redes sociais. As opções de compartilhamento e distribuição do FlipLink facilitam direcionar tráfego de múltiplos canais para sua loja Shopify.

Para mais informações sobre incorporar PDFs e flipbooks em sites em geral, confira nosso guia sobre como incorporar um PDF em um site. Se você está criando um catálogo de produtos do zero, veja como criar um catálogo digital de produtos.

Comece a Incorporar Flipbooks na Sua Loja Shopify

Incorporar um flipbook no Shopify leva apenas alguns minutos e transforma a forma como os clientes interagem com o conteúdo dos seus produtos. Seja um lookbook sazonal, um catálogo completo de produtos ou um simples guia de tamanhos, flipbooks interativos criam uma experiência de compra que imagens estáticas e PDFs simplesmente não conseguem igualar.

Crie seu flipbook gratuito e incorpore na sua loja Shopify hoje. Confira nossos preços para ver como o FlipLink se encaixa no seu negócio.