Shopify headless: vantagens, custos e quando dar o passo
Tema Shopify ou loja headless? O que a separação traz realmente, quanto custa, as armadilhas a evitar e os sinais de que chegou a hora de passar ao headless.
Por Léo Chuzel · Publicado a · 5 min de leitura
O headless tornou-se um dos temas mais discutidos do ecossistema Shopify. As grandes marcas adotaram-no, as agências destacam-no, e muitos comerciantes perguntam-se se devem seguir o mesmo caminho. Este artigo dirige-se a gestores e responsáveis de e-commerce: o que ganha, quanto custa e como saber se é o momento certo. Se procura o detalhe técnico (Storefront API, carrinho, encomendas), leia antes o nosso guia Shopify headless com Next.js.
Shopify headless, em concreto
Numa loja Shopify clássica, o tema mostra os seus produtos e a Shopify gere tudo o resto. Em headless, a Shopify continua a gerir o catálogo, o stock, os preços, o pagamento, as encomendas e o back-office. Só a montra muda: passa a ser um site à medida, desenvolvido em Next.js ou com o Hydrogen, o framework da Shopify, que consulta a sua loja através da Storefront API.
As suas equipas continuam portanto a trabalhar na administração Shopify que já conhecem. Os seus clientes descobrem uma loja mais rápida e mais distintiva.
O que ganha
Uma loja muito mais rápida
Ao longo dos anos, um tema Shopify acumula aplicações, e cada uma acrescenta os seus scripts em todas as páginas. Uma loja headless serve páginas geradas antecipadamente a partir de uma rede mundial de servidores, com imagens otimizadas e muito pouco JavaScript. No telemóvel, a diferença vê-se de imediato, nas Core Web Vitals como na taxa de conversão.
Uma experiência à sua imagem
Acabaram-se os limites impostos pelo tema e pelas suas secções: configurador de produto, lookbook, percurso de compra guiado, animações, páginas de coleção editoriais. O design é concebido para a sua marca, não adaptado a um modelo.
Conteúdo e comércio no mesmo sítio
Associado a um CMS headless, o site mistura livremente fichas de produto, guias, blog e páginas de marca. É uma alavanca poderosa para o SEO editorial, como explicamos no nosso artigo sobre a estratégia de conteúdo SEO.
Vários canais, um único back-office
A mesma Shopify pode alimentar o seu site, uma aplicação mobile, um quiosque na loja ou um portal B2B para os seus revendedores. O Shopify Markets continua disponível para vender em vários países, com as moedas e as línguas certas.
O que exige
- Um orçamento de desenvolvimento mais elevado do que um tema, porque toda a montra é construída à medida.
- Aplicações a rever: as que se injetam no tema (avaliações de clientes, vendas adicionais, fidelização) não funcionam tal como estão. É preciso passar pela respetiva API ou escolher alternativas compatíveis.
- Outra ferramenta de edição: o editor de temas da Shopify desaparece, e é o CMS que assume a edição das páginas.
- Um SEO a construir: sitemap, etiquetas, dados estruturados de produto e redirecionamentos deixam de ser fornecidos pelo tema. As boas práticas do nosso guia SEO Shopify continuam válidas, mas cabe à sua agência pô-las em prática.
- Uma manutenção técnica, como em qualquer site à medida.
Quanto custa uma loja Shopify headless?
Os valores abaixo são ordens de grandeza observadas no mercado, para ajudar a situar um orçamento:
- A assinatura Shopify não muda: a Storefront API está disponível nos planos standard. O Shopify Plus não é obrigatório, embora se torne pertinente para grandes volumes ou B2B avançado.
- O desenvolvimento: raramente menos de 15 000 € para uma loja headless cuidada, e de 25 000 € a 60 000 € para um catálogo complexo, vários países ou integrações com um ERP, um PIM ou um software de caixa.
- O alojamento: incluído com o Hydrogen (alojamento Oxygen), ou de zero a algumas dezenas de euros por mês na Vercel para uma loja Next.js de dimensão média.
- A manutenção: uma mensalidade para atualizações, monitorização e pequenas evoluções.
Em comparação, uma loja com um tema personalizado começa por volta dos 3 000 €, e um tema à medida ronda os 10 000 € a 15 000 €. O headless é portanto um investimento, que se rentabiliza sobretudo pelo ganho de conversão e pela liberdade que oferece. Para todas as faixas de preço, veja o nosso guia do preço de um site em Marselha.
Os sinais de que chegou a hora do headless
- A sua loja é lenta no telemóvel, apesar das otimizações, porque o tema está saturado de aplicações.
- Cada ideia de design choca com o tema: multiplica os contornos e o código personalizado.
- O conteúdo conta tanto como o catálogo: guias, blog, universo de marca, páginas editoriais.
- Vende em vários países ou em vários canais e quer uma experiência homogénea.
- A sua loja tem de comunicar com outras ferramentas: ERP, PIM, configurador, CRM.
- A sua faturação online é suficiente para que um ponto de conversão adicional financie o projeto.
Pelo contrário, uma loja que está a começar ou um catálogo pequeno não precisam do headless: um bom tema bem otimizado continua a ser mais rentável. Comece pelo nosso guia para criar uma loja Shopify, ou pela nossa comparação Shopify ou WooCommerce se ainda hesita quanto à plataforma.
Hydrogen ou Next.js?
O Hydrogen, o framework da Shopify, é uma excelente escolha quando a loja é o coração do projeto: foi pensado para o comércio e é alojado gratuitamente pela Shopify. O Next.js é mais adequado quando o site mistura muitos conteúdos, outras fontes de dados ou funcionalidades de negócio, ou quando a sua agência já trabalha com ele. Em ambos os casos, a loja assenta na mesma Storefront API, e a escolha faz-se caso a caso.
Passar ao headless sem perder o SEO
A passagem de um tema para uma loja headless é um redesign completo. Os URL dos produtos e das coleções devem ser mantidos ou redirecionados um a um, os dados estruturados Product retomados com preços e disponibilidade, e o sitemap submetido de novo ao Google. O nosso artigo redesign de site sem perder o SEO detalha o método. Se vem de outra plataforma, leia também o nosso guia para migrar para a Shopify.
O seu projeto Shopify headless em Marselha
A nossa agência Shopify em Marselha desenvolve lojas headless em Next.js, ligadas a um CMS e às suas ferramentas graças às nossas integrações API. Para ver como é, experimente a loja de demonstração integrada no nosso site: catálogo, fichas de produto e carrinho são servidos pela Shopify, numa interface totalmente à medida.
Cada projeto começa com uma auditoria gratuita da sua loja atual. Dir-lhe-emos com franqueza se o headless é a escolha certa, ou se basta otimizar o seu tema. Falemos do seu projeto.