Projeto de cliente · E-commerce

Hoydi28 Avelãs

Para a Hoydi28, uma marca de avelãs de Giresun, desenvolvemos a loja virtual, um painel administrativo que se instala no celular e as integrações de pagamento, envio, nota fiscal eletrônica, e-mail e Google por trás deles. Dentro do painel trabalha a equipe de IA da Collapssi: ela escreve posts para o blog, traduz o site para novos idiomas, planeja a vitrine e as campanhas e prepara rascunhos de resposta aos e-mails recebidos. A loja e o painel são um único aplicativo; cada página é pré-gerada para o Google a cada publicação.

  • JavaScript (aplicação de página única)
  • Supabase: PostgreSQL e Edge Functions
  • Netlify
  • Páginas pré-renderizadas com Playwright
  • PWA e Web Push
  • iyzico
  • EDM e-Fatura / e-Arquivo
  • Yurtiçi Kargo e Sürat Kargo
  • Resend
  • Google Analytics 4, Search Console, Google Ads, Merchant Center
  • Google Places API
  • Claude API
  • OpenAI Images API
Página inicial da loja
Página inicial da loja
Idiomas
Turco, inglês e novos idiomas abertos conforme um cronograma
Pagamento
Cartão (iyzico), transferência bancária
IA
Uma equipe Collapssi de sete integrantes e um assistente de anúncios
Integrações
Envio, nota fiscal eletrônica, Google Ads, Analytics, Search Console

As capturas de tela foram feitas em uma cópia local do site e do painel administrativo. Nomes de clientes, pedidos, empresas e todos os números dos painéis são dados de exemplo, não as vendas nem as visitas reais da loja. Nas avaliações do Google, os nomes dos autores aparecem apenas com as iniciais.

01

Loja e páginas de produto

A loja funciona com o mesmo cuidado no celular e no computador. Produtos, categorias e o layout das páginas são alterados no painel; mudanças de preço e de texto aparecem na hora no site. A página de produto responde em uma só tela às dúvidas que um cliente costuma ter.

  • Loja em turco e inglês; novos idiomas são abertos por um cronograma automático, e os visitantes recebem a oferta de uma tradução para o seu idioma
  • Selos automáticos: «Mais vendido» para os produtos mais vendidos dos últimos 60 dias e «Mais visto» para os mais visitados, atualizados toda noite
  • Card de alérgenos: alérgenos presentes, possíveis traços e quem pode consumir (sem glúten, vegano etc.) em etiquetas coloridas
  • Um coração de favoritos e uma nota mostrando quantas pessoas favoritaram o produto
  • Seletor de quantidade direto no card do produto; na página do produto, o preço se atualiza conforme a quantidade e a embalagem, com aviso de limite de estoque
  • Cestas de presente com preço e estoque calculados a partir dos produtos incluídos; o cliente também pode montar a própria cesta
  • Cartões de presente, escolha de variedade para o köme e pedido de «avise-me quando voltar ao estoque»
  • Uma indicação de «entrega somente na rodoviária» para produtos que não podem ser enviados por transportadora
Página de produto: selo de mais vendido, favorito e preço
Página de produto: selo de mais vendido, favorito e preço
Informações sobre alérgenos e quem pode consumir
Informações sobre alérgenos e quem pode consumir
Loja no celular
Loja no celular
02

Contas, favoritos e uma roleta de prêmios

Os membros encontram pequenas surpresas no site. Os clientes acompanham o pedido passo a passo, recebem um e-mail quando um favorito fica mais barato ou volta ao estoque e giram a roleta para ganhar um desconto.

  • Login com Google em um toque, no canto da página e sem abrir outra, seguido de uma saudação de boas-vindas com emojis
  • Etapas de envio animadas com emojis: pedido recebido, em preparação, a caminho (o caminhão vai e volta), entregue; com os eventos da transportadora e um link de rastreio
  • Favoritos: quem favorita um certo número de produtos recebe automaticamente um cupom pessoal; um e-mail quando um favorito fica mais barato ou volta ao estoque
  • Roleta Hoydi: o servidor decide o resultado e o cupom é adicionado à conta
  • Hoydi Para: pontos em cada pedido, recompensas por avaliações, pagamento com pontos
  • Endereços e dados de faturamento salvos; código de 6 dígitos por e-mail para senha esquecida
Minha conta: etapas de envio com emojis
Minha conta: etapas de envio com emojis
Favoritos e barra de recompensa
Favoritos e barra de recompensa
Roleta de prêmios Hoydi
Roleta de prêmios Hoydi
03

As avaliações do Google chegam sozinhas

As avaliações do Google das duas lojas são buscadas automaticamente toda manhã e exibidas no site em uma faixa rolante. Clientes com pedido entregue recebem um pedido gentil de avaliação no Google.

  • As avaliações do Google Business das lojas Merkez e Aksu são atualizadas toda manhã pela Places API; a nota e a quantidade de avaliações também ficam em tempo real
  • Uma faixa rolante de avaliações com filtro por loja
  • Membros com pedido entregue veem uma única vez a janela «Seu pedido chegou?»; um toque abre a página de avaliações da loja no Google
  • Nenhum cupom é vinculado, pois o Google proíbe recompensar avaliações; avaliações de produtos no site rendem Hoydi Para
Avaliações do Google em uma faixa rolante
Avaliações do Google em uma faixa rolante
Pedido de avaliação no Google após a entrega
Pedido de avaliação no Google após a entrega
04

Fluxo de pagamento e pedido

Nos pagamentos com cartão, o servidor recalcula o valor; se ele não bater com o valor exibido no navegador, o pagamento não é iniciado. Preços, campanhas, cupons e frete seguem um único conjunto de regras.

  • Pagamento com cartão pelo formulário do iyzico, em uma janela aberta dentro do site; com suporte a 3D Secure
  • Com o pagamento confirmado, o pedido passa a «Novo» e os Hoydi Para e cupons são descontados; se o cliente fechar a página, uma tarefa agendada verifica o resultado do pagamento
  • Transferência bancária: os dados bancários aparecem na página de checkout e após o pedido
  • Província e distrito do endereço de entrega são escolhidos em uma lista (81 províncias, 973 distritos)
  • Dados de faturamento após o pedido: pessoa física ou jurídica; os números de identidade e fiscais turcos são validados
  • E-mails automáticos: pedido recebido, enviado (com link de rastreio), entregue
Página de checkout
Página de checkout
05

Uma equipe de IA dentro do painel: Collapssi

A aba Collapssi do painel reúne sete integrantes de uma equipe de IA que verificam suas tarefas para a Hoydi28 a cada hora. Cada um tem uma função, um mascote cujo humor muda e um balão de fala. Nenhum deles muda nada sem aprovação: posts, vitrine, campanhas e respostas de e-mail aguardam a decisão da loja.

  • ✍️ Elif (redatora de conteúdo): escreve posts do blog nos dias escolhidos, conhecendo os produtos e os posts anteriores; marca um post com um aviso se algo viola as regras
  • 🌍 Deniz (tradutor): traduz para o inglês os textos de produtos, blog e páginas digitados em turco; abre novos idiomas, como alemão, russo e árabe, por um cronograma automático e publica cada um quando a tradução fica pronta
  • 🎨 Arda (designer visual): desenha imagens adequadas a cada post do blog, posicionadas entre os subtítulos
  • 📐 Selin (designer do site): sugere mudanças na vitrine com base em cliques e vendas; antes de datas especiais, prepara um banner, um slide e uma lista de produtos para o dia, que podem ser visualizados antes, entram no ar no dia após a aprovação e saem depois
  • 📅 Emre (planejador de campanhas): planeja as próximas semanas: cupons, descontos por tempo limitado, e-mails para assinantes, temas de blog para a Elif e pedidos de vitrine para a Selin; cada item é aprovado separadamente
  • ✉️ Zeynep (assistente de e-mail): lê cada e-mail recebido junto com os pedidos e o cadastro da empresa do remetente, pesquisa empresas na web e redige uma resposta; sugere e-mails de acompanhamento para potenciais clientes atacadistas
  • 🧭 Kerem (líder da equipe): a loja conversa com ele por chat; Kerem pede a correção ao integrante certo da equipe e transforma preferências de «daqui em diante» em regras permanentes
  • As regras básicas não mudam: nada de fatos inventados, alegações de saúde ou preços; cada integrante tem uma cota mensal de trabalho
Chat com o líder da equipe Kerem e regras permanentes
Chat com o líder da equipe Kerem e regras permanentes
Elif, Deniz e Arda
Elif, Deniz e Arda
Selin, Emre e Zeynep
Selin, Emre e Zeynep
Uma vitrine para uma data especial e um plano de campanha aguardando aprovação
Uma vitrine para uma data especial e um plano de campanha aguardando aprovação
06

Painel administrativo

O dono da loja administra todo o negócio em um único painel. Ele é instalado no celular como um app; novos pedidos geram uma notificação e o ícone do app mostra quantos pedidos estão pendentes.

  • Painel inicial: faturamento do dia, barras de metas se enchendo, situação da equipe Collapssi, vendas dos últimos 14 dias, divisão por categoria
  • Pedidos: os de hoje por padrão, navegação dia a dia, filtros de status e nota fiscal; pedidos vindos de anúncios e clientes novos recebem um selo
  • Seleção e ações em lote: imprimir, faturar ou mudar o status dos pedidos selecionados
  • Guia de envio A5 (também é possível escolher A4 ou uma impressora de etiquetas 10×15); pedidos impressos passam sozinhos para «Em preparação», e os cartões de presente são impressos em um cartão separado
  • Usuários do painel e funções; código por e-mail ao entrar por um dispositivo novo
  • Editor de páginas: adicionar e reorganizar blocos, com pré-visualização para computador, tablet e celular
  • Janelas próprias do site em vez das caixas de confirmação do navegador; no celular, uma barra superior, um menu que desliza da esquerda e uma barra de abas inferior
Painel administrativo
Painel administrativo
Pedidos
Pedidos
Painel administrativo no celular
Painel administrativo no celular
07

Metas, Analytics e Search Console

As metas de venda se enchem como uma cota e os dados do Google chegam ao painel. No topo dos relatórios, o mascote da Collapssi comenta a situação: comemora quando tudo vai bem, fica surpreso quando os números caem e sugere o que fazer.

  • Metas: os períodos de venda do site antigo servem de referência; as barras de faturamento, pedidos e unidades vendidas se enchem, com uma marca de «hoje deveríamos estar aqui» e uma previsão para o fim do período
  • Visitantes (Google Analytics 4): visitas, conversão em pedidos, canais, dispositivos, cidades e produtos mais vistos
  • Pesquisa Google (Search Console): cliques, impressões, taxa de cliques, posição média, consultas e páginas
  • Relatório de vendas e despesas, cliques no WhatsApp
  • E-mail de relatório semanal: toda sexta-feira de manhã, um resumo com gráficos (faturamento, anúncios, novos membros, mais vendidos e pendências), preparado pela Collapssi
Metas e o mascote da Collapssi
Metas e o mascote da Collapssi
Visitantes (Google Analytics)
Visitantes (Google Analytics)
Pesquisa Google (Search Console)
Pesquisa Google (Search Console)
08

Google Ads e um assistente de anúncios com IA

Os dados do Google Ads chegam ao painel a cada hora por meio de um script instalado na conta. O assistente de IA escreve um resumo diário e prepara sugestões; nada muda na conta de anúncios sem a aprovação da loja.

  • Relatórios por campanha, grupo de anúncios, palavra-chave, termo de pesquisa e, nos anúncios do Shopping, por produto
  • Os pedidos vindos de anúncios são contados à parte e comparados com o gasto
  • Sugestões: palavras-chave negativas, novas palavras-chave, orçamentos, custo máximo por clique e novos textos de anúncio; as tarefas aprovadas são aplicadas na próxima execução do script
  • Limites de segurança: o teto do orçamento diário total e a faixa de lances são verificados em três pontos diferentes
  • O script se atualiza sozinho: um carregador colado uma única vez na conta do Google Ads baixa o código principal do site
  • O feed de produtos do Merchant Center é atualizado a cada publicação; a tag de conversão e o modo de consentimento do Google estão configurados
Assistente de anúncios com IA e sugestões aguardando aprovação
Assistente de anúncios com IA e sugestões aguardando aprovação
09

E-mail e carrinhos abandonados

A caixa de e-mail da empresa fica dentro do painel. Os e-mails automáticos seguem o visual da marca, e o cliente que deixou produtos no carrinho pode ser lembrado com um toque.

  • Caixa de entrada: conversas, estrelas, arquivo, marcadores, adiar, rascunhos e envio agendado; vários endereços da empresa
  • Carrinhos abandonados: visitantes que adicionaram produtos mas não compraram e os produtos mais deixados para trás; lembretes por e-mail e WhatsApp
  • E-mails de campanha para assinantes: inscrição com consentimento explícito, um quadro de cupom e um link de cancelamento em cada e-mail
  • E-mails de datas especiais: em datas como o Dia das Mães, feriados religiosos e Ano-Novo, um e-mail de felicitações e um cupom para o dia são enviados sozinhos
  • E-mails de pedido, envio e entrega; alertas de preço e estoque para produtos favoritos
Carrinhos abandonados e lembretes
Carrinhos abandonados e lembretes
10

Busca de clientes atacadistas

Cafés, hotéis, lojas de castanhas e empresas que compram presentes corporativos são encontrados no Google Maps e acompanhados no painel como um funil de vendas.

  • Busca de empresas: no Google Maps por tipo e cidade; se a empresa tiver site, o endereço de e-mail é encontrado no site
  • Uma sequência de apresentação com três e-mails por tipo de empresa: em dias úteis, com limite diário e link de cancelamento em cada e-mail; a sequência para quando a empresa responde
  • Ficha da empresa: ligações, amostras, orçamentos e pedidos fazem a etapa avançar; todo o histórico em uma só tela
  • Comunicados: divulgar novos produtos e campanhas às empresas com cards de produto
  • Uma tabela de preços de atacado fixa para todos, pronta para imprimir; os pedidos de atacado do site entram automaticamente na lista de empresas
Atacado: empresas e sequências de e-mail
Atacado: empresas e sequências de e-mail
11

Envio, nota fiscal eletrônica e outras integrações

As integrações rodam em funções no servidor; as chaves secretas nunca chegam ao navegador. Notas fiscais e avisos de envio são gerados no card do pedido, e o status se atualiza sozinho.

  • Integração com Yurtiçi Kargo e Sürat Kargo pronta: aviso de envio com um toque, código de barras de referência Code 128 na guia de envio e consulta de status a cada duas horas
  • Nota fiscal eletrônica e arquivo eletrônico (EDM Bilişim): nota eletrônica se o comprador estiver cadastrado, senão arquivo eletrônico; as notas de todos os pedidos da lista podem ser emitidas de uma vez
  • Os descontos de cupons, campanhas e Hoydi Para são distribuídos proporcionalmente entre as linhas da nota
  • Avisos de novos pedidos por Web Push; o ícone do aplicativo mostra o número de pedidos pendentes
  • Login com Google; login com Apple pronto
Guia de envio A5 com o código de barras de referência da transportadora
Guia de envio A5 com o código de barras de referência da transportadora

Planejando um projeto parecido?

Conte o que você precisa; vamos definir juntos o escopo, o prazo e o custo. A primeira consultoria é gratuita.

Fale sobre o seu projeto