ℹ️ Note: Este artigo foi traduzido automaticamente utilizando IA e pode conter imprecisões. Se algo parecer errado, entre em contato com nossa equipe de suporte.

Hoppy Appointments vem com um sistema de design completo para que o widget de agendamento, as páginas de sucesso, a página de reagendamento e a página de cancelamento fiquem bem integrados à sua loja.

Você pode controlar cores, fontes, botões, planos de fundo e até fazer upload de imagens personalizadas. Tudo é gerenciado em dois locais:

• Settings → Design (Configurações → Design) → Padrões da loja que se aplicam a todos os serviços
• Service → Design tab (Serviço → Aba Design) → Substituições por serviço quando você quer que um serviço tenha uma aparência diferente

Este guia explica cada configuração de design, quando ela aparece e como afeta a loja.

⚠️ Antes de Começar

As configurações de design são gerenciadas em:

• Hoppy Appointments → Settings → Default Design (Hoppy Appointments → Configurações → Design Padrão) para os padrões globais
• Hoppy Appointments → Services → [your service] → Design (Hoppy Appointments → Serviços → [seu serviço] → Design) para substituições por serviço

Antes de estilizar o widget, certifique-se de que:

• O aplicativo Hoppy Appointments está instalado
• Você tem pelo menos um serviço criado
• O app embed Appointment Bookings está ativado no seu tema Shopify

ℹ️ Sem o app embed ativado, os clientes não verão o widget de agendamento — não importa quão bonitas sejam suas configurações de design.

Consulte o guia de solução de problemas Calendário Não Aparece se precisar de ajuda para ativar o embed.

🌐 Design Global vs. Design por Serviço

Design Global (Settings → Design)

Este é o padrão de toda a loja. Todo novo serviço usa automaticamente essas cores, fontes e estilos, a menos que você indique o contrário.

Use isso quando quiser uma aparência consistente em todos os seus serviços reserváveis.

Design por Serviço (Service → Design tab)

Cada serviço tem uma caixa de seleção chamada:

Do not Follow Default Theme Settings (Não seguir as configurações padrão do tema)

• Unchecked (Desmarcada) → O serviço usa o design global. Todos os campos de cor/fonte ficam ocultos para manter a simplicidade.
• Checked (Marcada) → O editor de design completo aparece e este serviço usa seu próprio estilo em vez dos padrões globais.

💡 Use o design por serviço quando um serviço precisar ter uma aparência diferente — por exemplo, uma consulta premium com um tema escuro ou uma aula com tema de feriado.

O Que É Controlado Onde

A maioria das configurações de design existe tanto no global quanto no por serviço, mas algumas são apenas por serviço:

🎨 As Abas de Design

O editor de design é organizado em abas. Cada aba controla uma tela diferente que os clientes veem.

📅 Página de Reserva

Esta aba controla o widget principal de reserva — o calendário, horários disponíveis, formulário e botões de navegação.

Font

Escolha a família de fontes usada em todo o widget. O aplicativo suporta dezenas de Google Fonts além das fontes de sistema comuns.

• System fonts (Fontes de sistema, como Arial ou Helvetica) carregam instantaneamente do dispositivo do cliente
• As Google Fonts são carregadas automaticamente quando selecionadas

Se uma fonte não puder ser carregada, o widget usa uma opção padrão segura.

Cores de Fundo

• Outer background color (Cor de fundo externa) → A área atrás do widget de reserva
• Info section background color (Cor de fundo da seção de informações) → O painel esquerdo que mostra a imagem, o título e o preço do serviço
• Card background color (Cor de fundo do card) → O card principal que contém o calendário e o formulário

Essas três camadas permitem criar profundidade e separação dentro do widget.

Texto e Ícones

• Text color (Cor do texto) → A cor padrão para a maior parte do texto no widget
• Icons color (Cor dos ícones) → A cor usada para ícones pequenos como setas e marcas de seleção

Data e Horário Selecionados

• Selected background color (Cor de fundo selecionada) → A cor atrás de uma data ou horário escolhido
• Selected text color (Cor do texto selecionado) → A cor do texto na data ou horário selecionado

Isso ajuda os clientes a ver claramente o que escolheram.

Botões

• Confirm button (Botão de confirmação) → Cor de fundo e cor do texto para a ação principal
• Back button (Botão voltar) → Cor de fundo e cor do texto para voltar uma etapa
• Continue button (Botão continuar) → Cor de fundo e cor do texto para fluxos de várias etapas

Cada botão pode ser estilizado independentemente para que você possa corresponder à hierarquia de botões da sua loja.

🎉 Página de Sucesso

Esta aba controla a tela que os clientes veem após uma reserva gratuita ou confirmada.

• Heading size / color (Tamanho/cor do título)
• Description size / color (Tamanho/cor da descrição)
• Details size / color (Tamanho/cor dos detalhes) → Para o texto de resumo da reserva
• Button text size / background color / text color (Tamanho do texto do botão / cor de fundo / cor do texto) → O botão CTA na tela de sucesso
• Icons color (Cor dos ícones)
• Custom image (Imagem personalizada) → Substitua a ilustração de sucesso padrão pela sua própria imagem

💡 Fazer upload de uma imagem de sucesso personalizada é uma ótima forma de reforçar sua marca ou celebrar a reserva com um gráfico amigável.

🔄 Página de Reagendamento

Esta aba tem duas seções internas:

• Reschedule Form (Formulário de reagendamento) → A tela onde os clientes escolhem um novo horário
• Success Page (Página de sucesso) → A tela de confirmação após a conclusão do reagendamento

Cada seção tem os mesmos tipos de controles da aba principal Success Page:

• Tamanho/cor do título
• Tamanho/cor do texto da mensagem
• Tamanho/cor dos detalhes
• Tamanho e cores dos botões
• Cor dos ícones
• Imagem personalizada

❌ Página de Cancelamento

Esta aba também tem duas seções internas:

• Cancel Form (Formulário de cancelamento) → A tela onde os clientes confirmam que querem cancelar
• Success Page (Página de sucesso) → A tela de confirmação após a conclusão de um cancelamento

Inclui os mesmos controles de estilo da aba Rescheduling Page.

🖼️ Custom Logo

ℹ️ Esta configuração está disponível apenas na per-service Design tab (aba Design por serviço).

Ative Custom logo (Logotipo personalizado) para substituir a imagem do produto no widget de reserva pelo seu próprio logotipo ou imagem carregada.

• Recomendado para consistência de marca
• Os uploads de imagem são limitados a 1 MB
• Os formatos aceitos incluem GIF, JPEG, PNG e WebP

🧑‍💻 Custom CSS

Para comerciantes que querem controle perfeito até o último pixel, as páginas de design global e por serviço incluem um editor de Custom CSS (CSS personalizado).

• Cole seu próprio CSS no editor
• Clique em Apply (Aplicar) para ativá-lo na loja
• Clique em Reset (Redefinir) para restaurar o modelo de CSS padrão e desativar suas alterações

O editor vem com um modelo padrão mostrando seletores comuns que você pode direcionar, como:

• O contêiner externo do widget
• O card de diálogo
• A seção de informações
• Datas e horários selecionados no calendário
• Botões de confirmar, voltar e continuar
• Variantes específicas para mobile

⚠️ Importante:

• O Custom CSS só é aplicado quando você clica em Apply
• Se um serviço segue o tema padrão, ele usa o Custom CSS global
• Se um serviço usa seu próprio design, ele usa seu próprio Custom CSS per-service (por serviço)
• O aplicativo adiciona automaticamente !important às declarações de CSS para ajudá-las a substituir os estilos do tema

💡 O Custom CSS é ótimo para ajustes avançados, mas a maioria dos comerciantes pode obter exatamente a aparência desejada usando apenas os seletores de cor e fonte.

🔘 Floating Action Button

ℹ️ O Floating Action Button é configurado na aba General (Geral) de um serviço, não na aba Design. Ele está incluído aqui porque tem suas próprias opções de estilo.

Ative o Floating Action Button para exibir um botão fixo Book Now (Reservar Agora) que acompanha os clientes enquanto eles rolam pela sua loja.

Quando ativado, você pode personalizar:

• Button text (Texto do botão) → O padrão é "Book Now" (Reservar Agora)
• Position (Posição) → Inferior direito, inferior esquerdo ou inferior centralizado
• Background color (Cor de fundo)
• Text color (Cor do texto)

Isso é útil quando você quer que os clientes consigam reservar de qualquer página, não apenas da página de produto.

Consulte a documentação Service Setup para obter detalhes completos sobre como ativar e posicionar o botão flutuante.

🧩 Estilização do Bloco do App no Editor de Tema

Se você adicionar o bloco Appointment Calendar (Calendário de Agendamento) pelo editor de tema Shopify, terá opções de estilo adicionais que são independentes do admin do aplicativo.

Essas configurações controlam o card ou botão que abre o modal de reserva:

• Title color / font size (Cor do título / tamanho da fonte)
• Price color / font size (Cor do preço / tamanho da fonte)
• Option color / font size (Cor da opção / tamanho da fonte)
• View details button (Botão ver detalhes) → Mostrar/ocultar, texto, cores, tamanho da fonte
• Book Now button (Botão Book Now) → Cor de fundo, cor do texto, tamanho da fonte
• Block background color (Cor de fundo do bloco)

⚠️ Importante:

Essas configurações estilizam apenas o bloco na página. O modal que abre ainda usa as configurações de design de Settings → Design ou da Design tab do serviço.

Algumas configurações do bloco só aparecem quando o bloco está no modo Modal.

🖥️ Como a Estilização Aparece na Loja

O widget de reserva carrega dentro de um iframe na sua loja. O iframe puxa as configurações de design que você configurou e as aplica a:

• O fundo externo do widget
• Os fundos do painel de informações e do card
• Todo o texto e ícones
• Datas e horários selecionados no calendário
• Os botões Confirm, Back e Continue
• As páginas Success, Rescheduling e Cancel
• A posição do Custom logo
• As substituições de Custom CSS

As fontes são carregadas dinamicamente. As Google Fonts são buscadas nos servidores do Google, enquanto as fontes de sistema são carregadas do dispositivo do cliente.

Se uma fonte falhar ao carregar ou uma cor estiver ausente, o widget recorre a padrões seguros para que a experiência de reserva continue utilizável.

⚠️ Observações Importantes e Limitações

• O design global é o padrão. Novos serviços seguem automaticamente o tema global, a menos que você marque Do not Follow Default Theme Settings.
• O Custom CSS deve ser aplicado. Escrever CSS no editor não faz nada até você clicar em Apply.
• O CSS por serviço só se aplica quando o serviço usa seu próprio design. Se um serviço segue o tema global, ele ignora seu próprio campo de CSS personalizado.
• O Custom logo é apenas por serviço. Não há configuração global de logotipo personalizado.
• Os uploads de imagem são limitados a 1 MB. Imagens maiores precisarão ser compactadas antes do upload.
• As configurações do bloco no editor de tema são separadas. Estilizar o bloco Appointment Calendar no Shopify não altera o interior do modal.
• O fundo do contêiner do modal é controlado pelo tema. A área atrás do modal pop-up é estilizada pelo CSS da extensão do tema, não pelas configurações de design do admin do aplicativo.
• O app embed deve estar ativado. As configurações de design só aparecem na loja se o app embed Appointment Bookings estiver ativado no seu tema.

💡 Casos de Uso Comuns

Combine o widget com a identidade visual da sua loja

• Vá para Settings → Design
• Defina a Outer background color, a Card background color e a Text color para combinar com sua loja
• Escolha uma fonte que combine com o seu tema
• Estilize o Confirm button para combinar com seu CTA principal

Resultado: Cada serviço parece uma parte natural da sua loja.

Um serviço com uma aparência diferente

• Abra o serviço → aba Design
• Marque Do not Follow Default Theme Settings
• Altere as cores e faça upload de um Custom logo

Resultado: Apenas aquele serviço usa a estilização personalizada. Todos os outros serviços mantêm o design global.

Imagem personalizada na página de sucesso

• Abra Settings → Design → Success Page
• Faça upload de uma imagem personalizada em Custom image

Resultado: Os clientes veem sua ilustração de marca após a reserva, em vez da padrão.

Ajuste avançado de layout

• Abra Settings → Design
• Expanda o editor de Custom CSS
• Adicione seu CSS e clique em Apply

Resultado: Você pode direcionar elementos específicos do widget que não são cobertos pelos seletores de cor.

🎉 Resultado Final

Depois que suas configurações de design estiverem configuradas:

✅ O widget de reserva combina com as cores e fontes da sua loja
✅ As páginas de sucesso, reagendamento e cancelamento ficam consistentes com sua marca
✅ As substituições por serviço permitem que serviços individuais se destaquem quando necessário
✅ Logotipos e imagens personalizados adicionam um toque pessoal
✅ O Custom CSS oferece controle total sobre a estilização avançada
✅ Os clientes têm uma experiência de reserva refinada e profissional 🎨

Com a configuração de design certa, agendar um compromisso parece uma parte integrada da sua loja Shopify ✨

Actualizado em: 10/09/2026