Estes guias descrevem o Toimii depois que ele estiver no ar. O painel e a cobrança ainda não estão disponíveis — o Toimii será lançado em 2026.

Como incorporar um formulário de contato no Shopify com Custom Liquid

Uma secção Custom Liquid em qualquer tema. Sem instalar app, sem precisar de saber Liquid — basta colar as duas linhas.

<script src="https://cdn.toimii.io/components/your-code.js" async></script>
<toimii-contact></toimii-contact>

Isto funciona mesmo?

Sim — em todos os temas Shopify que suportam Online Store 2.0 (Dawn e qualquer tema moderno). A secção Custom Liquid está integrada no Shopify; sem instalar app, sem editar código do tema na maioria das páginas.

Passo a passo

Abre o editor de temas

No admin do Shopify, vai a Loja Online → Temas → Personalizar no tema que queres editar.

Adiciona uma secção Custom Liquid

Escolhe a página onde o formulário deve aparecer (uma Página, a página de Contato, ou qualquer modelo de página). Clica em Adicionar secção e escolhe Custom Liquid.

Cola o código de incorporação

Cola as duas linhas do teu painel Toimii no campo Liquid. O Liquid passa HTML em bruto sem alterações, por isso a tag script e o elemento personalizado funcionam tal como estão.

Guarda o tema

Guarda no editor de temas. O formulário fica imediatamente disponível na loja.

Testa na loja ao vivo

Abre a página ao vivo (não a pré-visualização) e envia uma mensagem de teste para confirmar que funciona do início ao fim. Se algo parecer errado, consulta os problemas comuns abaixo.

Problemas comuns

Edições diretas ao theme.liquid são substituídas na atualização do tema. Usa a secção Custom Liquid no editor de temas (guardada por página) ou duplica o tema antes de editar os ficheiros principais.
O Custom Liquid nas páginas de checkout requer o Shopify Plus. Nos planos standard, incorpora em páginas de contato, FAQ ou produto.
Alguns temas têm uma CSP integrada que bloqueia scripts de terceiros. Se o formulário não aparecer, permite cdn.toimii.io e api.toimii.io em script-src / connect-src.
A pré-visualização do editor de temas às vezes carrega secções de forma lazy de uma maneira que quebra a primeira renderização de elementos personalizados. Verifica no URL da loja ao vivo (ou usa o botão "Ver") para confirmar — a pré-visualização não é a fonte de verdade.
Se envolveres o formulário num bloco Liquid {% if %}, o script ainda carrega em todas as páginas. Para poupar bytes, protege a tag script com a mesma condição.

Perguntas frequentes

Preciso de uma app Shopify da App Store?

Não. O Custom Liquid é uma secção de tema incorporada no Shopify — todos os temas do Dawn em diante suportam-no. As lojas de apps estão cheias de apps de "formulário de contato"; não precisas de nenhuma delas para o Toimii.

Posso incorporá-lo na página de checkout?

Não nos planos standard. O Custom Liquid nas páginas de checkout requer o Shopify Plus. Nas lojas sem Plus, incorpora o formulário numa página de contato, FAQ ou estado do pedido pós-compra.

As atualizações do tema apagam o meu código de incorporação?

Sim — edições diretas nos ficheiros do tema (theme.liquid, sections/*.liquid) são substituídas quando atualizas ou restauras o tema. Duas opções mais seguras: usa uma secção do tema + bloco Custom Liquid (guardado por página no editor de temas), ou duplica o tema antes de editar.

A minha loja tem uma Content-Security-Policy — isso bloqueia o Toimii?

Algumas lojas têm uma Content-Security-Policy restrita via definições do tema ou apps como os temas Online Store 2.0 do Shopify com cabeçalhos CSP. Se o formulário não aparecer, permite em script-src: cdn.toimii.io e api.toimii.io.

Funciona num site Storefront API personalizado (Hydrogen, Next.js)?

Sim. Usa o App Bridge para renderizar um container HTML, depois injeta a tag script e o elemento personalizado nele. Mesma abordagem: duas linhas de código, o elemento personalizado trata do resto.

A incorporar noutra plataforma?

As mesmas duas linhas de código, explicadas para cada plataforma.

WordPress

Bloco HTML Personalizado, Block Editor ou Clássico. Sem instalar plugin. Um detalhe — o teu perfil de utilizador precisa da permissão unfiltered_html.

Ler o guia completo

Squarespace

Coloca um Bloco de Código em qualquer página. Requer o plano Core (renomeado Business em 2025) ou superior.

Ler o guia completo

Webflow

O elemento Code Embed suporta até 50 000 caracteres. O código personalizado requer o plano Basic ou superior. Publica para pré-visualizar.

Ler o guia completo

Wix

O Wix coloca o widget Embed numa sandbox, por isso usamos um método dividido — script em Definições → Código Personalizado, tag via Embed a Widget. Guia honesto.

Ler o guia completo

Sites Estáticos

Astro, Hugo, 11ty, Jekyll — as mesmas duas linhas no teu template de layout. As builds ficam rápidas.

Ler o guia completo

HTML / Personalizado

Uma página HTML simples chega. Abre num editor de texto, cola, guarda, faz upload. Três passos e está online.

Ler o guia completo

React / Vue / Angular

Usa o elemento personalizado diretamente em JSX, templates Vue ou componentes Angular. Sem componente wrapper, sem pacote extra.

Ler o guia completo

Pronto para experimentar?

30 dias de teste gratuito. Sem cartão de crédito. Pronto em minutos.

Sem cartão de crédito. Pronto em 2 minutos.