# A página da barbearia e a tela de agendamento

Fonte: https://docs.barbeiro.app/customer/storefront-page
Perfil: Cliente
Verificado em: 2026-09-04

> Antes de escolher um horário você passa por duas telas: a **página do estabelecimento**, com serviços, equipe e fotos, e a **tela de agendamento**, que abre por cima dela quando você toca em marcar.

## A página do estabelecimento

Logo que a página abre, o topo já responde o essencial, em duas faixas. Em cima vem a **arte do
estabelecimento** — a foto de capa ou a promoção da vez —, **sem nada escrito por cima dela**.
Logo abaixo, numa faixa própria, ficam o **logo**, o **nome**, a **nota** e o número de
avaliações, o **bairro**, e à direita os dois botões: **Agendar**, que leva direto para a lista
de serviços, e **Loja**, quando o estabelecimento vende produtos.

Se o estabelecimento ainda não subiu nenhuma foto, no lugar da capa fica só uma faixa fina de cor
— nada de retângulo vazio.

Na faixa seguinte vem o **contexto**: a unidade (quando há mais de uma), as **comodidades**
(Wi-Fi, estacionamento, ar-condicionado…) e, à direita, se o lugar está **aberto agora** — quando
está fechado, ele diz a que horas abre de novo. No celular essa faixa carrega também o **Ver
rota**.

Ao **rolar a página**, o cabeçalho assume o estabelecimento: logo, nome, nota e estado aparecem
lá em cima, junto de **Agendar** e **Loja** e das abas da lista — assim a ação continua a um
toque por toda a rolagem, sem precisar voltar ao topo.

Quando o estabelecimento subiu mais fotos, um botão **\{n\} fotos** no canto da capa abre a galeria
em tela cheia.

> **Os horários aparecem prontos para tocar**
>
> Cada serviço da lista mostra os **próximos horários livres** de verdade (por exemplo **Hoje ·
> 14:30 16:00 17:30**). Tocar em um deles abre o agendamento **já naquele dia e naquela hora** —
> você não precisa procurar de novo. Se aquele horário for ocupado por outra pessoa nesse
> intervalo, o agendamento avisa e mostra os que sobraram.

Quando o estabelecimento monta um **pacote** (por exemplo _Corte + Barba_), ele aparece **antes da
lista**, numa linha destacada com o desconto (**-14%**), o que vem dentro, o tempo total e o preço
já com abatimento. No celular a linha inteira é o botão; no computador há um **Agendar pacote** do
lado do preço.

Abaixo, a lista de serviços vem em linhas, com **preço e duração alinhados** para você comparar de
cima a baixo. Quando o estabelecimento subiu uma **foto do serviço**, ela aparece como miniatura no
começo da linha — só nos serviços que têm foto, então é normal que alguns venham sem. Tocar na foto
ou no nome abre a página do serviço. Ao lado das abas fica o campo de **busca** — pode digitar sem acento (`pigmentacao`
acha **Pigmentação**). As abas no topo da lista
levam para **Profissionais** e **Avaliações**; ao lado de cada uma vai o número do que há lá
dentro.

Se o estabelecimento tem **planos de assinatura**, eles fecham a lista de serviços, no fim da aba —
depois de você já ter visto os preços avulsos que o plano costuma abater. Você escolhe o plano
primeiro e só entra na conta na hora de confirmar.

No computador, a coluna da direita reúne tudo num **painel único**, separado por fios: a **nota e
o número de avaliações** (toque para ir às avaliações), a **equipe**, o **horário de
funcionamento** começando por hoje (**Ver semana toda** abre o resto), o **endereço com mapa**
(com **Ver rota** e **Copiar**) e, no pé, como **falar com o estabelecimento**. No celular, esses
mesmos dados estão no ícone de **informações**, no topo da tela.

O botão de **claro/escuro** agora fica no cabeçalho também no celular, ao lado da sua conta.

## Como a tela de agendamento funciona

Ao tocar em um serviço, abre uma janela com **duas telas**: **Agendar Horário** e **Confirmar
Agendamento**. Escolher e confirmar — é todo o agendamento na maioria das barbearias e salões.

Ofertas, produtos e seus dados **não são mais telas**: viraram partes da tela de confirmação, ao
lado do preço. Só continua ganhando uma tela própria aquilo que o estabelecimento **precisa** que
você responda: **Entrega** (endereço) e **Para Quem** (a ficha de quem vai ser atendido). Quem não
usa nenhuma das duas vê dois passos, sempre.

-   **Você sempre sabe onde está.** No topo aparece o nome da tela atual (**Agendar Horário**,
    **Confirmar Agendamento**…) e a contagem **Passo 2 de 2**. Esse total **não muda no meio do
    caminho** — o que ele mostra na primeira tela é o número real de telas até o fim.
-   **A barra de progresso é clicável.** Logo abaixo, no celular, há uma barrinha por tela. As já
    concluídas ficam preenchidas — **toque em qualquer uma delas para voltar** direto àquele ponto.
    Tocar em uma tela que você ainda não alcançou não faz nada.
-   **Voltar funciona igual em todo lugar.** A seta **←** no rodapé, a barra de progresso e a tecla
    **Esc** (no computador) fazem exatamente a mesma coisa: voltam uma tela, sem perder nada do que
    você já escolheu. Só no primeiro passo o voltar fecha a janela.
-   **O total aparece uma vez só.** No celular ele fica no rodapé, ao lado do botão. No computador
    fica **dentro do próprio botão** (**Confirmar R$ 45,00**), e o rodapé usa o espaço para lembrar
    que a confirmação chega no seu WhatsApp em segundos. Um número só, sem dúvida sobre qual é o
    valor certo.
-   **O rodapé diz pelo que você está pagando.** Junto do valor aparece uma linha com o serviço, o
    dia, a hora e o profissional — dá para conferir tudo sem rolar a tela.

> **Tocou em Agendar e a tela ficou cinza por um instante?**
>
> É a janela carregando: você vê um esqueleto da tela (blocos cinza no lugar do dia, do horário e
> dos botões) e, em seguida, o agendamento já pronto para usar. Não toque de novo — é só aguardar
> a fração de segundo.

## Leia também

- [Como marcar um horário](https://docs.barbeiro.app/customer/book-an-appointment)
- [Cheguei por um link — página do profissional, do serviço ou do meu horário](https://docs.barbeiro.app/customer/booking-links-and-pages)
- [Minhas reservas](https://docs.barbeiro.app/customer/my-bookings)