Em março de 2024, uma marca de skincare DTC veio até nós com um problema que é dolorosamente comum: seu tema Shopify era lento, seus gastos com anúncios estavam sangrando dinheiro, e seus Core Web Vitals estavam tão profundamente no vermelho que o Google estava essencialmente os depriorizando na busca. Oito meses depois, seu retorno sobre gastos com anúncios havia aumentado 249%, seu LCP caiu de 8.2s para 1.4s, e todas as métricas de Core Web Vitals estavam solidamente verdes. Esta é a história completa de como chegamos lá — as decisões de arquitetura, os tradeoffs, os erros, e os números reais.

Índice

DTC Brand Migrated Shopify to Headless Next.js: 249% ROAS Increase

O Ponto de Partida: Uma Loja Shopify em Apuros

Vamos chamá-los de GlowCo (NDA, você sabe como é). Eles são uma marca de skincare DTC fazendo cerca de $3.2M anualmente através de sua loja Shopify Plus. Eles 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 sua equipe de marketing. O problema era seu site.

Aqui está como ficavam suas métricas quando entraram em contato conosco:

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 PageSpeed Mobile 18/100 🔴
Pontuação PageSpeed Desktop 42/100 🟡
Taxa de Rejeição (Mobile) 71% —
Taxa de Conversão 1.2% —
ROAS Meta Ads 1.8x —
ROAS Google Ads 2.1x —

Uma pontuação PageSpeed de 18 no mobile. Já vi lojas Shopify ruins, mas essa tinha um tema com 2.4MB de JavaScript não otimizado, 14 scripts de terceiros bloqueadores de renderização (Klaviyo, Yotpo, um app de fidelidade, duas ferramentas de popup diferentes e um punhado de scripts de análise), e imagens hero que eram PNGs de 3MB sendo servidas 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 do template Liquid era uma bagunça aninhada de lógica condicional que ninguém entendia completamente.

Mas aqui está o que realmente me chamou a atenção: sua equipe de marketing nos mostrou que seus scores de qualidade de anúncios Meta haviam sido declinando por meses. O algoritmo Meta penaliza landing pages que carregam lentamente. Google Shopping era a mesma história — seus anúncios estavam recebendo menos impressões a CPCs mais altos porque o score de experiência da landing page estava desabando.

Eles não estavam apenas perdendo tráfego orgânico. Literalmente estavam 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. Eles tentaram otimizar seu tema Shopify existente — removeram alguns apps, comprimiram imagens, mudaram para um tema um pouco mais leve. Ajudou, mal. O LCP foi de 8.2s para cerca de 6.8s. Ainda profundamente 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 central do Shopify sozinho é ~200KB), e você está à mercê de seja qual for o tema e os apps estão fazendo.

Ir headless significava desacoplar completamente o frontend da camada de renderização do Shopify. Shopify ainda lidaria com o backend de comércio — produtos, inventário, checkout, pagamentos — mas construiríamos toda a experiência do 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 cliente e acesso a metafields.

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

  3. O caso comercial era claro. Se melhorar a velocidade do site pudesse reduzir seu CPC em até 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 que as coisas ficam interessantes, porque tínhamos um debate genuíno sobre a stack.

Os Concorrentes

A resposta oficial do Shopify para headless é Hydrogen — seu framework baseado em React construído no Remix. É tightly integrado com as APIs do Shopify e implantado no Oxygen (plataforma de hospedagem do Shopify).

Mas acabamos escolhendo Next.js 14 (App Router) usando a biblioteca Shopify Hydrogen React — 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 (streaming Remix) Excelente (ISR, SSG, SSR, RSC) Excelente (Islands, SSG)
Ecossistema React Completo Completo Parcial (Islands)
Opções de hospedagem 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 de API manual
Familiaridade da equipe Baixa Alta Média
Renderização Edge Oxygen Workers Vercel Edge, Cloudflare Cloudflare, Netlify
Comunidade/ecossistema Em crescimento Massiva Em crescimento rápido

Consideramos Astro seriamente. Para um site com muitos conteúdos com menos interatividade, o modelo de hidratação parcial do Astro teria sido ideal. Mas o site da GlowCo precisava de interatividade pesada no lado do cliente — um quiz de skincare, um construtor de rotina de skincare, gavetas de carrinho com quick-add, gerenciamento de assinatura em tempo real. Os React Server Components do Next.js nos deram o melhor equilíbrio de performance renderizada no servidor com riqueza no lado do cliente.

Também escolhemos implantar no Vercel ao invés de Oxygen. As capacidades de rede edge do Vercel e ISR (Incremental Static Regeneration) nos deram controle de cache refinado que não conseguíamos replicar facilmente no 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
  • Shopify Plus Checkout (nativo, não customizado)
  • Sanity CMS para conteúdo editorial, landing pages e posts de blog
  • Vercel para hospedagem e funções edge
  • Recharge via sua API headless para assinaturas
  • Klaviyo carregado assincronamente via uma integração customizada leve

Se você está avaliando uma setup similar, nossa equipe na Social Animal tem experiência profunda com essa arquitetura exata — documentamos nossa abordagem para desenvolvimento de CMS headless e desenvolvimento Next.js se quiser ver o quadro maior.

DTC Brand Migrated Shopify to Headless Next.js: 249% ROAS Increase - architecture

A 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 no Shopify. Isso foi inegociável. O mecanismo de comércio do Shopify é battle-tested e suas taxas de conversão de checkout são difíceis de vencer.

Para conteúdo, configuramos Sanity como um CMS headless. As páginas de produtos 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 a equipe de marketing pode atualizar conteúdo de página sem tocar em dados de produtos, e a equipe 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) // Consulta GROQ Sanity
  ]);

  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 produtos: ISR com revalidação de 60 segundos. Produtos não mudam a cada segundo, mas precisávamos de precisão 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 sob demanda acionada por webhooks Sanity. Quando a equipe de marketing publica, um webhook atinge nosso endpoint de revalidação.
  • Páginas de carrinho/conta: Cliente completo com shells renderizados no servidor. Essas são inerentemente dinâmicas.
  • Blog/editorial: Geração estática no tempo de construção com revalidação sob demanda.

A Implementação do Carrinho

É aqui que @shopify/hydrogen-react se justificou. O CartProvider e hooks associados lidam com todo o gerenciamento de estado do carrinho, incluindo atualizações otimistas de UI. O carrinho vive na Storefront API do Shopify (não em estado local), o que significa que persiste entre sessões e dispositivos.

// Gaveta de 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 no Plus com Checkout Extensibility) tem anos de testes A/B e otimização baked in. Shop Pay sozinho pode aumentar a conversão de checkout em 50% para clientes retornantes. Customizamos usando Checkout UI Extensions para consistência de marca e widgets de upsell, mas o fluxo central permanece nativo do Shopify.

Corrigindo Core Web Vitals: O Que Realmente Fez a Diferença

Aqui está a parte que a maioria dos estudos de caso ignora. Ir headless não corrige magicamente seus Core Web Vitals. Você pode absolutamente construir um site lento em Next.js. 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 singular maior de LCP veio de três coisas:

  1. Eliminando recursos bloqueadores de renderização. No tema Shopify antigo, 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 é pintado usando next/script com strategy="lazyOnload".

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

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

CLS: De 0.42 para 0.02

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

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

INP: De 510ms para 78ms

Interaction to Next Paint foi o mais difícil de corrigir. O tema antigo tinha handlers de eventos anexados ao DOM inteiro, jQuery waterfalls, e JavaScript pesado no lado do cliente bloqueando a thread principal.

React Server Components foram a chave aqui. Ao renderizar a maioria da página no servidor e apenas hidratar componentes interativos (gaveta de carrinho, seletores de produto, widget de quiz), reduzimos drasticamente a quantidade de JavaScript no lado do cliente. Nosso bundle de cliente total 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
PageSpeed Mobile 18 94 🟢
PageSpeed Desktop 42 99 🟢
JS Total (Página de Produto) 2.4MB 187KB —
TTFB (p75) 1.8s 0.12s —

A História do ROAS: Como Performance Virou Lucro

É aqui que a borracha encontra a estrada. Ninguém migra para headless por diversão — o caso comercial precisa estar ali.

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 de Conversão Direto

A taxa de rejeição mobile caiu de 71% para 38%. Isso sozinho é massivo — significa 46% mais visitantes estavam ficando para pelo menos ver o produto. A taxa de conversão mobile foi de 1.2% para 2.8%.

A taxa de conversão desktop melhorou de 2.4% para 3.9%.

Taxa de conversão blended geral: 1.2% → 3.1%

Impacto da Plataforma de Anúncios

Essa é a parte que nos surpreendeu até a nós. Dentro de 6 semanas de todos os Core Web Vitals passarem verde em toda a linha:

  • Google Ads CPC caiu 22% — Score de experiência de landing page do Google melhorou, reduzindo diretamente o custo por clique
  • Meta Ads CPM diminuiu 18% — Algoritmo Meta começou a mostrar seus anúncios mais (landing page melhor = score de relevância maior = custos menores)
  • Impression share de Google Shopping aumentou 34% — Melhor experiência de página significava que Google estava mais disposto a mostrar seus listings de produtos

O efeito combinado no ROAS:

Canal ROAS Antes ROAS Depois Mudança
Meta Ads 1.8x 5.2x +189%
Google Search Ads 2.1x 7.4x +252%
Google Shopping 2.4x 8.8x +267%
Blended 1.95x 6.8x +249%

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

Tráfego Orgânico

Seria negligência não mencionar o impacto de SEO. Dentro de 4 meses de todos os Core Web Vitals ficarem verdes:

  • Tráfego orgânico aumentou 67%
  • Posição média para palavras-chave alvo melhorou 4.2 posições
  • Receita orgânica aumentou 89%

Google tem sido claro que page experience é um sinal de ranking. Este foi uma prova real.

Timeline, Orçamento e Custos Reais

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

Timeline: 7 meses desde kickoff até lançamento completo (com rollout em fases começando no mês 5)

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

Custo total do projeto: ~$145,000

Hospedagem/infraestrutura mensal: ~$350/mês (Vercel Pro + plano Sanity Growth)

Shopify Plus contínuo: $2,300/mês (inalterado — já estavam no Plus)

Período de payback: O projeto se pagou em 2.8 meses com base na receita aumentada de ROAS melhorado e taxas de conversão.

Esse tipo de investimento é certo para toda marca? Não. Se você está fazendo menos de $1M anualmente, a matemática provavelmente ainda não funciona. Mas para marcas DTC gastando $50K+ mensais em anúncios com Core Web Vitals ruins, o ROI quase sempre está ali. Estamos felizes em discutir especificidades — entre em contato conosco ou verifique 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 nativo do Shopify foi 100% a chamada certa. Nenhuma regressão de conversão de checkout.
  • ISR com revalidação sob demanda nos deu o melhor dos dois mundos: performance estática com conteúdo dinâmico.
  • Rollout em fases (lançando primeiro páginas de blog/editorial, 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 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, orçamente tempo extra.
  • Configurar infraestrutura de teste A/B desde o dia um. Adicionamos no mês 2 e perdemos alguns dados de comparação inicial.
  • Usar Vercel Edge Config para feature flags ao invés da abordagem de variável de ambiente que começamos. Teria feito o rollout em fases mais limpo.

Uma Ressalva Honesta

A abordagem headless adiciona complexidade operacional. GlowCo agora gerencia dois sistemas ao invés de um. Sua equipe de marketing não pode apenas instalar um app Shopify e tê-lo aparecer na vitrine — qualquer integração de terceiros nova precisa de trabalho de desenvolvimento. Para GlowCo, em sua escala e gasto em anúncios, os ganhos de performance superam em muito esse atrito. Mas é um tradeoff real que você precisa entender antecipadamente.

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 fewer custom features podem ser feitas em 4-5 meses.

Ir headless quebra apps Shopify?

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

Hydrogen ou Next.js é melhor para Shopify headless?

Depende da sua equipe e requisitos. Hydrogen (built no Remix) oferece integração mais tight com Shopify fora da caixa e é o caminho oficialmente suportado pelo Shopify. Next.js oferece ecossistema maior, mais flexibilidade de hospedagem, e React Server Components. Escolhemos Next.js para GlowCo por causa da expertise existente da equipe e capacidades de cache edge do Vercel. Ambas são excelentes escolhas.

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

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 abaixo de $50K por um build headless completo — você provavelmente receberá um template com customização limitada. Custos de infraestrutura mensal tipicamente rodam $200-600 para hospedagem e CMS.

Core Web Vitals realmente afetam custos de Google Ads?

Sim. Google Ads usa um score de "Landing Page Experience" como parte do cálculo de Quality Score. Melhor velocidade de página e scores de Core Web Vitals levam a Quality Scores maiores, que reduzem diretamente seu custo-por-clique. GlowCo viu uma redução de CPC de 22% depois que seus Core Web Vitals melhoraram. Meta usa sinais similares para scoring de relevância de anúncio.

Você pode manter Shopify checkout ao ir 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 shoppers retornantes). Com Shopify Plus, você pode usar Checkout Extensibility para customizar a aparência e adicionar upsells enquanto mantém o fluxo de checkout central 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, built no Remix e implantado no Oxygen do Shopify. Você pode ir headless com Next.js, Astro, Nuxt, ou qualquer framework. Hydrogen é apenas uma opção dentro do ecossistema mais amplo de Shopify headless.

Vale a pena headless para pequenas lojas Shopify?

Geralmente não. Se você está fazendo menos de $1M em receita anual e gastando menos de $20K mensais em anúncios, o custo de uma migração headless provavelmente não 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 em anúncios for alto o suficiente que até pequenos ganhos de eficiência se traduzam em quantias significativas de dólares.