E-commerceRei do Sabão

A Nuvemshop já fazia parte da operação comercial, mas as possibilidades de personalização da plataforma não atendiam integralmente à experiência desejada para o novo site. O cliente queria começar por um MVP, sem investir muito num primeiro momento.

Era necessário conciliar três necessidades: liberdade para desenvolver uma interface própria, continuidade com os sistemas existentes e um custo inicial contido, com manutenção simples.

A solução também precisava considerar particularidades do consumidor regional: sensibilidade ao preço, importância das condições de entrega e preferência pelo atendimento direto em determinados momentos da compra.

A identidade do Rei do Sabão, definida no projeto de branding, precisava funcionar como um sistema de interface, não apenas como uma composição visual aplicada a páginas isoladas.

Para isso, foram desenvolvidos componentes reutilizáveis e regras compartilhadas de tipografia, cores, espaçamento e interação.

Cada componente consome os tokens do sistema e expõe as variações necessárias para o uso comercial: três tipos de botão (compra, WhatsApp e contorno), três selos (oferta, mais vendido e condição promocional) e cards de produto, de categoria e de kit.

Botões, selos e cards foram ajustados ao longo do desenvolvimento para encontrar um equilíbrio entre presença visual, clareza e facilidade de uso.

O sistema parte de tokens de design (cores, raios, sombras e fontes) reunidos em um único arquivo, que serve de referência para os componentes.

O site foi desenvolvido com Astro e React, utilizando a Cloudflare para distribuição das páginas e execução das funcionalidades que dependem de processamento no servidor.

A arquitetura separa a experiência de navegação das operações comerciais. Enquanto o front-end oferece liberdade de interface, a Nuvemshop permanece responsável por funções essenciais do e-commerce, como o catálogo e a finalização dos pedidos.

O Sanity permite gerenciar conteúdos editoriais, enquanto a integração com a API da Nuvemshop fornece informações do catálogo utilizadas na construção das páginas.

Funcionalidades como cálculo de frete, criação de pedidos e recebimento de webhooks são processadas por Cloudflare Functions.

Essa separação permite desenvolver uma experiência própria sem reconstruir toda a infraestrutura comercial.

Um dos pontos centrais do desenvolvimento foi conectar o site personalizado ao processo de pagamento da Nuvemshop.

A solução utiliza Draft Orders para criar pedidos a partir das informações validadas no servidor. Antes de gerar o checkout, produtos e preços são conferidos no servidor, a partir dos dados da própria plataforma.

Após a geração do pedido, o cliente é direcionado ao checkout da Nuvemshop, apresentado em um subdomínio próprio e personalizado com elementos da identidade visual do Rei do Sabão.

Dessa forma, a experiência mantém continuidade entre a vitrine e o pagamento, enquanto o processamento financeiro permanece sob responsabilidade da plataforma.

O pagamento acontece no checkout da Nuvemshop, fora do navegador do site. Por isso o site não "vê" a compra, e a mensuração precisou ser feita pelo servidor, a partir da confirmação de pagamento.

O desenvolvimento incluiu testes automatizados, avaliações de desempenho e verificações de acessibilidade e SEO.

Os indicadores abaixo foram medidos em 26 de outubro de 2026, na página inicial, com o PageSpeed Insights do Google, e representam resultados técnicos da implementação.

O PageSpeed Insights avalia a página inicial em quatro áreas, com notas de 0 a 100: desempenho (a velocidade de carregamento), acessibilidade, práticas recomendadas e SEO. Notas de 90 a 100 são consideradas boas pelo Google. O teste no celular simula um aparelho de entrada com conexão 4G lenta, e o teste no computador, uma conexão rápida.

Abaixo das notas, as métricas mostram a experiência real de carregamento: quando algo aparece na tela (First Contentful Paint), quando o conteúdo principal termina de carregar (Largest Contentful Paint), se a página trava durante o uso (Total Blocking Time) e se os elementos mudam de lugar sozinhos (Cumulative Layout Shift).

A evolução do projeto envolve duas frentes complementares.

A primeira é manter o desempenho conforme o catálogo e o conteúdo crescem. Hoje a página inicial tem LCP (Largest Contentful Paint) de 2,4 segundos no celular, dentro da meta de 2,5 segundos do Google.

A segunda é a consolidação de indicadores comerciais, incluindo tráfego, comportamento de navegação, conversões e vendas.

Esses dados serão essenciais para avaliar não apenas a qualidade técnica da implementação, mas também sua contribuição efetiva para a operação do Rei do Sabão.