Como rodar landing pages em Framer numa loja Shopify

Construa as suas landing pages de campanha no Framer e mantenha o carrinho e o checkout dentro da sua loja Shopify. Um permalink de carrinho leva o comprador para o outro lado e já enche o carrinho dele. Duas coisas quebram esse arranjo. O seu analytics se confunde com dois domínios, e os seus preços se descolam. Dá para resolver os dois numa tarde.

Separe as landing pages em Framer da loja Shopify

O Framer fica com as páginas que você muda com frequência e nas quais quer liberdade de design: landing pages de campanha, advertoriais, a história da marca, páginas de lançamento e resultados de quiz. A Shopify fica com tudo que envolve dinheiro: páginas de produto, coleções, carrinho, checkout, contas de cliente e status do pedido. Deixe o checkout como está.

A divisão funciona porque os dois lados fazem trabalhos diferentes e são editados em ritmos muito diferentes. Você vai publicar quatro variações de landing page neste mês e encostar no checkout zero vez.

A passagem é um permalink de carrinho

A Shopify documenta um formato de URL que enche o carrinho direto pelo link. Aponte o botão do Framer para yourstore.com/cart/VARIANT_ID:QUANTITY. Adicione um desconto com ?discount=CODE. Adicione mais de um item com vírgula, tipo /cart/11111:1,22222:2. Use ?storefront=true se quiser que o comprador caia na página do carrinho em vez de ir direto para o checkout.

Você encontra o ID da variante na URL do admin da Shopify quando abre uma variante. Guarde um permalink por oferta em uma nota compartilhada. Um ID de variante errado manda todo comprador para o tamanho de pacote errado, e você só vai perceber isso no relatório de expedição.

Ajuste o rastreamento antes de gastar um dólar em anúncios

É aqui que a maioria das montagens de Framer com Shopify quebra em silêncio. O visitante começa no seu domínio do Framer e termina no checkout da Shopify. Sem a configuração certa, o GA4 conta uma sessão como duas, e a Meta perde a ligação entre o clique e a compra.

Faça quatro coisas. Adicione os dois domínios à lista de medição entre domínios do GA4, ou coloque os dois no mesmo domínio raiz. Instale o pixel da Meta no Framer e de novo pelos Customer Events da Shopify. Passe as suas UTMs pelo permalink para a origem sobreviver ao pulo. Depois faça uma compra de teste de verdade e confirme que ela aparece uma vez no GA4 e uma vez na Meta, e não duas nem nenhuma.

Mantenha o preço honesto nos dois sistemas

No momento em que a sua página no Framer diz 49 dólares e a Shopify cobra 54, você ganha pedidos de reembolso e um problema de reputação. Escreva o preço em exatamente um lugar por página. Nunca coloque dentro de uma imagem exportada, e nunca dentro daquele gráfico de topo que levou duas horas para ficar pronto.

Passando de três landing pages, mova a oferta para uma coleção do CMS do Framer com campos para preço, preço comparativo, permalink e status de estoque. Uma edição passa a atualizar todas as páginas. Crie um lembrete mensal para abrir cada página no ar ao lado do produto na Shopify e conferir se os dois batem.

Proteja a velocidade que você pagou

Páginas do Framer começam rápidas. Aí alguém adiciona um widget de chat, um gravador de heatmap, dois pixels e um embed de avaliações, e a seção de topo passa a levar quatro segundos no 4G. O limite do Largest Contentful Paint do Google é 2,5 segundos no percentil 75 das visitas reais em celular. Esse é o orçamento da página inteira.

Sirva a imagem de topo no tamanho em que ela realmente aparece. Deixe o lazy loading fora dela. Carregue os widgets de avaliação só abaixo da dobra. Teste num celular de verdade com dados móveis limitados, e não num desktop no wi-fi do escritório.

Quando o Framer é a ferramenta errada

Um catálogo de 200 SKUs com filtro, busca e estoque mudando todo dia pertence à Shopify, com o Framer usado só nas páginas de campanha. O Framer ganha o espaço dele onde a qualidade de design e a velocidade de iteração decidem o resultado, e isso significa landing pages, e não navegação de catálogo.

A montagem, em ordem

Conecte o seu domínio no Framer. Construa uma landing page e um permalink de carrinho. Adicione o pixel nas duas plataformas e passe as UTMs pelo link. Faça uma compra de verdade e acompanhe a compra no GA4, na Meta e no pedido da Shopify. Só então aponte verba de mídia para a página.

Reserve um dia para essa primeira página e uma hora para cada página seguinte. Velocidade é a razão inteira de rodar essa combinação, então um ângulo novo deve entrar no ar numa tarde, e não numa sprint.