O comércio headless é uma das tendências que mais cresce no e-commerce. Os seus principais defensores enumeram várias razões para implementar uma arquitetura headless, como melhorias dramáticas no desempenho do site e uma agilidade incomparável para fazer alterações em tempo real. À primeira vista, parece óbvio optar pelo headless, não é?
Pode dar às marcas total liberdade criativa, simultaneamente, permite aos programadores criarem experiências de e-commerce personalizadas com as tecnologias que preferem. Mas implementar uma arquitetura headless não é tão simples como se diz — e há muitas razões pelas quais o headless não é adequado para todos os comerciantes.
Antes de mergulhar de cabeça no headless, vamos certificarmo-nos de que compreende profundamente o que significa adotar esta abordagem. Também o iremos ensinar a desbloquear o potencial de uma arquitetura headless e explicar-lhe como a Shopify ajudou milhares de marcas a fazê-lo.
O que é o comércio headless?
O comércio headless é um modelo de e-commerce onde a camada de apresentação front-end é separada da funcionalidade de back-end. Isto dá-lhe flexibilidade para fazer a entrega de conteúdo através de várias plataformas como sites, aplicações, quiosques e dispositivos IoT.
As marcas adoram esta arquitetura, pois têm mais liberdade criativa para criar experiências únicas de loja online que normalmente não são possíveis através de plataformas monolíticas. Os programadores estão ansiosos por adotar o headless porque lhes oferece um nível único de controlo de desenvolvimento. Além disso, dá-lhes liberdade para aproveitar stacks tecnológicos compostos com as melhores ferramentas de comércio.
Adotar o headless permite criar múltiplas experiências de front-end para vários pontos de contacto com o cliente. Os seus front-ends web, móvel, por voz e ponto de venda (POS) podem comunicar com um único sistema de backend através da camada API, o que permite às marcas emergentes serem verdadeiramente omnicanal e expandir-se internacionalmente com rapidez.
No back-end, pode usar serviços fracamente acoplados e granulares para satisfazer as necessidades operacionais complexas da sua marca. Como o seu stack tecnológico é composto, pode implementar o seu CMS, CRM ou DXP preferido a um nível de plug-and-play. Também não há dependência do fornecedor, o que permite trocar estes serviços de excelência sempre que as necessidades do seu negócio mudem.
3 benefícios do comércio headless
O maior benefício do comércio headless é que é flexível e assume que o comércio evoluirá rapidamente, assim, está sempre a postos para adotar novas tecnologias de acordo com as necessidades do mercado. Todavia, há várias outras razões pelas quais as empresas emergentes querem adotar o headless.
Aqui estão três benefícios-chave do comércio headless:
- Controlo criativo total.
- Desempenho melhorado do site.
- Integração com as suas ferramentas e serviços preferidos.
1. Controlo criativo total
Adotar o headless permite criar exatamente a aparência e sensação que imaginou para a sua marca, sem limitações. Porém, não é aqui que a maioria das marcas inicia a sua jornada de e-commerce.
Um sistema monolítico onde a camada de apresentação (os ditos temas ou templates) é estritamente definida e ligada ao back-office, torna-se um local ideal para criar rapidamente uma loja online e levar os seus produtos ao mercado. À medida que a sua marca desenvolve a sua identidade digital, a sua loja online requer cada vez mais personalizações para alcançar experiências mais dinâmicas e personalizadas. Soluções avançadas de temas ou templates podem alcançar certos níveis de personalização. Por exemplo, a Online Store 2.0 da Shopify oferece um conjunto de ferramentas de desenvolvimento que abrem oportunidades gigantes ao sair dos moldes/templates comuns para criar uma experiência personalizada e única.
O comércio headless triunfa quando uma arquitetura fortemente acoplada começa a comprometer a liberdade de escolha (e das melhores ferramentas) para realizar experiências personalizadas de qualquer nível de complexidade. Usar um comércio headless significa que não há mais sacrifícios de design — as marcas conseguem personalizar tudo e qualquer coisa que possam imaginar, com as suas ferramentas de eleição.
O headless também permite testar instantaneamente, o que lhe dá poder para otimizar a experiência do cliente e a sua taxa de conversão.
Como a experiência de front-end é separada do back-end, é mais simples e menos arriscado fazer alterações ao front-end sabendo que não irá afetar a arquitetura do back-end subjacente do site.
Por exemplo, o comerciante Shopify Offlimits Cereal usou uma solução headless para criar uma experiência de compra semelhante a uma máquina de venda automática: que direcionava os compradores para um check-out tipo jogo (para tornar a compra de cereais divertida).
2. Desempenho melhorado do site
Quando um cliente chega ao site, tem apenas alguns segundos para garantir que a página carrega suficientemente rápido para prender a atenção de quem a visita.
A WebsiteBuilderExpert descobriu que as velocidades de carregamento podem impulsionar ou arruinar um site (artigo apenas em inglês).
- 64% dos utilizadores de smartphone esperam que as páginas carreguem em menos de quatro segundos.
- 40% dos consumidores não irão esperar mais de três segundos antes de abandonar um site.
- 82% dos consumidores dizem que as velocidades lentas de página afetam as suas decisões de compra.
Usar uma arquitetura headless torna possível criar páginas que carregam mais rapidamente em dispositivos desktop e móveis. Melhorar a velocidade do seu site também pode impactar os seus resultados financeiros. A marca dos dois a três segundos é o ponto de viragem onde as taxas de abandono disparam.
Isto significa que se um site fatura 100 000 € por dia, uma melhoria de um segundo gera outros 7 000 € diários. E o oposto também é verdade.
Os clientes não irão aprender a ser pacientes com páginas que carregam lentamente, vão abandonar o site e ir à concorrência. Ao usar uma arquitetura headless, as marcas podem melhorar a experiência do cliente e reduzir a probabilidade de os clientes perderem interesse devido a tempos de carregamento de página lentos.
3. Integração com as suas ferramentas e serviços preferidos
Ter sistemas codificados em várias linguagens pode impedir integrações críticas, mesmo aquelas que impactam negativamente a experiência do cliente. O headless funciona bem com todos.
Com APIs poderosas, o headless permite integrar todos os seus sistemas existentes (ERP, PIM, IMS, etc.) para criar uma experiência de compra com uma linguagem de programação da sua escolha. Isto não só lhe dá proteção face a mudanças na tecnologia, como também lhe dá o poder de avançar ao seu próprio ritmo e adaptar-se tão rapidamente quanto o comércio em si.
O comércio headless também permite aos programadores usar stacks tecnológicos compostos, o que proporciona um nível incomparável de flexibilidade. Pode substituir ou remover componentes sempre que estes deixarem de satisfazer as suas necessidades. Integrações modulares e aplicações de excelência permitem aos programadores adicionar ou trocar funcionalidades sem impactar toda a plataforma.
Quando é que o comércio headless é adequado para o seu negócio?
Se o negócio prospera com uma arquitetura tradicional, talvez não valha a pena investir os seus recursos financeiros e temporais no headless. Tudo depende do que está a tentar alcançar.
Mas se quer uma experiência do cliente mais personalizada e única aliada a um desenvolvimento mais flexível, e tem os recursos de desenvolvimento para suportar uma transformação para o headless, talvez este seja a escolha acertada.
As marcas que começam a explorar uma arquitetura headless veem-se em alguns destes cenários:
- Já tenho uma infraestrutura estabelecida, e nem sempre é fácil integrar outra ferramenta na tecnologia existente.
- Sinto que nos movemos mais lentamente que os concorrentes porque não consigo fazer ajustes simultâneos ao front-end e back-end.
- Quero que a minha experiência de compra seja rápida para todos os compradores, e ter mais controlo sobre os elementos que afetam o desempenho e velocidade do site.
- Quero reimaginar uma experiência única com uma visão criativa que vai além das personalizações que o meu tema ou template atual permite.
- Não tenho uma aplicação móvel nativa para iOS ou Android, ou a minha aplicação de compras móvel não é tão user-friendly quanto gostaria.
- Quero criar uma experiência única de loja online que não é possível com a minha plataforma atual (por exemplo, espelhos inteligentes, tecnologia para experimentar a roupa, máquinas de venda automática, etc.).
Considere os seus custos
Ao decidir como adotar o headless, considere os custos e tempo. O preço de um projeto headless de e-commerce B2B pode custar desde centenas de milhares a milhões de euros inicialmente. Ademais, também tem de considerar os custos anuais de manutenção, dependendo da funcionalidade, ferramentas de apoio e nível de personalização.
Outros canais criados numa plataforma headless (como uma aplicação móvel, stream de áudio ou integração de videojogo) podem custar apenas 99 € por mês se usar uma aplicação para criar a sua loja personalizada.
No final do dia, o custo do headless varia dependendo da complexidade da sua criação. E a criação e implementação são apenas um conjunto de custos. Não se esqueça de considerar taxas pagas a agências externas, ou custos mensais como subscrições a uma plataforma de CMS headless ou taxas de alojamento a um fornecedor de cloud.
Adotar o headless com a Shopify
A Shopify apoiou milhares de empresas que quiseram migrar para uma arquitetura headless. Os programadores e comerciantes tiram proveito do conjunto completo de ferramentas de desenvolvimento headless da Shopify para criar experiências personalizadas de topo em menos tempo e com custos mais baixos. As soluções headless da Shopify oferecem aos comerciantes e programadores a liberdade de escolher as ferramentas certas para o trabalho e estendem as capacidades da loja com um stack tecnológico composto.
As soluções headless da Shopify consistem no seguinte:
- Storefront API, a camada API headless da Shopify.
- Hydrogen e Oxygen, o stack de desenvolvimento oficial da Shopify para comércio headless.
Vamos analisar mais de perto como cada um permite às empresas emergentes, de todos os tamanhos, avançar para uma arquitetura headless.
Storefront API
A Storefront API é a base da nossa plataforma headless. Proporciona acesso a todas as capacidades de comércio da Shopify que são fundamentais para qualquer experiência voltada para o comprador, incluindo:
- Carrinho otimizado.
- Páginas de produtos e coleções.
- Pesquisa e recomendações.
- Preços contextuais (por exemplo, carrinho otimizado).
- Subscrições e outras funcionalidades B2B.
A Storefront API é agnóstica a quaisquer frameworks, dispositivos e plataformas de serviço. Isto dá aos programadores a liberdade de usar as ferramentas que já usam e adoram, ao mesmo tempo que testam novas tecnologias. Os programadores podem criar através de qualquer framework de desenvolvimento como o Next.js, o Gatsby e o Astro, fazer a implementação no seu serviço de alojamento favorito e ligarem-se a quaisquer sistemas de terceiros que tenham uma API.
O retalhista de roupa online Kotn usou a Storefront API da Shopify e o Next.js para consolidar duas lojas numa só, com um novo CMS, páginas de produtos personalizadas e check-out.
A Shopify cobre 80% das nossas necessidades, e penso que isso é comum para todos os comerciantes. Os restantes 20% são cobertos pelo headless e é onde realmente passamos o nosso tempo. O que estamos a tentar fazer é deixar a Shopify lidar com as coisas que fazem tão bem, para nos podermos focar no que nos torna únicos. Foi nisto que pensámos quando decidimos adotar o headless.
Benjamin Sehl, Cofundador da Kotn
A Storefront API proporciona experiências de compra ultrarrápidas através de dispositivos, canais, localizações e potencia os maiores eventos de vendas sem limitações. Também está totalmente implementada na edge e serve todos os pedidos legítimos de clientes privados e públicos sem limite de taxa.
Em muitos casos, os programadores querem um stack tecnológico mais opinativo para acelerar o desenvolvimento e chegar ao mercado mais rapidamente — e é aí que o Hydrogen e Oxygen entram em cena.
Hydrogen e Oxygen
O stack de desenvolvimento oficial da Shopify é composto pelo Hydrogen e Oxygen — uma combinação de ferramentas que oferece um caminho claro e robusto para criar lojas headless dinâmicas, de alto desempenho, capazes de crescer praticamente sem limites na Shopify.
O Hydrogen é criado sobre o framework Remix baseado em React e aproveita a sua facilidade de uso, padrões de desenvolvimento web de alta qualidade e avanços de desempenho como o Optimistic UI, Nested Routes e Progressive Enhancement. Embora o stack de desenvolvimento do Hydrogen seja opinativo, também é modular e proporciona componentes, hooks e utilitários otimizados para comércio pré-configurados para as APIs da Shopify. Cada peça do stack é otimizada para funcionar melhor em conjunto para que possa criar rapidamente, sem compromissos no desempenho e manutenção, enquanto proporciona liberdade de integração com as ferramentas e serviços que já usa.
Embora as lojas Hydrogen possam ser alojadas por qualquer fornecedor de alojamento na cloud, a forma mais fácil e rápida de implementar as lojas Hydrogen é com o Oxygen, a solução de alojamento globalmente distribuída pela Shopify. O Oxygen é renderizado na edge e tem mais de 285 pontos de presença ao redor do mundo, oferecendo às equipas de desenvolvimento controlo total de implementação. Também está incluído em qualquer plano Shopify sem custos adicionais e garante desempenho e uptime de pico em todo o mundo, mantendo os custos baixos para as empresas.
Recentemente, a Patta e a Tommy Hilfiger aproveitaram o Hydrogen e o Oxygen para criar uma loja imersiva que promovia a sua mais recente colaboração. Apresentava uma experiência de e-commerce memorável infundida com a cultura de hip-hop dos anos 90, o lançamento foi feito em apenas 14 dias.
Este é apenas um exemplo de como as marcas icónicas em todo o mundo, estão a adotar o headless com o Hydrogen e o Oxygen.
Tudo a postos para adotar o headless e-commerce B2B?
Quer seja uma empresa experiente com uma infraestrutura estabelecida ou esteja a criar a sua arquitetura empresarial, uma abordagem de comércio headless pode ser adequada para si.
E se as suas operações comerciais estão a tornar-se cada vez mais complexas e quer diferenciar-se ao competir com base na experiência em vez do preço, é possível que o headless faça parte do seu futuro.
Perguntas frequentes sobre headless e-commerce B2B
O que é uma abordagem headless?
Uma abordagem headless envolve separar o front-end e o back-end do seu site de e-commerce, para permitir um desenvolvimento e personalização mais rápidos das duas partes. É diferente de uma abordagem full-stack, que requer que o front-end e o back-end sejam desenvolvidos em conjunto, esta é uma alternativa em que as alterações são mais demoradas.
A Shopify é um CMS headless?
A Shopify é uma plataforma de e-commerce headless. Os comerciantes podem usar aplicações de terceiros para criar a camada de apresentação (front-end) e extrair dados da Shopify através da GraphQL Storefront API. A API também permite desenhar e implementar o seu próprio fluxo de check-out, bem como criar um carrinho que desbloqueia funcionalidades como totais estimados com impostos, taxas e descontos.
Como começar com o headless e-commerce B2B?
- Decida se quer manter ou trocar a sua plataforma de e-commerce.
- Escolha um CMS headless.
- Sincronize o seu CMS e APIs.
- Considere custos e tempo.
Como funciona o headless e-commerce B2B?
O comércio headless é uma arquitetura de e-commerce que desacopla a experiência de front-end das operações de back-end. O comércio headless é tipicamente referido como "API-first" porque o front-end e o back-end comunicam entre si através de uma camada API.
