Headless Shopify: seu próprio frontend, a Shopify nos bastidores.

Com headless, a Shopify continua responsável por produtos, carrinho e checkout. Construímos o site visível separadamente, com Next.js ou Hydrogen. Compensa quando há muito conteúdo, design personalizado ou vários canais. Para muitas lojas, um bom tema basta.

Tema ou headless

PerguntaTema ShopifyHeadless
Quem mantém o conteúdo?Editor de temas na ShopifyCMS separado, como Sanity ou Contentful
DesignLivre dentro da estrutura do temaLivre, também para páginas de conteúdo e experiências
Apps da App StoreEm geral rodam direto no temaPartes do frontend muitas vezes precisam ser refeitas
CheckoutCheckout da ShopifyTambém o checkout da Shopify
Esforço e operaçãoMenorMaior, um segundo sistema roda ao lado

Como poderia ser o seu próximo site

Ver todos os projetos →

Quando você não precisa de headless

Sua loja vende principalmente produtos e o seu conteúdo é pequeno. Seu time mantém tudo no editor de temas. Nesse caso, um tema é mais rápido de construir e mais barato de operar.

O tempo de carregamento sozinho também não é motivo. Um tema enxuto também carrega rápido. Dizemos isso antes do projeto.

Na conversa inicial definimos juntos o seu objetivo.

Você descobre qual primeiro passo vale a pena.

Como construímos headless

Next.js
Serve quando loja e site institucional são uma só presença. Hospedamos na Vercel, na região da UE.
Hydrogen e Oxygen
O Hydrogen é o framework próprio da Shopify para lojas headless. O Oxygen é a hospedagem correspondente, sem custo adicional nos planos pagos, segundo a Shopify.
Storefront API
Os dois caminhos leem produtos, preços e carrinho pela Storefront API. O checkout fica com a Shopify.
Conteúdo no CMS
Guias, landing pages e campanhas são mantidos pelo seu time no Sanity ou Contentful. Os produtos ficam na Shopify e são apenas vinculados.

Operação após o lançamento

  1. Pré-visualização para editoresSeu time vê as alterações na página real antes de publicar.
  2. MonitoramentoAcompanhamos erros, tempo de carregamento e a conexão com a Storefront API.
  3. AtualizaçõesMantemos frameworks e dependências atualizados. Testamos novas versões da API da Shopify antes de trocar.

Na conversa inicial definimos juntos o seu objetivo.

Você descobre qual primeiro passo vale a pena.

Para quem é

É ideal se

  • Conteúdo e marca têm o mesmo peso que os produtos.
  • Loja e site institucional devem ser uma só presença.
  • Você tem um time ou um parceiro para a operação contínua.

É menos indicado se

  • Sua loja se dá bem com um tema e apps.
  • Você quer operar o menor número possível de sistemas.

Sites de referência

Todos os projetos

Conversa inicial

Vamos descobrir juntos onde o seu crescimento trava

  • Você fala com o time que também executa. Sem enrolação comercial.
  • Você descobre qual primeiro passo vale a pena para você.
  • Se a sua pergunta combinar mais com outro especialista, nós avisamos.
Renata WisniewskaDiretora-Geral, AqteloEu mesma leio cada solicitação e respondo em até um dia útil.office@aqtelo.com

Solicitar projeto

Em que podemos ajudar?

Você pode escolher mais de uma opção

O que você provavelmente quer saber

O Hydrogen serve para lojas puras que ficam próximas da Shopify. O Next.js serve quando um site maior, com conteúdo, faz parte do conjunto. Recomendamos com base no seu projeto.

Apps nos bastidores, para frete ou ERP por exemplo, continuam rodando. Apps com partes visíveis no tema muitas vezes precisam ser reintegrados. Verificamos cada app antes.

Sim. Também com headless, os clientes compram no checkout da Shopify. As personalizações dele passam por extensões de checkout.

Pode ser mais rápido, mas não precisa ser. Um tema enxuto também carrega rápido. Medimos antes onde a sua loja perde tempo.

Hospedagem do frontend, o CMS e a manutenção do código vêm além disso. Com Hydrogen no Oxygen, a hospedagem é gratuita, segundo a Shopify. Informamos os custos de operação no orçamento.

Continue lendo