Kits de Prompts

Construa uma Loja Online

Uma loja online precisa manter quatro promessas ao mesmo tempo: exibir o produto certo, cobrar o valor correto, evitar vender estoque que não está disponível e informar tanto ao cliente quanto ao proprietário o que acontece em seguida. Este kit constrói essas promessas em cinco prompts sequenciados — o catálogo público, estoque por variante, lógica de carrinho e entrega, checkout real e gerenciamento de pedidos — com um teste visível após cada etapa. É adequado para um catálogo pequeno ou médio de produtos físicos, produtos digitais ou ambos; uma grande operação de varejo com armazéns, regras fiscais complexas ou muitos canais de venda pode precisar de um sistema de comércio especializado.

Tipo de projeto: Loja online Dificuldade: Intermediate Tempo: 2-3 dias Funciona com: Base44 / Lovable / v0

O que você terá no final

  • Uma vitrine pública e catálogo de produtos que funcionam bem em celulares
  • Páginas de produtos com descrições reais, marcadores de posição de imagem, variantes selecionáveis e disponibilidade de estoque clara
  • Um carrinho que verifica preços e estoques atuais, mostrando as opções corretas de envio, retirada ou entrega digital
  • Um checkout seguro que processa um pagamento único real sem que seu site manipule detalhes do cartão
  • Uma página de confirmação de pedido e e-mail que informam ao cliente exatamente o que acontece a seguir
  • Uma área do proprietário onde você gerencia produtos, estoque e pedidos
  • Um fluxo de atendimento para envio, retirada, entrega local ou downloads digitais protegidos

Antes de começar

  • Um catálogo real pequeno. Prepare pelo menos três produtos com nomes, descrições, preços, categorias e estoque. Para cada opção, como tamanho ou cor, anote as combinações exatas que você vende e o estoque para cada combinação.
  • Imagens de produtos reais. Reúna suas próprias fotos claras ou imagens que você tenha permissão para usar — editar suas próprias fotos de produtos (iluminação, fundo, corte) é aceitável e geralmente faz com que uma pequena loja pareça muito mais profissional. Até que estejam prontas, este kit usa marcadores de posição rotulados; ele nunca pede ao construtor para inventar fotos de produtos ou gerar um produto que não existe.
  • Uma decisão de atendimento. Escolha se você vende produtos físicos, produtos digitais ou ambos. Para produtos físicos, decida para onde você entrega, quais métodos você oferece, quanto custa cada método e a estimativa de entrega. Para produtos digitais, prepare os arquivos reais e uma política de download clara.
  • Uma conta de provedor de pagamentos. O Stripe é uma escolha comum. Mantenha-a em modo de teste até que o passo 4 funcione do início ao fim, e armazene qualquer chave privada apenas nas configurações seguras do seu construtor.
  • Políticas voltadas ao cliente. Rascunhe sua política de envio ou entrega, política de devoluções ou reembolsos, política de privacidade e termos. Os requisitos variam de acordo com o local e o produto, portanto, use orientações adequadas para onde você opera.
  • Doce endereços de e-mail que você controla. Use um como cliente e outro como proprietário para que você possa ver ambos os lados de um pedido de teste.

Qual plataforma combina com isto

Base44 é a opção mais fluida para uma loja personalizada de pequeno ou médio porte, pois dados de produtos, telas do proprietário, contas, regras de segurança e checkout Stripe podem coexistir em um único aplicativo. A configuração do Stripe começa em modo de teste, mas os produtos do Stripe não formam automaticamente um catálogo de loja completo, por isso este kit solicita deliberadamente uma fonte clara de informações de produto, variante e estoque. Lovable é uma ótima escolha para produtos digitais e pagamentos únicos. Também pode suportar vendas físicas, mas o estoque, o envio e o atendimento ainda precisam ser construídos e testados separadamente. v0 é especialmente forte para a experiência da vitrine e pode conectar serviços de pagamento e banco de dados; no entanto, uma loja v0 totalmente personalizada deixa a parte de dados de produtos, contas, estoque e integração de pedidos para você construir e verificar. Em qualquer plataforma, use um sistema de comércio especializado em vez deste kit quando precisar de vários armazéns, devoluções avançadas, muitos canais de venda ou coordenação de inventário de alto volume. Shopify vs Base44 vs Lovable explica onde essa linha é traçada e como uma vitrine Lovable pode ser colocada sobre o Shopify.

Comece com o primeiro prompt em um plano gratuito. Uso extra e alguns serviços conectados podem custar mais conforme você desenvolve o projeto.

Crie em

Como ganhamos dinheiro

Os passos

1

Construir a vitrine e o catálogo de produtos

Quando usar

Comece aqui, em um projeto totalmente novo, antes de adicionar contas, um carrinho ou pagamentos.

Um formato de loja pública completo onde as pessoas podem navegar pelos produtos e entender o que estão comprando.

O prompt

Esses prompts funcionam melhor em inglês — cole-os como estão, mesmo em páginas traduzidas.

Build the public storefront for [STORE NAME], which sells [PHYSICAL PRODUCTS / DIGITAL PRODUCTS / BOTH] for [WHO THE PRODUCTS ARE FOR].

Create a home page that explains what the store sells, why a customer should trust it and how to browse. Create a catalogue page where people can browse products by [YOUR MAIN CATEGORIES]. Create one reusable product page that shows the product name, real description, price, available options, stock message, image area, delivery or download summary and a clear purchase action. Also add an about page and a contact page using [CONTACT EMAIL].

Save products as editable information rather than writing each product permanently into a page. Each product needs a name, short description, full description, category, price, product type, status, image, delivery summary and whether it is featured. Product type is physical or digital. Status is draft, active or unavailable. Only active products appear to visitors.

Add three example products that are clearly labelled as examples for me to replace. Use labelled image placeholders saying [REAL PRODUCT IMAGE NEEDED]. Do not use stock photos and do not generate product, customer or lifestyle images from scratch. Editing my own real product photos is fine; only invented or generated products are the problem, because they misrepresent what the buyer receives.

Do not build customer accounts, a cart, checkout or payment in this step. Show the purchase action as [BUTTON LABEL, e.g. Choose options], but do not pretend an order can be completed yet.

Design the store to feel [THREE BRAND ADJECTIVES]. Use [COLORS] and [TYPOGRAPHY PREFERENCE]. Keep the product information easy to scan, use restrained spacing and make every page comfortable on a phone. Do not invent reviews, sales numbers, scarcity messages, certifications or customer claims.

When finished, tell me where I edit products and which text and images are still examples.

Confira se funcionou

  • Você pode mover-se da página inicial para o catálogo e abrir cada produto de exemplo
  • Editar um produto de exemplo altera o que os visitantes veem sem precisar reconstruir a página
  • Produtos em rascunho e indisponíveis não aparecem como produtos comuns à venda
  • Cada área de imagem está claramente rotulada para uma imagem real que você deve fornecer
  • A ação de compra não leva a um checkout falso
  • O catálogo e as páginas de produtos são fáceis de ler no seu celular

Você saberá que funcionou quando:

Uma vitrine pública onde você pode navegar por três produtos de exemplo editáveis, desde a página inicial até uma página de produto completa.

Fique atento a

Produtos de exemplo frequentemente sobrevivem até o lançamento por acidente. Dê a cada exemplo um rótulo óbvio e não remova esses rótulos até que o nome real, a descrição, o preço e a imagem tenham sido fornecidos. Uma grade de produtos bonita também não é um catálogo de loja se cada item for escrito diretamente na página; prove que uma edição na área de produtos atualiza a página pública.

2

Adicionar controles de variantes, estoque e proprietário do produto

Quando usar

Assim que a vitrine estiver com a aparência correta e antes de criar o carrinho.

Uma fonte confiável de verdade sobre o produto, incluindo o estoque exato para cada versão selecionável.

O prompt

Esses prompts funcionam melhor em inglês — cole-os como estão, mesmo em páginas traduzidas.

Add product options, stock control and a private owner product area to this store.

A variant means one selectable version of a product, such as a blue shirt in size medium. For each product, let me choose whether it has no variants or has options named [OPTION NAMES, e.g. size and colour]. Save every valid combination separately with its own price when needed, stock quantity, identifying code and active or unavailable status. Do not create combinations I do not sell.

On the product page, the customer chooses each required option before the purchase action becomes available. Show the price and availability for the exact combination they selected. If that combination is unavailable or its stock is zero, say so plainly and do not let it continue toward purchase. Never show a vague in-stock message based only on the total across every option.

Add a private owner area where I can add and edit products, upload my real product images, create valid option combinations, change prices, adjust stock and mark a product draft, active or unavailable. Only I can open or use this area. A visitor must not reach it by typing its address directly.

Keep one source of truth for product names, prices, variants and stock. The public catalogue, product page, future cart and owner area must all read from that same saved information rather than keeping separate copies.

Add a stock history that tells me what changed, by how much, when and why. Manual changes require a short reason such as [STOCK ADJUSTMENT REASONS]. Do not reduce stock yet because no order can be paid for in this step.

Keep all work from step 1 unchanged. Use my real images where I upload them and keep labelled placeholders everywhere else. Do not generate product images from scratch or invent a product; editing my own real photos is fine.

Confira se funcionou

  • Você pode criar um produto com [NOMES DE OPÇÕES] e apenas as combinações que você realmente vende aparecem
  • Selecionar uma combinação diferente altera o preço exibido ou a disponibilidade quando necessário
  • Uma combinação com estoque zero fica visivelmente indisponível e não pode prosseguir para a compra
  • Alterar um preço na área do proprietário atualiza o catálogo e a página do produto
  • Desconectado, você não pode abrir a área de produto do proprietário nem mesmo colando o endereço dela
  • Uma alteração manual de estoque aparece no histórico de estoque com o seu motivo

Você saberá que funcionou quando:

Um produto com combinações de opções reais cujo preço e estoque você pode alterar privadamente e verificar na página pública do produto.

Fique atento a

Um número de estoque para um produto inteiro é incorreto quando as opções diferem; ele pode vender um tamanho ou cor que você não tem mais. Rastreie o estoque para a combinação exata. Evite manter um preço no provedor de pagamento e outro na área do produto sem uma regra de sincronização clara, pois eles ficarão defasados. A área do produto deve ser a fonte usada para calcular o carrinho futuro, enquanto a etapa de pagamento verifica novamente antes da cobrança.

3

Construir o carrinho e as opções de entrega

Quando usar

Após o estoque de variantes funcionar e antes de conectar pagamentos reais.

Um carrinho cujos conteúdos, totais e opções de processamento possam ser testados sem cobrar ninguém.

O prompt

Esses prompts funcionam melhor em inglês — cole-os como estão, mesmo em páginas traduzidas.

Add a working cart and fulfilment choices to this store without connecting payment yet.

A customer can add the exact selected product variant, change its quantity, remove it and continue shopping. Keep the cart if they move between pages or refresh. Before adding or increasing a quantity, check the current saved stock and never allow more than is available.

Calculate each line and the subtotal from the current saved product price, not from a price sent by the customer's browser. Show product name, selected options, quantity, price and a small real product image or labelled placeholder. If a price, status or stock level changed after the item entered the cart, explain the change and require the customer to review it.

This store sells [PHYSICAL PRODUCTS / DIGITAL PRODUCTS / BOTH]. For a cart containing physical products, offer only these valid fulfilment choices: [SHIPPING / LOCAL DELIVERY / PICKUP OPTIONS]. Explain the cost, where each choice is available and the delivery estimate using [YOUR REAL RULES]. Collect only the address or pickup details that choice needs. For a cart containing only digital products, do not ask for a shipping address and show digital delivery as free unless [YOUR REAL DIGITAL DELIVERY RULE] says otherwise.

Show a clear order summary before checkout with the subtotal, delivery charge, any discount I have explicitly configured and the total. Do not invent tax rules. Show tax only when the connected payment setup can calculate it correctly for the customer, otherwise tell me what remains to be configured before launch.

Add a review order button that stops at a clearly labelled payment not connected screen. Do not create a fake success message and do not mark anything as ordered or paid.

Test the cart with [ONE IN-STOCK VARIANT], [ONE LOW-STOCK VARIANT], [ONE OUT-OF-STOCK VARIANT] and every fulfilment choice. Tell me in plain language what happened in each test.

Confira se funcionou

  • Você pode adicionar dois produtos diferentes com as opções exatas que selecionou
  • Atualizar ou visitar outra página não esvazia o carrinho
  • Você não pode aumentar uma quantidade acima do estoque que está realmente disponível
  • Alterar um preço de produto ou estoque na área do proprietário é detectado antes da revisão
  • Pedidos físicos mostram apenas opções válidas de entrega ou retirada e o total muda corretamente
  • Um pedido apenas digital não solicita um endereço de entrega
  • O botão de revisão para antes do pagamento e nunca afirma que o pedido foi bem-sucedido

Você saberá que funcionou quando:

Um carrinho de teste contendo dois produtos cujas quantidades, escolha de entrega e total final você pode alterar e verificar sem pagar.

Fique atento a

Regras de envio que parecem simples muitas vezes falham nos limites, como uma área não suportada, um carrinho misto físico e digital, ou retirada selecionada sem um local de retirada. Teste cada uma. Nunca confie em um preço armazenado apenas no navegador do visitante; a loja deve ler novamente o preço e o estoque das informações protegidas do produto antes do checkout. Se os impostos não puderem ser calculados de forma confiável, não mostre um zero confiante ou um valor inventado.

4

Processar pagamento e criar um pedido confirmado

Quando usar

Somente após o carrinho bloquear o estoque indisponível e todos os totais de atendimento estiverem corretos.

Um teste de pagamento seguro que gera um pedido pago e a confirmação correta tanto para o cliente quanto para o proprietário.

O prompt

Esses prompts funcionam melhor em inglês — cole-os como estão, mesmo em páginas traduzidas.

Connect this store to [PAYMENT PROVIDER, e.g. Stripe] in test mode and turn the reviewed cart into a real checkout.

Before checkout opens, check the current product status, exact variant stock, price and fulfilment cost again from the protected saved information. Create a short stock reservation for [RESERVATION TIME, e.g. fifteen minutes] so two customers cannot both buy the final item. Release the reservation if payment is cancelled or not completed in time.

Send the customer to the payment provider's secure checkout to enter payment details. My site must never collect or store card details. The amount charged must come from the checked cart total, not from anything the customer's browser can change.

Treat an order as paid only after the payment provider sends its trusted payment confirmation. Returning to the success page is not proof of payment. On trusted confirmation, create one order with a unique order number, mark it paid, reduce each purchased variant's stock exactly once and clear the customer's cart. A delayed or repeated confirmation must never create a second order or reduce stock twice.

Show a confirmation page with the order number, items, amount paid, fulfilment choice, customer contact details and what happens next. Send the same useful summary to [CUSTOMER EMAIL] and send a new-order alert to [OWNER EMAIL]. For a physical order, include the delivery or pickup estimate. For a digital order, provide the purchased files through a protected download that only the paid customer can use; never expose a permanent public file address.

Add a basic private owner order view showing the order number, customer, items, amount, payment state, fulfilment choice and date. Do not expose payment secrets or full payment details.

Show me where to complete my payment provider connection and which steps I must perform myself. Then guide me through one successful test payment, one cancelled payment and one declined payment.

Confira se funcionou

  • O checkout abre na página segura do provedor de pagamento com os itens e o total corretos
  • Um teste de pagamento bem-sucedido retorna para uma confirmação exibindo um número de pedido
  • O e-mail de confirmação do cliente e o e-mail de novo pedido do proprietário são ambos recebidos
  • O pedido pago aparece apenas uma vez na visualização de pedidos do proprietário
  • O estoque adquirido diminui uma vez, enquanto um pagamento cancelado ou recusado não o reduz
  • Reabrir ou atualizar a confirmação não cria outro pedido
  • Um arquivo de teste digital abre apenas para o cliente que pagou e não através de um link público copiado

Você saberá que funcionou quando:

Um pedido de teste completo: reservar estoque, pagar, receber confirmação, ver um pedido na área do proprietário e confirmar que o estoque mudou apenas uma vez.

Fique atento a

Uma página de sucesso pode ser aberta sem um pagamento bem-sucedido, portanto, nunca deve ser o sinal que marca um pedido como pago. Confirmações de pagamento repetidas são normais e devem ser seguras para processar mais de uma vez. As configurações de pagamento de teste e reais são separadas; após mudar para o modo real, faça um pequeno pedido real para si mesmo e reembolse-o. As reservas de estoque precisam de uma data de expiração, ou checkouts abandonados podem fazer com que produtos disponíveis pareçam esgotados. Arquivos digitais precisam de entrega protegida, não de um link permanente que possa ser compartilhado.

5

Adicionar processamento e concluir o fluxo de trabalho do proprietário

Quando usar

Após o teste completo do pedido na etapa 4 funcionar desde o pagamento até a confirmação.

Fornecer ao proprietário uma fila de pedidos gerenciável e aos clientes atualizações precisas após o pagamento.

O prompt

Esses prompts funcionam melhor em inglês — cole-os como estão, mesmo em páginas traduzidas.

Complete the order fulfilment workflow and owner controls without changing the working payment or stock rules.

In the private owner area, let me filter orders by [FULFILMENT STATUSES, e.g. paid, preparing, ready for pickup, shipped, delivered, cancelled and refunded]. Opening an order shows the customer details needed for fulfilment, purchased items and variants, delivery or pickup choice, payment state, stock changes and a dated history of status changes. Let me add a private note that customers cannot see.

For shipped orders, let me add [DELIVERY PROVIDER NAME] and a tracking reference or tracking link. For pickup or local delivery, let me add clear collection or arrival instructions. For digital orders, show whether the customer received access and let me safely resend the protected download message without creating a new order.

Send the customer an email only for the status changes I choose: [STATUS CHANGES THAT SHOULD SEND AN EMAIL]. Each message must use the real order details, explain what changed and tell the customer what to do next. Never include private owner notes.

Add low-stock alerts at [LOW-STOCK LEVEL] and show which exact variant needs attention. If I cancel and refund an order through the payment provider, update the order after trusted confirmation and ask me whether sellable physical stock should be returned. Do not automatically return damaged, lost or downloaded digital goods to available stock.

Let me export the order information I need for fulfilment using [FIELDS I NEED], while excluding payment secrets and unnecessary personal details. Keep access to products, orders and exports owner-only.

Run the tests from steps 1 through 4 again after these changes and report anything that no longer works.

Confira se funcionou

  • Você consegue encontrar o pedido de teste, alterar seu status de processamento e ver um histórico datado
  • O cliente recebe a atualização correta para o status escolhido e nenhum e-mail para um status que você excluiu
  • Instruções de rastreamento ou retirada aparecem no pedido e na mensagem correta para o cliente
  • Um aviso de estoque baixo nomeia a opção exata do produto que está acabando
  • Um reembolso atualiza o pedido sem repor automaticamente todos os itens no estoque
  • Desconectado, você não consegue abrir a área de pedidos ou exportar informações de clientes
  • A vitrine, verificações de estoque, carrinho e teste de pagamento ainda funcionam após a adição das ferramentas do proprietário

Você saberá que funcionou quando:

Um pedido de teste pago que você pode processar enquanto o cliente recebe atualizações precisas e o histórico de estoque permanece correto.

Fique atento a

Reembolsado nem sempre significa reposto; bens físicos danificados e arquivos digitais entregues precisam de tratamento diferente. E-mails de status podem se tornar excessivos ou contraditórios se cada alteração interna enviar um, portanto, escolha os momentos voltados para o cliente. As exportações contêm informações pessoais: inclua apenas o necessário para o processamento, restrinja o acesso e exclua cópias antigas de acordo com sua política.

Colocando no ar

  • Substitua todos os produtos de exemplo e marcadores de posição de imagem por descrições precisas e imagens reais que você possui ou tem permissão para usar
  • Verifique cada preço, combinação de opções, quantidade de estoque e nível de estoque baixo na área do proprietário
  • Teste um item em estoque, o último item disponível, um item fora de estoque e uma alteração de preço enquanto um item já está no carrinho
  • Teste cada opção de envio, entrega local, retirada e entrega digital que você realmente oferece, incluindo um endereço ou área que você não atende
  • Alterne o provedor de pagamento de teste para configurações reais, faça um pequeno pedido real para si mesmo, confirme se ambos os e-mails chegam e faça o reembolso
  • Confirme o comportamento de reembolso real, cancelamento, ajuste de estoque e download digital protegido
  • Publique informações claras sobre entrega, devolução, reembolso e contato antes do checkout
  • Adicione sua política de privacidade e termos com o prompt de páginas legais
  • Conecte seu serviço de e-mail com o prompt de e-mail transacional e teste a partir de mais de uma caixa de entrada
  • Conecte seu domínio personalizado com o prompt de domínio personalizado e repita o checkout no domínio ativo
  • Abra a jornada completa de compra em um celular real e em uma conexão lenta, do catálogo até a confirmação
  • Mantenha uma exportação recuperável de produtos e pedidos, e saiba quem pode acessar as informações do cliente

Gaste menos créditos

Toda plataforma cobra pelo trabalho que a IA dela faz — então o hábito mais barato é pensar antes de construir. Estas seis regras cortam a maior parte do desperdício, qualquer que seja a plataforma.

  1. Planeje primeiro em um chat gratuito. Esboce tudo no ChatGPT, Claude ou Gemini — páginas, recursos, o que cada formulário coleta, como deve ficar. Pensar lá é grátis; pensar dentro de um builder é cobrado.
  2. Comece com um prompt escrito, não com uma frase. "Faça um site para mim" é a frase mais cara na construção com IA. Um primeiro prompt completo — como os deste site — economiza dezenas de rodadas de correção.
  3. Não tenha preguiça dos detalhes. Cada detalhe omitido volta como uma correção que você paga. Nome do negócio, cores, cada página, cada campo de formulário, o que acontece após o envio — coloque tudo no primeiro prompt.
  4. Depois, uma mudança por mensagem. "Arrume o cabeçalho, e o formulário, e as cores" gera um emaranhado que custa mais para desfazer do que economizou.
  5. Travou? Pare de remendar. Se a mesma correção falhar umas três vezes, não mande uma quarta — descreva o estado final desejado da seção inteira em uma mensagem nova.
  6. Comece grátis. Faça upgrade quando precisar de mais. Use a cota gratuita para criar e explorar sua primeira versão. Faça upgrade quando precisar de mais uso ou de recursos pagos, e confira os custos de serviços conectados antes de lançar.

Os prompts desta página foram escritos para fazer a maior parte desse trabalho por você — é esse o objetivo deles.

Leia o guia completo

Revisado em: 2026-07-27

Perguntas Frequentes

Usamos cookies para analisar tráfego e rastrear cliques de afiliados. Ao continuar, você concorda com nossa Política de Privacidade.