Sua página de produto Shopify carrega. Oito vírgula dois segundos se passam. A imagem do hero estufa na tela. O dedo do seu visitante se aproxima do botão voltar — e seu pixel Meta registra outro bounce antes mesmo do checkout renderizar. Em março de 2024, uma marca DTC de skincare apareceu no nosso Slack com exatamente essa espiral: gastos com anúncios hemorragiando em um tema tão lento que o Google efetivamente os havia desprioritizado na busca. Oito meses depois, seu ROAS havia subido 249%. O LCP caiu de 8,2s para 1,4s. Todos os Core Web Vitals ficaram verdes. Este é o detalhamento completo — decisões de arquitetura, trocas que quase erramos, e as três métricas que mudaram mais rápido do que esperávamos.

Índice

Marca DTC Migrou Shopify para Headless Next.js: Aumento de 249% em ROAS

O Ponto de Partida: Uma Loja Shopify em Apuros

Vamos chamar de GlowCo (NDA, você sabe como é). Eles são uma marca DTC de skincare fazendo cerca de $3,2M anualmente através de sua loja Shopify Plus. Tinham 47 SKUs, um modelo de assinatura através da Recharge, e estavam gastando aproximadamente $85K/mês em anúncios Meta e Google.

O problema não era seu produto ou seu time de marketing. O problema era seu website.

Aqui está como suas métricas se pareciam quando nos procuraram:

Métrica Valor (Março 2024) Status
Largest Contentful Paint (LCP) 8,2s 🔴 Ruim
First Input Delay (FID) 340ms 🔴 Ruim
Cumulative Layout Shift (CLS) 0,42 🔴 Ruim
Interaction to Next Paint (INP) 510ms 🔴 Ruim
Pontuação Mobile PageSpeed 18/100 🔴
Pontuação Desktop PageSpeed 42/100 🟡
Taxa de Rejeição (Mobile) 71% —
Taxa de Conversão 1,2% —
ROAS Anúncios Meta 1,8x —
ROAS Anúncios Google 2,1x —

Uma pontuação PageSpeed de 18 no mobile. Já vi lojas Shopify ruins, mas essa carregava um tema com 2,4MB de JavaScript não otimizado, 14 scripts de terceiros que bloqueavam renderização (Klaviyo, Yotpo, um app de lealdade, dois popups diferentes, e um punhado de scripts de analytics), e imagens hero que eram PNGs de 3MB sendo servidos sem nenhum dimensionamento responsivo.

O tema Shopify deles era uma versão altamente customizada de um tema premium popular, modificado ao longo de três anos por pelo menos quatro freelancers diferentes. O código template Liquid era uma bagunça aninhada de lógica condicional que ninguém entendia completamente.

Mas aqui está o que realmente chamou minha atenção: seu time de marketing nos mostrou que seus quality scores de anúncios Meta vinham caindo há meses. O algoritmo do Meta penaliza páginas de destino que carregam lentamente. Google Shopping era a mesma história — seus anúncios estavam recebendo menos impressões em CPCs mais altos porque o landing page experience score estava desabando.

Eles não estavam apenas perdendo tráfego orgânico. Estavam literalmente pagando mais por cada clique porque seu site era lento.

Por Que Headless e Por Que Agora

GlowCo já havia explorado as opções óbvias. Tinha tentado otimizar seu tema Shopify existente — removeu alguns apps, compactou imagens, mudou para um tema um pouco mais leve. Ajudou, mas pouco. LCP foi de 8,2s para cerca de 6,8s. Ainda bem vermelho.

O problema fundamental é um que vemos repetidamente com a arquitetura monolítica do Shopify: você não controla o pipeline de renderização. Os servidores Shopify renderizam templates Liquid, injetam seu próprio JavaScript (o JavaScript core do Shopify sozinho é ~200KB), e você está à mercê do que o tema e os apps estão fazendo.

Ir headless significava desacoplar completamente o frontend da camada de renderização do Shopify. O Shopify ainda lidaria com o backend de comércio — produtos, inventário, checkout, pagamentos — mas construiríamos toda a experiência voltada ao cliente do zero.

O timing fazia sentido por três razões:

  1. A Storefront API do Shopify havia amadurecido significativamente. No início de 2024, a Storefront API cobria quase tudo que você precisaria para uma experiência completa de loja, incluindo gerenciamento de carrinho, contas de clientes, e acesso a metafields.

  2. Shopify Checkout Extensibility agora estava disponível em Plus. Isso significava que não precisávamos reconstruir o checkout (que, honestamente, é onde headless costumava dar problemas).

  3. O caso de negócio era claro. Se melhorar a velocidade do site pudesse reduzir seu CPC em apenas 15-20% enquanto melhorasse as taxas de conversão, o projeto se pagaria em 3-4 meses.

Escolhendo a Stack: Next.js, Hydrogen e a Storefront API

Aqui é onde as coisas ficam interessantes, porque tivemos um debate genuíno sobre a stack.

Os Contendores

A resposta oficial do Shopify para headless é Hydrogen — seu framework baseado em React construído sobre Remix. É fortemente integrado com as APIs do Shopify e deployado em Oxygen (plataforma de hosting do Shopify).

Mas acabamos escolhendo Next.js 14 (App Router) usando a biblioteca Hydrogen React do Shopify — não o framework completo Hydrogen/Remix.

Aqui está o porquê:

Fator Hydrogen (Remix/Oxygen) Next.js + Hydrogen React Astro + Storefront API
Flexibilidade SSR/SSG Boa (Remix streaming) Excelente (ISR, SSG, SSR, RSC) Excelente (Islands, SSG)
Ecossistema React Completo Completo Parcial (Islands)
Opções de Hosting Oxygen apenas (ou self-host) Vercel, Netlify, AWS, self-host Qualquer host estático + SSR
Profundidade de integração Shopify Nativa Via @shopify/hydrogen-react Chamadas manuais de API
Familiaridade do Time Baixa Alta Média
Renderização Edge Oxygen Workers Vercel Edge, Cloudflare Cloudflare, Netlify
Comunidade/Ecossistema Crescente Massiva Crescendo rapidamente

Consideramos Astro seriamente. Para um site com muito conteúdo e menos interatividade, o modelo de hydração parcial do Astro teria sido ideal. Mas o site de GlowCo precisava de muita interatividade client-side — um quiz de skincare, um construtor de rotina, drawers de add-to-cart rápidos, gerenciamento de assinatura em tempo real. Os React Server Components do Next.js nos deram o melhor equilíbrio entre performance server-rendered e riqueza client-side.

Também escolhemos fazer deploy em Vercel em vez de Oxygen. As capacidades de rede edge e ISR (Incremental Static Regeneration) do Vercel nos deram controle fino de caching que não conseguíamos replicar facilmente em Oxygen na época.

Nossa stack final:

  • Next.js 14 (App Router com React Server Components)
  • @shopify/hydrogen-react para carrinho, utilitários de Storefront API
  • Shopify Storefront API (GraphQL) para dados de produtos
  • Checkout do Shopify Plus (nativo, não customizado)
  • Sanity CMS para conteúdo editorial, landing pages e posts de blog
  • Vercel para hosting e edge functions
  • Recharge via sua API headless para assinaturas
  • Klaviyo carregado assincronamente via uma integração customizada leve

Se você está avaliando uma setup similar, nosso time em Social Animal tem experiência profunda com essa arquitetura exata — documentamos nossa abordagem para desenvolvimento de CMS headless e desenvolvimento Next.js se você quer uma visão mais ampla.

Marca DTC Migrou Shopify para Headless Next.js: Aumento de 249% em ROAS - arquitetura

Arquitetura da Migração

Camada de Dados

Mantivemos Shopify como a fonte de verdade para todos os dados de comércio. Produtos, variantes, inventário, preços, clientes, pedidos — tudo fica em Shopify. Isso era não-negociável. O mecanismo de comércio do Shopify é battle-tested e suas taxas de conversão de checkout são difíceis de bater.

Para conteúdo, configuramos Sanity como um CMS headless. As páginas de produto puxavam dados estruturados do Shopify (preços, variantes, inventário) e conteúdo editorial do Sanity (histórias de ingredientes, guias de uso, narrativas de venda cruzada). Essa separação é crucial — significa que o time de marketing pode atualizar conteúdo de página sem mexer em dados de produtos, e o time de ops pode gerenciar inventário sem quebrar landing pages.

// Busca de dados de página de produto simplificada (Next.js App Router)
async function getProductPageData(handle: string) {
  const [shopifyProduct, sanityContent] = await Promise.all([
    getShopifyProduct(handle),   // Storefront API GraphQL
    getSanityProductContent(handle) // Sanity GROQ query
  ]);

  return {
    product: shopifyProduct,
    editorial: sanityContent,
    // Mesclar metafields para dados estruturados
    structuredData: buildProductSchema(shopifyProduct, sanityContent),
  };
}

Estratégia de Renderização

Nem toda página precisa da mesma abordagem de renderização. Fomos deliberados sobre isso:

  • Páginas de produto: ISR com revalidação de 60 segundos. Produtos não mudam a cada segundo, mas precisávamos de acurácia de inventário dentro de um minuto.
  • Páginas de coleção: ISR com revalidação de 5 minutos. Essas mudam ainda menos frequentemente.
  • Homepage e landing pages: ISR com revalidação on-demand acionada por webhooks do Sanity. Quando o time de marketing publica, um webhook atinge nosso endpoint de revalidação.
  • Páginas de carrinho/conta: Totalmente client-side com shells server-rendered. Essas são inerentemente dinâmicas.
  • Blog/editorial: Geração estática no build com revalidação on-demand.

A Implementação do Carrinho

Aqui é onde @shopify/hydrogen-react ganhou seu lugar. O CartProvider e hooks associados lidam com toda a gerência de estado do carrinho, incluindo atualizações de UI otimistas. O carrinho vive na Storefront API do Shopify (não em state local), o que significa que persiste entre sessões e dispositivos.

// Drawer do carrinho com atualizações otimistas
'use client';
import { CartProvider, useCart } from '@shopify/hydrogen-react';

function CartDrawer() {
  const { lines, totalQuantity, cost, linesUpdate } = useCart();

  return (
    <Sheet>
      {lines.map((line) => (
        <CartLine
          key={line.id}
          line={line}
          onQuantityChange={(quantity) =>
            linesUpdate([{ id: line.id, quantity }])
          }
        />
      ))}
      <CartTotal cost={cost} />
      <CheckoutButton />
    </Sheet>
  );
}

Checkout

Não construímos um checkout customizado. Isso é importante. O checkout nativo do Shopify (especialmente em Plus com Checkout Extensibility) tem anos de testes A/B e otimização integrados. Shop Pay sozinho pode aumentar conversão de checkout em 50% para clientes recorrentes. Customizamos usando Checkout UI Extensions para consistência de branding e widgets de upsell, mas o fluxo core permanece nativo do Shopify.

Corrigindo Core Web Vitals: O Que Realmente Moveu a Agulha

Aqui está a parte que a maioria dos case studies ignora. Ir headless não magicamente corrige seus Core Web Vitals. Você pode absolutamente construir um site Next.js lento. Já vi isso acontecer. O que importa são as otimizações específicas que você faz uma vez que tem controle sobre o pipeline de renderização.

LCP: De 8,2s para 1,4s

A melhoria única de LCP mais grande veio de três coisas:

  1. Eliminando recursos que bloqueiam renderização. No antigo tema Shopify, 14 scripts de terceiros carregavam sincronamente. Em nosso build Next.js, CSS crítico é inlined, JavaScript é code-split e carregado apenas onde necessário, e scripts de terceiros carregam depois que o conteúdo principal está pintado usando next/script com strategy="lazyOnload".

  2. Otimização de imagem com next/image. Servimos imagens responsivas em formato WebP/AVIF, propriamente dimensionadas para cada viewport. Imagens hero foram de 3MB PNGs para ~80KB AVIF files. O elemento LCP (geralmente a imagem hero) agora carrega como um recurso prefetched de prioridade.

  3. Edge caching com stale-while-revalidate. ISR em Vercel significa que o primeiro visitante após uma janela de revalidação recebe uma página cacheada instantaneamente enquanto o servidor regenera em background. A maioria dos visitantes nunca espera por um server render.

CLS: De 0,42 para 0,02

Layout shift era causado por imagens sem dimensões, fontes carregando tarde (FOUT), e widgets de app injetados dinamicamente. Nossas correções:

  • Todas as imagens têm atributos explícitos width e height (ou usam CSS aspect-ratio)
  • Fontes pré-carregadas com font-display: swap e fallbacks size-adjusted
  • Sem widgets de terceiros injetados dinamicamente acima da dobra
  • Componentes skeleton UI para qualquer conteúdo async

INP: De 510ms para 78ms

Interaction to Next Paint foi o mais difícil de consertar. O antigo tema tinha event handlers anexados a todo o DOM, jQuery waterfalls, e JavaScript pesado client-side bloqueando a main thread.

React Server Components foram a chave aqui. Ao renderizar a maioria da página no servidor e só fazer hydrate de componentes interativos (drawer do carrinho, seletores de produto, widget de quiz), reduzimos dramaticamente a quantidade de JavaScript client-side. Nosso total de client bundle para a página de produto caiu de 2,4MB para 187KB.

Os Números Depois

Métrica Antes (Março 2024) Depois (Novembro 2024) Status
LCP 8,2s 1,4s 🟢 Bom
FID 340ms 12ms 🟢 Bom
CLS 0,42 0,02 🟢 Bom
INP 510ms 78ms 🟢 Bom
Mobile PageSpeed 18 94 🟢
Desktop PageSpeed 42 99 🟢
JavaScript Total (Página de Produto) 2,4MB 187KB —
TTFB (p75) 1,8s 0,12s —

A História do ROAS: Como Performance se Tornou Lucro

Aqui é onde a borracha toca a estrada. Ninguém migra para headless por diversão — o caso de negócio tem que estar lá.

O novo site foi lançado em fases entre julho e outubro de 2024. Em novembro, tínhamos dados limpos para comparar. Os resultados foram, francamente, melhores do que projetamos.

Impacto Direto de Conversão

Taxa de rejeição mobile caiu de 71% para 38%. Isso é massivo — significa que 46% mais visitantes estavam ficar para até ver o produto. Taxa de conversão mobile foi de 1,2% para 2,8%.

Taxa de conversão desktop melhorou de 2,4% para 3,9%.

Taxa de conversão blended geral: 1,2% → 3,1%

Impacto na Plataforma de Anúncios

Essa é a parte que nos surpreendeu até. Dentro de 6 semanas de os Core Web Vitals passarem green em todo o board:

  • CPC de Anúncios Google caiu 22% — O landing page experience score do Google melhorou, diminuindo diretamente o custo por clique
  • CPM de Anúncios Meta diminuiu 18% — O algoritmo do Meta começou a mostrar seus anúncios mais (melhor landing page = relevance score mais alto = custos menores)
  • Impression share do Google Shopping aumentou 34% — Melhor page experience significava que Google estava mais disposto a mostrar seus product listings

O efeito combinado em ROAS:

Canal ROAS Antes ROAS Depois Mudança
Anúncios Meta 1,8x 5,2x +189%
Anúncios Google Search 2,1x 7,4x +252%
Google Shopping 2,4x 8,8x +267%
Blended 1,95x 6,8x +249%

O aumento de 249% em ROAS blended veio de dois fatores compostos: custo por clique mais baixo E taxa de conversão mais alta. Quando seus cliques custam menos e cada clique converte em uma taxa mais alta, a matemática se compõe lindamente.

Tráfego Orgânico

Seria negligente não mencionar o impacto de SEO. Dentro de 4 meses de todos os Core Web Vitals ficarem green:

  • Tráfego orgânico aumentou 67%
  • Posição média para keywords-alvo melhorou em 4,2 posições
  • Receita orgânica aumentou 89%

O Google tem sido claro que page experience é um ranking signal. Isso foi prova real.

Timeline, Orçamento e Custos Reais

Acredito em transparência sobre o que projetos assim realmente custam. Aqui está o breakdown real:

Timeline: 7 meses do kickoff para launch completo (com rollout faseado começando no mês 5)

Time: 2 desenvolvedores frontend sênior, 1 especialista backend Shopify, 1 designer, 1 gerente de projeto (part-time)

Custo total do projeto: ~$145.000

Infraestrutura/hosting mensal: ~$350/mês (Vercel Pro + plano Growth do Sanity)

Shopify Plus contínuo: $2.300/mês (inalterado — já estavam em Plus)

Período de payback: O projeto se pagou em 2,8 meses baseado na receita aumentada de ROAS melhorado e taxas de conversão.

Esse tipo de investimento é certo para todas as marcas? Não. Se você estiver faturando menos de $1M anualmente, a matemática provavelmente ainda não funciona. Mas para marcas DTC gastando $50K+ mensalmente em anúncios com Core Web Vitals ruins, o ROI está quase sempre lá. Estamos felizes em falar especificidades — entre em contato conosco ou confira nossos modelos de preço para projetos de comércio headless.

Lições Aprendidas e O Que Faríamos Diferente

O Que Funcionou

  • Manter checkout do Shopify nativo foi 100% a chamada correta. Sem regressão de conversão de checkout.
  • ISR com revalidação on-demand nos deu o melhor dos dois mundos: performance estática com conteúdo dinâmico.
  • Rollout faseado (lançando pages blog/editorial primeiro, depois coleções, depois PDPs, depois homepage) nos deixou validar performance em produção antes de migrar páginas de alto-tráfego.

O Que Faríamos Diferente

  • Começar a migração headless do Recharge mais cedo. Sua API headless tinha algumas quirks que não antecipamos, e comeu 3 semanas da nossa timeline. Se você está usando Recharge, orce tempo extra.
  • Configurar infraestrutura de A/B testing desde o dia um. Adicionamos no mês 2 e perdemos alguns dados de comparação iniciais.
  • Usar Vercel's Edge Config para feature flags em vez da abordagem de variável de ambiente que começamos. Teria tornado o rollout faseado mais limpo.

Uma Ressalva Honesta

A abordagem headless adiciona complexidade operacional. GlowCo agora gerencia dois sistemas em vez de um. Seu time de marketing não pode apenas instalar um app Shopify e ter ele apareça na storefront — qualquer integração de terceiros nova precisa de trabalho de desenvolvimento. Para GlowCo, em sua escala e gasto com anúncios, os ganhos de performance superam muito essa fricção. Mas é um tradeoff real que você precisa entender indo.

FAQ

Quanto tempo leva para migrar uma loja Shopify para headless Next.js?

Para uma marca DTC típica com 30-100 SKUs, espere 4-8 meses dependendo da complexidade. O projeto de GlowCo levou 7 meses devido a features customizadas como seu quiz de skincare e integração de assinatura Recharge. Lojas mais simples com menos features customizadas podem ser feitas em 4-5 meses.

Ir headless quebra apps Shopify?

Sim, a maioria dos apps Shopify dependentes de tema não vai funcionar em um setup headless. Apps que injetam UI em sua storefront (widgets de review, popups de lealdade, ferramentas de upsell) precisam ser substituídas com alternativas baseadas em API ou componentes customizados. Apps backend (gerenciamento de inventário, shipping, etc.) continuam funcionando bem já que não tocam o frontend.

Hydrogen ou Next.js é melhor para Shopify headless?

Depende do seu time e requisitos. Hydrogen (construído sobre Remix) oferece integração Shopify mais apertada fora da caixa e é o caminho oficialmente suportado do Shopify. Next.js oferece um ecossistema maior, mais flexibilidade de hosting, e React Server Components. Escolhemos Next.js para GlowCo por causa da expertise existente do time e capacidades de edge caching do Vercel. Ambos são excelentes escolhas.

Quanto custa uma migração Shopify headless em 2026?

Orçamentos realistas variam de $80.000 a $250.000+ dependendo da complexidade da loja, features customizadas, e taxas de agência. O projeto de GlowCo foi $145.000. Desconfie de agências cotando menos de $50K para um build headless completo — você provavelmente vai receber um template com customização limitada. Custos de infraestrutura mensais típicos variam $200-600 para hosting e CMS.

Core Web Vitals realmente afetam custos de Anúncios Google?

Sim. Google Ads usa um score de "Landing Page Experience" como parte do seu cálculo de Quality Score. Melhor page speed e pontuações de Core Web Vitals levam a Quality Scores mais altos, que diretamente reduzem seu custo-por-clique. GlowCo viu uma redução de 22% em CPC depois que seus Core Web Vitals melhoraram. Meta usa signals similares para ad relevance scoring.

Você pode manter checkout Shopify quando vai headless?

Absolutamente, e recomendamos fortemente. O checkout do Shopify é altamente otimizado e inclui features como Shop Pay (que pode aumentar conversão de checkout 50%+ para clientes recorrentes). Com Shopify Plus, você pode usar Checkout Extensibility para customizar a aparência e adicionar upsells enquanto mantém o fluxo core de checkout intacto.

Qual é a diferença entre Shopify headless e Shopify Hydrogen?

Shopify headless é um conceito amplo — qualquer frontend customizado que usa a Storefront API do Shopify. Hydrogen é o framework específico do Shopify para construir storefronts headless, construído sobre Remix e deployado em hosting Oxygen do Shopify. Você pode ir headless com Next.js, Astro, Nuxt, ou qualquer framework. Hydrogen é apenas uma opção dentro do ecossistema Shopify headless.

É headless vale a pena para pequenas lojas Shopify?

Usualmente não. Se você está faturando menos de $1M em receita anual e gastando menos de $20K mensalmente em anúncios, o custo de uma migração headless provavelmente não vai produzir um ROI significativo. Foque em otimizar seu tema existente primeiro — remova apps não usados, comprima imagens, mude para um tema focado em performance como Dawn. Considere headless quando seu gasto com anúncios é alto o suficiente que até pequenas eficiências de ganho se traduzem em quantias significativas de dólares.