Falar sobre um projeto
Início
  • Captura de CervejaBox, imagem 1 de 3
  • Captura de CervejaBox, imagem 2 de 3
  • Captura de CervejaBox, imagem 3 de 3

CervejaBox

Migração VTEX para Shopify | Página de assinaturas custom + HTML, CSS e JavaScript

Plataforma
Shopify
Período
dez. de 2024 a jan. de 2025
Stack
  • Shopify
  • HTML
  • CSS
  • JavaScript
  • JSON

Visão geral

O projeto CervejaBox consistiu na migração de uma página de assinaturas de um clube de cervejas da VTEX para a Shopify. O foco foi reconstruir a experiência de assinatura com mais estabilidade e controle, transformando uma página crítica do negócio em uma estrutura flexível, intuitiva e pronta para atualizações mensais.

Contexto e objetivo

Em clubes de assinatura, a página precisa permitir mudanças frequentes sem virar um risco operacional. O objetivo principal foi manter a flexibilidade da oferta mensal, permitindo ao cliente editar as combinações de cervejas com facilidade, sem comprometer desempenho, usabilidade ou consistência do fluxo de compra.

O desafio

O maior desafio foi equilibrar liberdade de edição com estabilidade técnica. Era necessário construir uma página altamente dinâmica, onde o usuário pudesse montar sua combinação sem erros, enquanto o cliente tivesse um controle simples para atualizar o que estaria disponível a cada mês. Além disso, problemas previamente enfrentados na VTEX precisavam ser eliminados, entregando uma jornada mais intuitiva e confiável.

A estratégia

A estratégia foi separar claramente estrutura visual e lógica de combinação. O layout foi construído com base em componentes claros e escaneáveis, garantindo leitura rápida e previsibilidade na interação. Em paralelo, a lógica em JavaScript foi desenhada para suportar combinações sem inconsistências, reduzindo fricção e prevenindo limitações técnicas durante a personalização do pedido.

O que foi implementado

Recriação completa do layout:

  • HTML e CSS: reconstrução integral da página com foco em clareza visual, hierarquia e responsividade.
  • UI orientada à escolha: organização por blocos e cards para facilitar compreensão e acelerar decisão do assinante.

Lógica de combinações e personalização:

  • JavaScript para combinações: implementação da lógica que permite ao usuário personalizar pedidos de forma simples, sem erros ou inconsistências.
  • Fluxo estável: validações e comportamentos controlados para evitar travas e limitações técnicas durante a montagem do kit.

Flexibilidade operacional para atualizações mensais:

  • Estrutura editável: base preparada para o cliente ajustar ofertas e combinações mensalmente sem depender de mudanças complexas.
  • Compatibilidade com Shopify: adaptação do modelo de assinatura ao ecossistema da plataforma mantendo performance e usabilidade.

Correção de problemas da plataforma anterior:

  • Eliminação de limitações da VTEX: resolução de instabilidades e fricções que existiam anteriormente, entregando uma página mais consistente.
  • Experiência mais intuitiva: jornada mais clara para o assinante entender, selecionar e finalizar.

Resultado

O resultado foi uma página de assinatura mais estável, eficiente e intuitiva dentro da Shopify, preparada para mudanças mensais sem perder performance. O projeto reforçou minhas competências em front-end, migração entre plataformas e desenvolvimento de lógicas personalizadas com JavaScript, elevando a experiência do usuário e reduzindo risco operacional para a operação do CervejaBox.