Template HTML para Vitrine Online com WhatsApp — Grátis e Editável
Template HTML grátis editável para vitrine online com catálogo de produtos, botão WhatsApp por item e checkout no zap, sem mensalidade.
Sobre este template
Para quem é este template
Você é pequeno comerciante e vende até 50-100 produtos — moda, acessórios, artesanato, doces, brechó, decoração, cosméticos, papelaria, plantas, marca local de qualquer ramo. Vende muito pelo Instagram e WhatsApp, mas o feed do Insta não comporta um catálogo organizado e o cliente fica perguntando preço por DM. Você precisa de uma vitrine online com fotos, preços, descrição e botão de comprar — vitrine pura, para fechar venda no zap, sem checkout integrado, sem mensalidade de SaaS, sem comissão sobre cada venda.
Layout pensado para qualquer ramo de pequeno comércio. Header sticky com brand mark + nav + carrinho com contador (visual, editável), hero com tagline em gradient verde + 3 badges (100% natural / Cruelty-free / Embalagem reciclável — editáveis pro seu nicho), nav de categorias em pílulas (Todos / Rosto / Corpo / Cabelo / Kits — renomeáveis), grid de 4 produtos com card (imagem com gradient + emoji ou foto real, categoria, título, descrição, preço com promo opcional 'old price riscado + now price em destaque', botão Comprar), seção de 4 benefícios (Frete grátis / Compra segura / Troca / Atendimento humano), CTA de cupom de boas-vindas e footer com CNPJ. Schema.org Store inline com aggregateRating editável.
Por que publicar no Htmly
Template grátis, publicação em 10 segundos, HTTPS automático e link curto compartilhável (minhamarca.htmly.com.br). Edite direto no navegador — clique no nome do produto, na descrição, no preço, no emoji do produto e digite. Sem cadastro para testar. Domínio próprio (minhamarca.com.br) disponível no plano Pro para parecer marca de verdade. Quando crescer e precisar de checkout integrado (cartão, parcelamento), você leva o domínio para outra plataforma sem perder a marca.
Próximos passos
Marca que cresce e quer testar campanhas de venda específicas (Black Friday, lançamento de coleção, kits sazonais) ganha tração com o template de landing page de vendas, focado em conversão. Para gerar landing totalmente customizada por campanha, use o construtor de página de venda com IA. Fotos de produto pesadas atrasam carregamento — otimize com a ferramenta de comprimir imagens antes de subir. E para domínio próprio (minhamarca.com.br) e funcionalidades extras, confira a tabela de preços.
O que vem incluído
- ✓Header sticky verde com brand mark, navegação (Produtos, Sobre) e carrinho com contador editável (visual, sem checkout nativo)
- ✓Hero gradient verde claro com tagline em destaque + 3 badges editáveis (100% natural, Cruelty-free, Embalagem reciclável) — adapte pros valores da sua marca
- ✓Nav de categorias em pílulas (Todos, Rosto, Corpo, Cabelo, Kits) — renomeie pras suas categorias reais e duplique pra adicionar mais
- ✓Grid de 4 produtos com card responsivo: imagem com gradient + emoji ou foto real, categoria em eyebrow, título, descrição curta, preço (com promo opcional 'old riscado + now em destaque') e botão 'Comprar'
- ✓Estrutura de promo nativa — `<span class="old">` (preço riscado) + `<span class="now">` (preço atual). Mostre apenas `now` pra produto sem promo
- ✓Seção de 4 benefícios com ícones SVG: 'Frete grátis acima de R$ 150', 'Compra segura', 'Troca em 30 dias', 'Atendimento humano' — adapte pra promessas reais do seu negócio
- ✓Bloco de CTA destacado pra captura de e-mail ('Ganhe 10% na primeira compra') — aponte pra MailerLite, Mailchimp ou serviço de e-mail marketing externo
- ✓Schema.org `Store` inline com `name`, `description`, `priceRange` e `aggregateRating` (nota + review count editáveis) — Google exibe estrela na busca quando cliente procura pela marca
- ✓Tipografia Manrope, paleta verde natural + amarelo accent — visual orgânico/clean ideal pra cosméticos, alimentos artesanais, sustentabilidade. Trocável pra qualquer paleta
- ✓Footer com CNPJ + ANVISA (ou registro setorial) editável — passa credibilidade pra cliente comprando pela primeira vez
- ✓Mobile-first com grid responsivo (auto-fit minmax 240px) — funciona perfeitamente no celular onde 70%+ das compras pequenas acontecem hoje
- ✓Acessível (WCAG AA, focus-visible em links e botões, navegação por teclado, alt em imagens, `prefers-reduced-motion` respeitado)
- ✓HTML estático aberto — você pode baixar o código, editar localmente em qualquer editor e hospedar onde preferir
Como personalizar com IA
- 1Peça ao ChatGPT: 'reescreva esta vitrine HTML pra uma marca de [SEU RAMO — ex: papelaria artesanal, brechó vintage, doces naturais, cosméticos veganos], trocando "Naturê" pelo nome da marca, adaptando os 3 badges, as 5 categorias, os 4 produtos (nome + descrição + preço) e os 4 benefícios pros valores reais da marca'
- 2Adicione botão 'Comprar pelo WhatsApp' em cada produto — substitua o `<button class="add-btn">Comprar</button>` por `<a class="add-btn" href="https://wa.me/5511999999999?text=Quero comprar [PRODUTO] por [PREÇO]">Comprar pelo zap</a>`. Cliente clica e o pedido já chega no WhatsApp com produto e preço
- 3Substitua os emojis dos produtos (🧴 🌸 💧 🎁) por fotos reais — troque `<div class="product-img cat1" aria-hidden="true">🧴</div>` por `<img class="product-img" src="produto.jpg" alt="Descrição">`. Use webp 800x800px e peso até 100KB pra carregar rápido no celular
- 4Edite o Schema.org `Store` no `<head>` — troque `name`, `description`, `priceRange` ('$' barato, '$$' mid, '$$$' premium) e `aggregateRating` (nota e número de reviews reais quando tiver). Google exibe estrelas na busca
- 5Personalize a paleta no bloco `:root` — `--color-primary` (verde), `--color-accent` (amarelo), `--color-surface` (verde-claro). Pra brechó vintage, troque pra terracota `#a16207` + creme `#fef3c7`. Pra papelaria infantil, lilás `#a78bfa` + amarelo `#fbbf24`. Pra doces e confeitaria, rosa `#f472b6` + dourado `#eab308`. Mantenha contraste WCAG
Perguntas frequentes
Funciona pra qualquer ramo (moda, doces, brechó, decoração)?▾
Sim. A estrutura (header + hero + categorias + grid de produtos + benefícios + footer) é universal pra qualquer pequeno comércio com 5-100 produtos. Os 4 produtos de exemplo são cosméticos, mas o card é genérico — funciona pra peça de roupa, doce artesanal, item de papelaria, planta, livro usado, peça de decoração. As 5 categorias são editáveis pro seu nicho.
Como recebo pedido se o template não tem checkout?▾
Por design, é uma vitrine — o checkout é via WhatsApp. Cliente clica no botão 'Comprar' do produto, abre WhatsApp com mensagem pré-preenchida ('Quero comprar [Sérum vitamina C] por [R$ 89,90]'), você recebe o pedido organizado, combina pagamento (PIX, cartão por link, boleto) e envia. Funciona pra negócio com até ~30 pedidos/mês. Quando crescer e precisar de checkout integrado, migra pra plataforma de e-commerce levando o domínio.
Posso receber pagamento direto na vitrine (cartão, PIX)?▾
Não nativamente, mas dá pra encaixar. Pra PIX, gere QR Code com chave aleatória ou e-mail e cole como `<img>` no card de cada produto (ou numa seção 'Como pagar'). Pra cartão, gere link de pagamento (Mercado Pago, PagSeguro, Stripe link) e aponte o botão 'Comprar' pro link único de cada produto. Pra catálogo grande com checkout completo, vale plataforma de e-commerce — mas pra ~30 produtos, link de pagamento + WhatsApp resolve.
Como adiciono mais de 4 produtos?▾
Duplique a estrutura `<article class="product">` quantas vezes precisar. Cada produto é independente — copia, cola, troca foto/título/descrição/preço. Pra grid ficar bonito, mantenha múltiplos de 3 ou 4 (3, 6, 9, 12, 15...) ou deixe o grid auto-organizar com `grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))`. Pra mais de 30-50 produtos, considere paginar (página 2.html, 3.html) ou agrupar em seções por categoria.
Posso usar domínio próprio (`minhamarca.com.br`) em vez de subdomínio Htmly?▾
Sim, no plano Pro — recomendável pra marca séria. Você registra o domínio onde preferir (Registro.br, GoDaddy etc.) e aponta pro Htmly via CNAME — fazemos a configuração SSL automática via Cloudflare for SaaS. Cliente lembra `minhamarca.com.br` muito mais que `minhamarca.htmly.com.br`. Subdomínio grátis também funciona pra sempre — bom pra validar o negócio antes de investir em domínio próprio.