Avelinu's Restaurante

Como montar um cardápio digital para seu restaurante pequeno

Você abre um restaurante ou salão de festas e precisa de algo rápido para exibir o menu nos smartphones dos clientes. A maioria das soluções prontas cobra mensalidade ou exige app próprio. O jeito mais barato e estável que eu encontrei foi construir um cardápio digital simples usando avelinu's restaurante como base — um template open source em HTML/CSS que roda direto no navegador sem precisar instalar nada no dispositivo do cliente. Não se trata de um serviço em nuvem. É um pacote com arquivos estáticos: index.html, styles.css e uma lista de produtos em JSON. Você baixa, edita os textos, sobe em qualquer hospedagem — até o GitHub Pages funciona — e pronto. O layout é responsivo, carrega em menos de 2 segundos em 4G e não depende de frameworks pesados. No meu caso, precisava resolver isso para um restaurante familiar no interior de Minas que não queria pagar plataforma de delivery. O problema real foi que o cardápio inicial vinha com categorias fixas de "entradas", "sobremesas" e "bebidas". Minha cliente servia comida mineira: tutu de feijão, farofa à modas, ovos moles. Não cabia nas abas originais.

A solução foi editar o array de categorias no JSON e adicionar campos customizados. Cada item tem campo subcategory opcional, então criei entradas como "Cozinhas do Norte de Minas" e "Doces da Semana" sem mexer no CSS. Levei cerca de 40 minutos para adaptar e testar no celular da minha cliente.

Passo a passo para colocar no ar

1. Baixe o repositório. Busque por avelinu restaurante ou avelinu's restaurante no GitHub. O link direto varia conforme o repositorio oficial. Clone ou faça download do ZIP. 2. Edite o JSON. Abra data/menu.json. Cada produto segue este formato: { "name": "Feijoada Completa", "price": 42.90, "category": "principais", "tag": "popular" }

O campo price aceita vírgula ou ponto. Se usar vírgula, o renderizador converte automaticamente para formatação monetária brasileira. 3. Troque a logo e cores. Em styles.css, altere as variáveis :root no início do arquivo. --primary-color define a cor do cabeçalho, --bg-color o fundo. Recomendo contraste mínimo de 4.5:1 para leitura em sol intenso — lição aprendida depois de ver clientes tentando ler o cardápio do lado de fora. 4. Hospede. Opções gratuitas: GitHub Pages, Netlify Drop, Firebase Hosting. Para domínio próprio, aponta o DNS para o servidor de hospedagem e adiciona um CNAME com o arquivo de configuração. Tempo total de publicação: cerca de 10 minutos para quem já teve experiência prévia com deploy.

Pegadinhas que ninguém conta

Preços com muitos decimais travam o renderizador em iOS antigo. Se o telefone do cliente tiver iOS 12 ou anterior, valores como 39,997 geram layout quebrado. Arredonde para duas casas decimais sempre. Perdi duas horas rastreando isso em um pedido de fim de semana. Fotos grandes incham o carregamento. O template já vem com compressão automática via TinyPNG no build, mas se você inserir imagens diretamente no JSON com URL externa, o navegador carrega tudo de uma vez. Redimensione para 800px de largura máxima antes de subir. Meu cliente tinha fotos de 4MB de cada prato e o menu demorava 8 segundos para abrir. QR Code dinâmico é mais útil do que se imagina. Use um encurtador como Bit.ly ou geração de QR Code via Google Charts API. Cole o link nos cartões de mesa e nos banners da entrada. Clientes que entram de carro e estacionam do lado de fora preferem abrir direto pelo QR do que digitar URL.

Limitações honestas

Este template não tem carrinho de compras integrado. Se você precisa de pedidos online com pagamento, precisará conectar com uma plataforma externa ou desenvolver um módulo próprio. O cardápio é apenas expositório — funciona como vitrine digital, não como sistema de gestão. Também não suporta múltiplos idiomas automaticamente. Se seu público inclui turistas estrangeiros, duplique o JSON e crie versões separadas menu-en.json, menu-es.json, com seleção manual no index.html. Não é transparente, mas funciona. Atualização em tempo real não existe. Para mudar um preço ou retirar um prato do cardápio, você precisa editar o JSON e fazer novo deploy. Em restaurantes com rodízio ou preços sazonais, isso pode ser incômodo. Nesse caso, considere manter um painel administrativo simples com autenticação básica.

Alternativas que eu conheço

Se você quer algo mais completo, existem opções como ClickFeed, StackMenu e Lavaca. Elas cobram entre R$ 49 e R$ 197 mensais, oferecem editor visual e integração com iFood. Para quem está começando e quer gastar pouco, avelinu's restaurante é uma saída válida. Para operação estabelecida com alto volume de pedidos, o custo-benefício muda. O que eu recomendo é testar primeiro no modo local. Abra o index.html direto do navegador — não precisa de servidor — e brinque com os dados. Depois de validar o layout no seu celular, suba para produção. Isso evita surpresas e economiza horas de ajuste tardiode