Se ainda estás na fase de setup inicial (slug, horários, equipa, primeiros serviços), vale a pena começar pelo guia complementar de configuração: Configurar a tua página pública. Este artigo assume que a página já existe, e foca-se no que faz a diferença depois disso: a parte visual e a forma como o cliente percorre os serviços.
A maior parte dos visitantes da tua página vê-a em menos de 30 segundos. Nesse tempo decidem três coisas: 'isto inspira confiança?', 'encontro o que procuro?' e 'consigo marcar sem chatices?'. Logo, capa, cor e ordem dos serviços respondem às duas primeiras. Vale o tempo de fazer bem.
Onde estás a editar tudo isto
Tudo o que aparece neste artigo vive em /dashboard/storefront. Encontras um editor com quatro separadores: Serviços, Produtos e adicionais, Personalização (logo, capa, cor, nome, telefone) e Morada. Em qualquer momento podes ver a página pública real abrindo bookhero.app/o-teu-slug noutra aba.
Logo: o detalhe que parece trivial e não é
O logo aparece em três sítios: na bola sobre a capa, nos emails de confirmação enviados ao cliente, e no QR code partilhável. Se não tens logo formal, podes deixar a inicial do negócio (o sistema gera automaticamente um círculo com a primeira letra do nome). É melhor do que carregar um logo de má qualidade.
Vai a Personalização > Logo
Clica na zona com a inicial (ou no logo actual) para abrir o seletor de ficheiro. Aceita PNG, JPG, WebP, GIF, até 4 MB.
Recorta no modal
Depois de escolheres o ficheiro, abre um modal de crop. Mexe e ajusta para que o logo fique centrado num quadrado. Isto evita logos cortados de forma estranha na bola circular.
Confirma e guarda
Carregas em 'Aplicar' no modal de crop. O ficheiro fica em pré-visualização. Só depois de carregares no botão verde 'Guardar' no fundo é que o logo vai para a página pública.
Capa: a foto que define o tom
A capa (banner) é a faixa horizontal grande no topo da página, atrás do logo. É a maior área de imagem e é o que aparece na pré-visualização quando partilhas o link no WhatsApp ou Instagram. Pode fazer ou estragar a primeira impressão.
| Capa | Porquê | |
|---|---|---|
| Foto genérica de banco de imagens | Sente-se template e baixa a confiança no negócio | |
| Foto do espaço real, bem iluminada | Mostra que existes mesmo, cria confiança em segundos | |
| Selfie com cliente em fundo confuso | Distrai do nome do negócio e dos botões de marcar | |
| Foto de trabalho concreto (corte, manicure, tatuagem) | Mostra o resultado e justifica o preço antes de marcar | |
| Imagem com texto sobreposto | Choca com o nome do negócio que já aparece por cima | |
| Foto horizontal, mínimo 1600x600 px | Renderiza nítida em mobile e desktop sem corte |
Cor de marca: hex, paleta, contraste
A cor de marca aplica-se aos botões principais ('Marcar', 'Confirmar'), aos títulos das secções e a pequenos detalhes como ícones activos. Tecnicamente, é injectada como variável CSS (--pub-accent) e propaga-se a toda a página pública e ao fluxo de marcação. Aceita qualquer hex de 6 dígitos (#RRGGBB), mas o editor mostra uma paleta com 26 cores escolhidas por funcionarem bem em botões.
| Sector | Boa cor | Cor a evitar |
|---|---|---|
| Barbearia clássica | Preto, ardósia, walnut | Rosa pastel |
| Estética e spa | Pastéis (menta, lavanda) | Vermelho vivo |
| Tatuagem | Preto, vermelho, magenta | Pastel pêssego |
| Fisioterapia / saúde | Teal, royal, esmeralda | Magenta, rosa choque |
| Manicure e nail art | Rosa, lilás, pastel rose | Castanho walnut |
| Cabeleireiro unisexo | Verde sage, ardósia | Amarelo gold puro |
Nome, descrição (tagline) e telefone
O nome aparece em letra grande logo abaixo do logo. É também o que vai para o título do separador do navegador, para os emails de confirmação e para o JSON-LD que o Google usa para indexar a página. Mantém curto (até 30 caracteres), sem emojis, e com a capitalização certa ('Maria Hair Studio', não 'maria hair studio' nem 'MARIA HAIR STUDIO').
A tagline é a linha imediatamente abaixo do nome. No BookHero, essa linha vem por defeito do endereço formatado (a morada que escolheste). Se preferires um tom mais comercial ('Corte, cor e cuidado capilar · Cascais' em vez de 'Rua das Flores 22, 2750-220 Cascais'), edita o campo de descrição.
| Nome | Porquê | |
|---|---|---|
| Salão de Beleza Maria Cascais Lda | Demasiado comprido, quebra em mobile e em SEO | |
| BARBEARIA DO JOÃO | Maiúsculas gritam, perde profissionalismo | |
| ✂️ Maria 💇 Hair ✨ | Emojis ficam ilegíveis em SEO e cartão de visita | |
| Maria Hair Studio | Três palavras, lê-se de relance e diz o sector | |
| Barbearia do João | Capitalização natural, partilhável verbalmente sem hesitar |
O telefone público é separado do teu próprio número de utilizador. Aparece como botão 'Ligar' na página, e em emails de confirmação. Se o teu negócio só recebe marcações online, podes deixar em branco e o botão desaparece automaticamente.
Ordem dos serviços (a parte que muda conversão)
A lista de serviços é o que o cliente percorre antes de clicar em 'Marcar'. A ordem dessa lista faz diferença real na conversão. Regra simples: o que queres vender mais, em cima. Em vez de ordenar por preço ou por ordem alfabética, ordena por intenção do cliente.
Lista os teus serviços por receita
Olha para os últimos 90 dias: que serviços geraram mais receita? Não confundas com volume - às vezes um serviço com volume alto e preço baixo merece estar em segundo lugar, e o premium em primeiro.
Coloca o 'serviço âncora' em primeiro
É o que define o teu negócio: corte para cabeleireiro, manicure para estética, massagem para fisio. É o que o cliente novo vem procurar.
Logo a seguir, o complementar mais comum
Corte + barba para barbearia. Manicure + pedicure para estética. Avaliação + primeira sessão para fisio. O par natural reduz fricção.
Esconde o que está temporariamente em pausa
Tens um serviço sazonal (extensões de cabelo, depilação a laser fechada para férias)? Usa o toggle 'oculto' em vez de o apagar. Volta a mostrar quando voltares a oferecer.
Esconde também o que nunca quiseste vender online
Serviços muito longos ou que precisam de avaliação prévia ('extensões com avaliação', 'tatuagem grande personalizada') ficam mais limpos como 'sob consulta' fora da página, e tratas pelo WhatsApp.
Guarda e abre a página em mobile para conferir
A vista em mobile é diferente do editor (mais estreita, scroll vertical). Algo que parecia bem alinhado em desktop pode ficar apertado. Vale o minuto.
Grupos de serviços: quando agrupar e quando não
Se tens mais de 7-8 serviços, agrupá-los em secções ajuda o cliente a encontrar mais depressa. Os grupos são secções com nome (Cabelo, Barba, Manicure, Pedicure) que aparecem como cabeçalhos antes da lista correspondente. Cada serviço pode pertencer a um único grupo, ou ficar fora de grupo (aparece então no fim, sem cabeçalho).
| Cenário | Recomendação |
|---|---|
| Tens 3 a 6 serviços, todos do mesmo tipo | Não agrupes. Mostra lista pura. |
| Tens 8+ serviços, todos do mesmo tipo | Não agrupes ainda. Reordena por intenção. |
| Tens 6+ serviços de áreas diferentes (cabelo + barba + manicure) | Agrupa. Reduz o scroll mental. |
| Tens muitos add-ons (champô, máscara, brushing extra) | Põe-nos em Produtos e adicionais, não em serviços. |
| Tens 2 grupos com 1 serviço cada | Mata os grupos. 2 cabeçalhos para 2 linhas não vale. |
Produtos e adicionais: o que cabe ali (e o que não cabe)
O separador Produtos e adicionais é para coisas que se vendem em cima da marcação, não para o serviço principal. Há dois tipos: 'addon' (adicional vinculado a um serviço, como uma máscara hidratante extra) e 'product' (produto vendido independente, como uma garrafa de champô). Não confundir com serviços ocultos.
- Addon: máscara, óleo, brushing extra, hot towel. Adicionado no checkout em cima do serviço base.
- Product: champô, gel modelador, creme de mãos, vela. Pode ser vendido sem marcação associada.
- Não metas serviços completos aqui. Para isso é o separador Serviços, com duração e funcionário associado.
Mobile primeiro: 60-70% dos visitantes
Entre 60 e 70 por cento dos visitantes da tua página vão entrar pelo telemóvel - directos do Instagram, do WhatsApp, da pesquisa Google. A página é totalmente responsive, mas há decisões tuas que tornam a experiência melhor ou pior em mobile.
Slug: cuidado antes de mexer
O slug é a parte da URL depois de bookhero.app/. É a única peça de personalização que recomendamos não mexer depois de partilhar com clientes. Todos os QR codes impressos, links em Instagram, cartões de visita e referências em Google Business deixam de funcionar se mudares.
Erros comuns e como resolver
Carreguei o logo mas a página pública continua com a inicial. Porquê?
Provavelmente carregaste o ficheiro e fechaste sem carregar em 'Guardar' no botão verde do fundo. O editor tem um sistema de save unificado: até carregares em Guardar, tudo fica em pré-visualização local. Volta a entrar, repete o upload e desce até carregar em Guardar.
A cor de marca que escolhi parece diferente na página pública.
Pode ser cache do navegador ou cache da rede. Faz refresh forçado (Cmd+Shift+R no Mac, Ctrl+F5 no Windows). Se mantiver, abre numa janela anónima. Se ainda assim parecer diferente, abre o seletor de cor e confirma o hex - às vezes uma cor pastel e uma cor viva parecem semelhantes mas têm contrastes muito diferentes consoante o ecrã.
Mudei a ordem dos serviços e na página pública continuam na ordem antiga.
O cache da página pública leva alguns segundos a actualizar (até 60 em alguns CDN). Faz refresh forçado uma ou duas vezes. Se passar 2 minutos e continuar igual, confirma que carregaste em Guardar. Se sim, abre uma janela anónima para descartar cache do navegador.
Posso esconder um serviço sem o apagar?
Sim. Cada serviço tem um toggle 'oculto'. Quando activo, o serviço deixa de aparecer na página pública, mas continua disponível para marcações manuais no calendário e mantém todo o histórico. Útil para serviços sazonais ou que estás a testar.
O Google mostra a imagem errada quando partilho o link no WhatsApp.
O WhatsApp e o Google usam a imagem da capa (banner) ou do logo, com cache próprio que pode demorar dias a refrescar. Se acabaste de actualizar e queres forçar, usa o validador de URL do Facebook/WhatsApp e introduz a URL para os servidores buscarem de novo. Para Google, o sitemap+JSON-LD do BookHero usa o logo, mas a primeira indexação leva tempo.