Uma semana é tempo suficiente pra montar e-commerce no Lovable. Não o e-commerce completo que você imagina quando fecha os olhos: mas um e-commerce funcional, que recebe pedido, processa pagamento e deixa o cliente saber que o produto saiu.

O segredo não é trabalhar mais rápido. É saber o que cortar sem comprometer o que importa.

O que um e-commerce mínimo precisa ter

Antes de abrir o Lovable, lista o essencial:

Catálogo de produtos: nome, foto, preço, descrição curta. Sem filtro, sem busca, sem variação de cor e tamanho na primeira versão.

Carrinho e checkout: adicionar item, remover item, ir pro pagamento. O checkout pode ser uma página simples com formulário de endereço e botão de pagar.

Integração de pagamento: Stripe ou Mercado Pago. O Lovable gera o código de integração bem quando você descreve o que quer.

Painel admin básico: listar pedidos, ver status, marcar como enviado. Sem relatório, sem gráfico, sem integração com transportadora.

Confirmação por email: o cliente recebe email depois de comprar. Pode ser via Resend com 5 linhas de código gerado pelo Lovable.

Tudo que não está nessa lista fica pra depois do primeiro pedido real.

Print da plataforma Lovable mostrando interface de criação de app

Comece com o prompt de contexto. Antes de pedir qualquer coisa, diga ao Lovable o que você está construindo, pra quem é e qual é o escopo inicial. Algo como: “Estou construindo um e-commerce pra [nicho]. Na primeira versão, o objetivo é ter catálogo de produtos, carrinho, checkout com [Stripe/Mercado Pago] e painel admin pra ver pedidos. Sem login de cliente na v1.”

Isso define o que vai entrar na conversa e evita que o Lovable sugira funcionalidades fora do escopo.

Nos primeiros dois dias, construa:

  • Página inicial com grid de produtos
  • Página de detalhe do produto
  • Componente de carrinho lateral (drawer)
  • Banco de dados Supabase com tabela de produtos e pedidos

Connecte ao Supabase logo no início. O Lovable gera o código de integração, mas a conexão manual com as credenciais do Supabase é você quem faz: leva 10 minutos e salva dor de cabeça depois.

Dia 3-4: checkout e pagamento

O checkout é onde a maioria das pessoas perde mais tempo. Duas dicas:

Peça um checkout de uma página só. Endereço, dados de cartão e botão de confirmar na mesma tela. Checkout multi-step parece mais profissional, mas adiciona complexidade e ponto de desistência sem necessidade em v1.

Integre Stripe ou Mercado Pago com Payment Links antes de integrar a API direta. Payment Link é uma URL de pagamento gerada pelo dashboard da plataforma. Você redireciona o cliente pra lá, ele paga, você recebe confirmação por webhook. Mais simples de implementar no Lovable e funciona igual.

Peça ao Lovable: “Adiciona um botão de checkout que redireciona pra essa URL de pagamento: [url]. Quando o pagamento for confirmado via webhook POST na rota /webhook/payment, grava o pedido no Supabase e mostra tela de confirmação pro cliente.”

A tela de confirmação pode ser uma página simples com número do pedido e mensagem de agradecimento.

Dia 5-6: painel admin e email

O painel admin não precisa ser bonito. Precisa funcionar:

  • Lista de pedidos com data, produto, valor e status
  • Botão pra mudar status (pendente → enviado)
  • Campo de código de rastreamento (opcional pra v1)

Peça ao Lovable pra criar uma rota /admin protegida por senha simples: uma variável de ambiente com a senha funciona nessa etapa. Autenticação robusta fica pra v2.

O email de confirmação pode ser via Resend. Crie uma conta gratuita, pegue a chave de API e peça ao Lovable pra disparar um email quando o pedido for gravado no Supabase. Resend tem 3.000 emails por mês no plano grátis: suficiente pra começar.

Dia 7: deploy e teste real

Antes de publicar, teste o fluxo completo:

  1. Adicionar produto ao carrinho
  2. Ir pro checkout
  3. Finalizar compra com cartão de teste
  4. Ver pedido aparecendo no painel admin
  5. Receber email de confirmação

Todos esses passos com ambiente de teste do Stripe ou Mercado Pago, antes de ativar o modo de produção.

O deploy no Lovable é um clique. Depois, conecte um domínio próprio nas configurações do projeto: leva 15 minutos incluindo propagação de DNS.

O que ficou pra depois (e por quê)

Login de cliente: a maioria dos e-commerces pequenos vende sem conta de cliente. O cliente coloca o email no checkout, recebe confirmação e pronto. Login vem depois, quando você precisar de lista de desejos, histórico de pedidos ou programa de fidelidade.

Busca e filtro: com 20 produtos, a busca não é necessária. Quando o catálogo crescer, volta e pede pro Lovable adicionar.

Integração com transportadora: calcular frete no checkout é possível via API dos Correios ou Melhor Envio. Deixe pro momento em que você já estiver vendendo e souber quais regiões representam a maioria dos pedidos.

Variações de produto (cor, tamanho, modelo): tecnicamente possível, mas adiciona complexidade ao banco de dados e ao checkout. Se o produto principal tiver variações obrigatórias, inclua desde o início: mas só se for o caso do seu produto.

O que o Lovable faz bem (e o que trava)

Faz bem: UI de catálogo e produto, integração com Supabase, componentes de carrinho, formulários de checkout, deploy com um clique.

Trava: lógica complexa de estado (carrinho com desconto progressivo, cupons com regras aninhadas, cálculo de frete com múltiplas variáveis). Quando o prompt fica complexo demais, o Lovable gera código que compila mas não funciona como esperado. Nesses casos, divida em prompts menores e teste cada parte antes de avançar.

Próximo passo

A Formação em Vibe Coding do ibe.IA mostra como sair da ideia e publicar o primeiro app na mesma semana, com Lovable, Supabase e deploy real.

Conheça a Formação em Vibe Coding

E se essa leitura te ajudou a entender o que está acontecendo, segue a ibe.IA no Instagram (@ibe.ia) que toda semana sai conteúdo desse jeito.