ℹ️ 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.

Quer o widget de reserva para combinar com a marca da sua loja exatamente? Hoppy Appointments permite que você adicione seu próprio CSS em cima das configurações de design incorporadas, para que você possa ajustar fontes, cores, espaçamento, botões e muito mais.

Este guia orienta você através da adição e aplicação de CSS personalizado para o widget de reserva.

⚠️ Antes de começar

Antes de usar CSS personalizado, certifique-se de ter:

• A Hoppy Appointments app instalado no seu Shopify guardar
• Pelo menos um serviço ativo
• Familiaridade básica com seletores e declarações CSS

💡 Para a maioria das mudanças de design — cores, fontes, logotipos e estilos de botões — use o built-in Desenho configurações primeiro. CSS personalizado é melhor quando você precisa de alterações as opções incorporadas não cobrem.

Para uma visão completa das opções de design incorporadas, consulte Reservas de Nomeação — Opções de Design e Estilhamento.

🛠️ Passo 1 — Abra o Editor CSS Personalizado

CSS personalizado pode ser gerenciado em dois lugares.

CSS global (aplica-se a todos os serviços por padrão)

1. Abrir o Hoppy Appointments app
2. Clique Configuração no menu da aplicação
3. Clique Desenho
4. Rolar para baixo para o CSS Personalizado carta na parte inferior da página

CSS por serviço (sobrepõe CSS global para um serviço)

1. Abrir o Hoppy Appointments app
2. Ir para Serviços
3. Clique no serviço que você deseja estilo
4. Clique na Desenho aba
5. Certifiquem-se disso. Não seguir as Configurações Predefinidas do Tema deve ser verificado
6. Rolar para baixo para o CSS Personalizado cartão

🛠️ Passo 2 — Escolha CSS global ou nível de serviço

Ao editar CSS em um serviço Desenho tab, você verá uma opção:

Não seguir as Configurações Predefinidas do Tema

• Desligado → o serviço utiliza o CSS global de Configurações → Design
• Ligado → o serviço usa seu próprio CSS a partir do nível de serviço Desenho aba

Isso permite que você mantenha um estilo consistente em todos os serviços, ou dê a serviços específicos um olhar único.

🛠️ Passo 3 — Escreva seu CSS

O editor CSS começa com um modelo padrão que inclui os seletores de widget mais comuns. Você pode substituir ou estender o modelo com suas próprias regras.

Classes de embalagem principais

Seletor

O que ele visa

.futureblink-appointment

Todo o widget de reserva

.futureblink-appointment .dialog

A janela principal de reserva (desktop)

.futureblink-appointment.mobile .dialog

A janela principal de reserva (móvel)

.futureblink-appointment .userInfoSection

O painel de detalhes do serviço

Selectores comuns que você pode usar

Seletor

O que ele visa

.futureblink-appointment .confirm-btn

Confirmar o botão / Livro

.futureblink-appointment .continue-btn

Botão Continuar

.futureblink-appointment .back-btn

Botão traseiro

.futureblink-appointment .time-slot.selected

Espaço de tempo selecionado

.futureblink-appointment .highlighted_date.react-calendar__tile--active

Data de calendário selecionada

.futureblink-appointment .schedule-form

Formulário de reserva do cliente

.futureblink-appointment .meeting-booked

Página de sucesso / confirmação

Exemplo

.futureblink-pointment .confirmar-btn {
fundo- cor: # 2563eb;
cor: #ffffff;
Raio-fronteira: 8px;
}

.futureblink-pointment.mobile.confirm-btn {
fundo- cor: #1d4ed8;
}

ℹ️ Tu sabes. não precisa adicionar !important às suas declarações. Hoppy Appointments adiciona automaticamente !important quando o CSS é injetado no widget, o que ajuda suas regras a substituir os estilos padrão.

🛠️ Passo 4 — Aplique o CSS

Depois de inserir seu CSS, clique no Aplicar botão abaixo do editor.

• Aplicar → habilita o CSS personalizado e injeta-o no widget de reserva
• Reiniciar → desabilita o CSS personalizado e reverte o editor para o modelo padrão

⚠️ CSS personalizado só faz efeito depois de clicar Aplicar. Colar CSS no campo sozinho não muda a aparência do widget.

💾 Passo 5 — Salvar e Antevisão

1. Clique Gravar na barra superior
2. Aguarde a mensagem de confirmação
3. Visualize o widget de reserva na frente da sua loja ou no painel de visualização do administrador

Se você editou CSS por serviço, certifique-se Não seguir as Configurações Predefinidas do Tema alternância está ligada, caso contrário o CSS global ainda será usado.

💡 Dicas e melhores práticas

• Iniciar pequeno — alterar um elemento de cada vez para que possa ver o que cada regra afecta
• Usar seletores específicos — objectivo .futureblink-appointment .your-class em vez de selectores largos que podem afetar outras partes da sua loja
• Ensaio em dispositivos móveis — utilizar o .futureblink-appointment.mobile prefixo para ajustar o layout móvel separadamente
• Manter uma cópia de segurança — copiar o CSS de trabalho num ficheiro de notas antes de carregar Reiniciar
• Usar as configurações de design incorporadas primeiro — cores, fontes e logotipos são mais fáceis de gerenciar lá e não requerem conhecimento CSS

🐞 Resolução de Problemas

Meu CSS não está mostrando na frente da loja

1. Certifique-se de clicar Aplicar no editor CSS personalizado
2. Certifique-se de clicar Gravar no topo da página
3. Para CSS por serviço, certifique-se Não seguir as Configurações Predefinidas do Tema está ligado
4. Verifique se os seus selectores correspondem aos nomes reais das classes de elementos
5. Limpar o cache do seu navegador ou testar em uma janela desconhecida

O elemento foi revertido para a aparência padrão

Clicando Reiniciar desativa o CSS e restaura o modelo padrão. Se você quiser suas regras personalizadas de volta, cole-as novamente e clique Aplicar.

Algumas regras não funcionam

O auto !important injeção funciona melhor com simples property: value; declarações. CSS muito complexo — tais como @media consultas, @keyframes, ou selectores aninhados – não podem ser transformados de forma confiável. Mantenha suas regras diretas para os resultados mais consistentes.

📚 Artigos relacionados

• Reservas de Nomeação — Opções de Design e Estilhamento
• Como configurar locais de reunião para reservas de nomeação
• Como configurar serviços de reserva de nomeação

Actualizado em: 10/09/2026