Shopify Hydrogen explicado: o que é headless commerce e quando compensa

01 / Insights

O que é o Shopify Hydrogen e o que não é

O Shopify Hydrogen é o framework da Shopify, baseado em React, para construir storefronts totalmente à medida. Em vez de personalizares o tema padrão da Shopify, substituis-o por completo: cada página e cada interação são desenhadas e programadas especificamente para a tua marca, enquanto a Shopify continua a tratar de produtos, stock, pagamentos e checkout nos bastidores. O alojamento corre no Oxygen, a plataforma da própria Shopify para Hydrogen, incluída no plano sem custo extra.

O Hydrogen não é um plugin, um construtor de páginas nem um tema que fica rápido por si só. É um framework de desenvolvimento, o que significa que a tua loja é construída e mantida por programadores. É desse facto que nascem todas as diferenças deste artigo: a liberdade, o custo e a equipa de que precisas.

02 / Insights

Headless commerce: separar a montra do motor

«Headless» significa separar a montra (o que o cliente vê) do motor de comércio que gere produtos, encomendas e pagamentos. Numa loja Shopify clássica, as duas coisas vivem juntas no tema. Numa loja headless, a montra é uma aplicação independente que fala com a Shopify através de APIs.

Os temas merecem uma avaliação justa: nunca foram tão bons. A geração atual é rápida, flexível e editável sem código, e para muitos negócios um bom tema bem configurado chega perfeitamente. O problema aparece nos limites. A estrutura, o fluxo de compra e as convenções visuais vêm definidos de fábrica, e a partir de certo ponto cada personalização vira remendo: uma app aqui, código injetado ali. O Hydrogen elimina esse teto. Se consegues desenhá-lo, consegues construí-lo.

03 / Insights

O que ganhas: velocidade, design sem limites, SEO técnico

Três ganhos concretos. Primeiro, controlo total do design: storytelling editorial entre produtos, navegação fora do padrão, configuradores à medida, movimento que pertence à marca e não à demo do tema. Segundo, performance: rendering no servidor através da rede do Oxygen, transições fluidas entre páginas e zero acumulação de scripts de apps que não consegues remover. Headless não é automaticamente mais rápido; o que te dá é controlo sobre cada kilobyte que a loja carrega. Terceiro, SEO técnico: markup semântico, dados estruturados e Core Web Vitals afinados desde a raiz, porque nada vem pré-fabricado a atrapalhar.

04 / Insights

O que continua na Shopify: produtos, stock, checkout e pagamentos

É a parte que mais preocupa quem já vende, e é a menos arriscada. Produtos, coleções, clientes, encomendas e descontos vivem na Shopify e ficam intactos. O Hydrogen substitui apenas a camada visível; o checkout continua a ser o da Shopify, com a mesma segurança e fiabilidade.

Para o mercado português isso importa: os métodos de pagamento que os teus clientes esperam (MB WAY, Multibanco, cartões) continuam a funcionar como antes, porque o pagamento acontece no checkout da Shopify e não na montra. O mesmo vale para faturação certificada e IVA: as apps que trabalham no admin da Shopify continuam a fazer o seu trabalho sem alterações. Na prática, a nova loja é construída e testada em paralelo enquanto o tema atual continua a vender; a mudança é uma troca de domínio com redirects planeados para não perderes posições no Google.

05 / Insights

Oxygen: onde fica alojada uma loja Hydrogen

O Oxygen é a plataforma de alojamento da Shopify para storefronts Hydrogen, incluída no plano sem taxa de alojamento à parte. As páginas são geradas numa rede global perto do visitante, em vez de num único centro de dados. Os deploys saem de um repositório GitHub ou da Shopify CLI, cada alteração pode ter o seu URL de pré-visualização antes de ir para o ar, e as variáveis de ambiente gerem-se no admin da Shopify.

Há dois limites práticos. O Oxygen usa um ambiente de execução baseado em workers e não um servidor Node.js completo, por isso algumas bibliotecas Node não funcionam lá. E só aloja storefronts Hydrogen. Podes pôr o Hydrogen noutras plataformas, como a Vercel ou a Netlify, mas aí pagas e manténs o alojamento tu. Para a maioria das lojas, o Oxygen é a escolha sensata.

06 / Insights

Hydrogen vs. tema: custos e prazos, lado a lado

Um projeto Hydrogen custa várias vezes o preço de um tema por uma razão simples: nada é pré-fabricado. Pagas um frontend desenhado e desenvolvido especificamente para a tua loja. O Hydrogen em si é gratuito e open source, e o alojamento Oxygen está incluído no plano Shopify; o investimento vai todo para o desenvolvimento, sem licenças pelo meio. Para referência: na Tanomedia orçamentamos a preço fixo depois de uma conversa inicial, com 50% no arranque e 50% no lançamento. A maioria dos nossos projetos demora 2 a 6 semanas. Os projetos Hydrogen ficam no topo desse intervalo e claramente acima do nosso ponto de entrada de 1.500 € para landing pages.

Intervalos realistas no mercado europeu em 2026, apenas como referência (os custos mensais de cada caminho estão em quanto custa uma loja online):

• Tema configurado: 0–400 € de licença mais a configuração, online em dias
• Tema personalizado por profissionais: normalmente 2.000–10.000 €, online em 2 a 6 semanas
• Storefront Hydrogen: tipicamente 15.000–60.000 €+ em estúdios especializados, projetos enterprise muito acima; 6 a 12 semanas é o prazo habitual no mercado, e um estúdio focado consegue menos

07 / Insights

Os custos do headless depois do lançamento

A construção é o custo visível. Uma storefront à medida traz também custos recorrentes que um tema esconde em grande parte. Conta com eles desde o início:

• Atualizações: a Shopify lança uma nova versão da Storefront API a cada trimestre e suporta cada uma durante pelo menos doze meses, por isso a loja tem de ser atualizada com regularidade
• Alterações de layout ou funcionalidades passam por um programador e não pelo editor de temas; reserva uma bolsa de horas ou uma avença
• Conteúdo: os metaobjetos da Shopify estão incluídos, um CMS headless externo tem preço próprio acima do plano gratuito
• Apps: as apps de widgets precisam de integração por API, e algumas cobram mais pelo uso headless ou não o suportam
• Analytics e consentimento de cookies são implementados na storefront em vez de ligados no tema

08 / Insights

Quando o Hydrogen ainda não compensa

Vendemos projetos Hydrogen e, ainda assim, dizemos a alguns clientes para ficarem no tema. Sinais claros de que o tema é a escolha certa por agora:

• O teu orçamento total para a loja fica abaixo de cinco dígitos
• Ainda estás a validar o produto e precisas de começar a vender já este mês
• A tua equipa edita páginas todos os dias e não tem um programador por perto
• Competes pelo preço ou pelo produto, e a experiência digital é secundária
• Ainda não bateste nos limites do teu tema atual

09 / Insights

Migrar de um tema para Hydrogen, passo a passo

Os passos que seguimos quando passamos uma loja de um tema para Hydrogen:

• Inventário do tema: templates, apps instaladas, URLs, tracking e conteúdos guardados nas definições do tema
• Decisão app a app: as do admin ficam, as de widgets são reconstruídas ou ligadas por API
• Passar para metaobjetos ou um CMS o conteúdo que só existe no tema, como secções de campanha e lookbooks
• Construir e testar a storefront numa pré-visualização do Oxygen enquanto o tema continua a vender
• Manter os padrões de URL da Shopify para produtos e coleções sempre que possível e redirecionar o que mudar
• Voltar a implementar analytics e consentimento, mudar o domínio e manter o tema despublicado como plano B
• Acompanhar a Search Console, a conversão e o checkout nos primeiros 30 dias

10 / Insights

Caso real: Drop Bike

A Drop Bike Lda. é um vendedor premium de bicicletas em Lisboa, com showroom, oficina especializada e um catálogo que vai das e-bikes às máquinas de montanha, estrada e gravel. O frontend Hydrogen à medida dá à loja uma identidade que nenhum tema traz de série: escura, direta e inconfundivelmente Drop Bike. A Shopify gere stock, pagamentos e checkout nos bastidores.

Não é uma demo. É uma loja a vender todos os dias, e é por isso que esta comparação assenta em experiência de produção. O caso de estudo da Drop Bike mostra o resultado, e a nossa página sobre desenvolvimento Shopify Hydrogen explica como definimos e orçamentamos um projeto.