A loja virtual funcionando antes do contrato.
Para propor uma loja virtual a uma loja de material de construção de Brasília, a Acheme trocou o PDF de orçamento por uma prévia navegável. O lojista rola a página e vê a própria loja na internet: busca, filtros, página de produto, pagamento no celular e o estoque ligado ao sistema de gestão. Para o portfólio, a marca real deu lugar a uma marca fictícia, a Prumo Construção.
- Cliente
- loja de material de construção em Brasília (nome preservado)
- Ano
- 2026
- Entrega
- apresentação interativa em um único arquivo HTML
- Situação
- proposta comercial, com marca fictícia
- A apresentaçãouma página guiada pela rolagem
- A lojaWordPress com WooCommerce
- O estoqueintegração com o ERP Omie
- Depois do lançamentogestão mensal da Acheme
Um lojista decide melhor quando vê a loja pronta.
O cliente é uma loja de bairro de material de construção, com balcão aberto até as 18h e revenda de marcas conhecidas. A proposta era levar esse balcão para a internet, aberto 24 horas, sem criar trabalho dobrado para a equipe.
Uma proposta em PDF descreve a loja. Esta apresentação mostra a loja. Cada seção responde a uma pergunta do lojista, na ordem em que ela aparece numa conversa: como fica a página inicial, como o cliente acha o produto, quanto custa entregar, como a venda chega ao sistema de gestão, quem cuida do site depois e em quanto tempo tudo fica pronto.
Uma conversa de venda em forma de página.
- 01
Um cenário de obra ao fundo
A página tem uma cena em 3D fixa ao fundo, feita com Three.js: o logo em relevo, uma parede de tijolos assentados em amarração, poeira no ar e, na seção do sistema de gestão, um fluxo de partículas entre a loja e o estoque. Cada seção tem uma posição de câmera própria.
- 02
Seis telas da loja, que funcionam
As telas da loja não são imagens. São páginas em miniatura, que o lojista pode usar: buscar "chuveiro", filtrar por voltagem, pôr itens no carrinho (o mesmo carrinho vale em todas as telas), calcular latas de tinta e testar um CEP.
- 03
A loja que se ajusta ao celular
A mesma loja vira o layout de celular quando a moldura fica estreita. O pagamento no celular mostra as escolhas que importam: receber ou retirar, pagar com Pix (com o código na tela) ou com cartão.
- 04
O Google e o sistema de gestão
Uma simulação de busca mostra como o produto apareceria no Google, com preço e estoque. Outra mostra o caminho de uma venda até o Omie, o sistema de gestão da loja: vendeu no site, o estoque baixa no Omie, e uma mudança de preço no Omie chega ao site.
- 05
O depois e o cronograma
A proposta não para no lançamento. Mostra o painel em que a equipe acompanha os pedidos, o relatório mensal (com dados de exemplo), o plano de gestão da Acheme e um cronograma de 12 semanas, com o aviso de que a integração pode entrar depois, se o Omie ainda estiver em implantação.
- 06
Uma versão para o portfólio
Um script gera a versão do portfólio a partir da proposta original, sem alterá-la. Ele troca o nome, o endereço, os telefones e o logo pela marca fictícia, esconde os valores e confere se nenhum dado do cliente sobrou no arquivo.
Um arquivo só, que abre em qualquer navegador.
A apresentação inteira cabe num único arquivo HTML. Ela pode ser enviada e aberta sem instalar nada; só precisa de internet para buscar as fontes e a biblioteca de 3D.
- 01
A rolagem conduz a história
Cada seção ocupa a tela, e a posição da rolagem diz em que ponto da conversa a pessoa está. A trena à esquerda mostra o andamento de 0% a 100%, e os botões levam à seção anterior ou à seguinte. A cena 3D ao fundo muda de pose junto com a seção.
- 02
Uma loja que muda pela largura da moldura
As telas da loja usam consultas de contêiner, um recurso do CSS que ajusta o layout pela largura da caixa onde ele está, e não pela largura da tela inteira. Assim, a mesma loja aparece como versão de computador numa moldura larga e como versão de celular numa moldura estreita.
- 03
O crédito da Acheme como chave
Os dados da apresentação (catálogo, marca, cronograma e cena 3D) vêm codificados no arquivo. A chave para abri-los é a assinatura "Proposta preparada pela Acheme.", com o logo, visível no fim da página. Quem copia o arquivo e apaga ou esconde a assinatura fica com uma página em branco. A proteção não é impossível de quebrar, mas desestimula a cópia.
- 04
A loja proposta
A loja seria feita em WordPress com WooCommerce, com catálogo de até 1.500 produtos, pagamento por Pix e cartão, frete por CEP com retirada na loja, e integração com o Omie pelo conector oficial (Omie.Hub) e pela API do Omie. O Google Analytics 4 e o Google Search Console já sairiam configurados.
O que este projeto ensina.
- Mostrar convence mais que descrever. Uma tela que funciona responde perguntas que um PDF deixaria em aberto.
- Organize a apresentação pelas perguntas do cliente, na ordem em que ele as faria.
- Fale a língua do balcão. Filtros por voltagem e uma calculadora de latas resolvem dúvidas reais de quem compra material de construção.
- Mostre o depois: quem cuida do site, como a equipe trabalha no dia a dia e o que acontece se o sistema de gestão atrasar.
- Para usar uma proposta no portfólio, troque os dados do cliente por um processo automático e confira o resultado. Trocar à mão deixa escapar detalhes.
Ficha técnica
- Apresentação
- HTML, CSS e JavaScript num único arquivo
- Cena 3D
- Three.js, com o logo extrudado a partir do mesmo desenho do SVG
- Telas da loja
- HTML e CSS com consultas de contêiner
- Loja proposta
- WordPress, WooCommerce, Pix, cartão, frete por CEP e retirada na loja
- Integração proposta
- Omie.Hub e API do Omie (produtos, preços, estoque, pedidos e NF-e)
- Medição proposta
- Google Analytics 4 e Google Search Console
- Marcas citadas
- Coral, Tigre e Lorenzetti aparecem como marcas revendidas pela loja; pertencem aos seus donos.
Quer ver a sua loja funcionando antes de decidir?
A Acheme monta lojas virtuais em WordPress e WooCommerce, ligadas ao sistema que a sua empresa já usa. Conte o que você precisa e respondemos em até 48 horas.
Conversar sobre uma loja virtual