Personalização

Personalizando cores e logo da sua loja

Brand primary, accent, secondary, tema claro/escuro e upload de logo.

Atualizado em 17 de maio de 20262 min de leitura

A página /personalizacao define como sua loja aparece tanto pra equipe quanto pros clientes no booking público. São três cores, um modo de tema e um logo.

Pré-requisitos

  • Permissão manage_branding (administrador ou gestor).

Passo a passo — cores

  1. Vá em /personalizacao.
  2. Brand primary: cor principal (botões, links). Formato hex #RRGGBB — o sistema valida.
  3. Brand accent: cor de destaque (KPIs, avisos positivos).
  4. Brand secondary: cor secundária (badges, áreas calmas).
  5. Tema: claro, escuro ou auto (segue preferência do dispositivo).
  6. Nome da loja: aparece no booking público e nos e-mails de convite.
  7. Salve.

[SCREENSHOT: Picker de cores com preview ao vivo]

Validação das cores

O PetShop Flow rejeita qualquer valor fora do padrão #RRGGBB com a mensagem "Cor hex inválida (#RRGGBB)". Atalhos tipo #fff não passam — use sempre 6 dígitos.

Passo a passo — logo

O logo tem uma ação separada (upload de arquivo), não vem junto com as cores:

  1. Na mesma página, em Logo, clique em Anexar.
  2. Escolha um arquivo PNG ou WebP. Recomendamos WebP pra performance.
  3. O PetShop Flow sobe pro Supabase Storage isolado da sua loja.
  4. Em seguida pode ser usado nas telas internas e no link público.

Pra remover, clique em Remover logo — o arquivo é apagado do storage.

Onde as cores aparecem

  • Painel interno (admin): topbar, botões, gráficos.
  • Booking público: cabeçalho, botões de confirmar e Pix.
  • Recibos / vouchers: cor de detalhe.

Boas práticas

  • Contraste: pelo menos 4.5:1 entre texto e fundo. Cores claras demais somem.
  • Use uma só cor primária. Mais que isso vira ruído.
  • Logo em PNG ou WebP com fundo transparente quando possível.

Permissões

  • Administrador
  • Gestor

Perguntas frequentes

Posso ter logo diferente pra cada filial?

Não nessa versão. Multi-unidade está em planos avançados — fala com suporte se precisar.

Mudei a cor e o cliente continua vendo a antiga.

Pode ser cache. O cliente final pode precisar dar um refresh forçado (Ctrl+F5).

Qual o tamanho ideal do logo?

Recomendamos 512×512 px, fundo transparente, formato WebP. Funciona em todas as telas.

Artigos relacionados