ℹ️ 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 dá-lhe duas maneiras de exibir o calendário de reserva em sua loja:

1. Botão Automático do Livro Agora — substitui o botão Adicionar ao Carrinho nas páginas de produtos ligadas aos seus serviços.
2. Bloco de calendário de nomeação manual — colocar um cartão de reserva ou calendário em linha em qualquer página usando ShopifyEditor de temas.

Este guia orienta você através de ambos os métodos para que os clientes possam começar a reservar diretamente da sua loja.

⚠️ Antes de começar

Antes de incorporar o calendário, certifique-se de ter:

• A Hoppy Appointments app instalado no seu Shopify guardar
• Pelo menos um serviço criado e ligado a Shopify produto
• Uma ideia clara se deseja um calendário popup ou um calendário inline na página

Se você ainda não criou um serviço, comece com Como configurar serviços de reserva de nomeação Primeiro.

🛠️ Passo 1 — Habilitar a inscrição de reservas de nomeação

O aplicativo embed é o interruptor principal que faz o widget de reserva funcionar. Deve ser ativado tanto para incorporação automática quanto manual.

Opção A: Activar de dentro da aplicação

1. Abrir o Hoppy Appointments app
2. Na painel, Encontrar o Status da aplicação cartão
3. Clique Activar

Isto abre o teu Shopify editor de temas diretamente para a seção app embed.

Opção B: Activar manualmente de Shopify Administrador

1. Ir para Shopify Admin → Loja online → Temas
2. Clique Personalizar no seu tema ao vivo
3. Clique na Aplicações incorporadas ícone no topo
4. Procurar Reservas de nomeação
5. Alternar ON
6. Clique Gravar

Uma vez habilitado, o Status da aplicação cartão dentro Hoppy Appointments mostra Activo.

🛠️ Passo 2 — Certifique - se de que seu serviço está ativo e salvo

O widget de reserva só aparece para serviços que são salvos e ativados.

1. Na aplicação, vá para Os meus serviços
2. Verifique o crachá ao lado do seu serviço:
3. • Activo ✅ — o serviço está activo
   • Inativo — abrir o Mais menu e clique Ligar
   • Arquivado — abrir o Mais menu e clique Unarchive, depois liga-o
3. Abra o serviço e clique Gravar

Salvar sincroniza novamente seu serviço com a frente da loja. Isso é importante depois de mudar as variantes do produto, preços ou disponibilidade.

🛠️ Passo 3 — Verifique o botão do livro agora em sua página de produto

Uma vez que o aplicativo embed está ativo e o serviço é salvo, a página do produto conectado ao seu serviço irá mostrar automaticamente um Livro Agora botão em vez de Adicionar ao Carrinho.

1. Abra sua loja ao vivo
2. Aceda ao produto ligado ao seu serviço
3. Confirmar Livro Agora aparece o botão
4. Clique nele para abrir o popup de reserva

Se o seu produto tiver várias variantes, mude entre elas. O botão Livro Agora aparece apenas para variantes que fazem parte do serviço.

💡 O seletor de quantidade está desativado para produtos bookable porque cada reserva é para um slot de cada vez.

🛠️ Passo 4 — Adicionar Manualmente o Bloco de Calendário de Nomeação (Opcional)

Utilizar este método se:

• Seu tema usa um construtor de página ou formulário de produto personalizado
• Você quer o calendário em uma página que não é uma página de produto
• Você quer um cartão de reserva com estilo com detalhes de serviço
• Você quer o calendário completo incorporado diretamente na página

Adicionar o bloco

1. Ir para Shopify Admin → Loja online → Temas
2. Clique Personalizar no seu tema ao vivo
3. Navegue para a página onde deseja o calendário
4. Clique Adicionar bloco ou Adicionar seção
5. Procurar Apps → Calendário de nomeação
6. Colar o seu ID do serviço
7. Escolher um Modo de incorporação

Encontre seu ID de serviço

• Abra a página de edição do serviço — o ID do serviço é mostrado perto do topo
• Ou ir para Meus serviços → Mais → Copiar ID de serviço

Escolha um modo de incorporação

• Modal — apresenta um cartão de reserva com a imagem, título, descrição, preço e Livro Agora botão que abre o calendário numa janela
• Directo — incorpora o calendário de reserva completo diretamente na página para que os clientes possam escolher datas e horários sem abrir um popup

Configurar o estilo básico

O bloco permite personalizar:

• Cor de fundo
• Cor do título e tamanho da fonte
• Cor do preço e tamanho da fonte
• Cor do rótulo da opção e tamanho da fonte
• Cor do botão Book Now, fundo e tamanho da fonte
• Ver detalhes cor, fundo, tamanho da fonte e visibilidade do link

Para opções de estilo mais profundas, consulte Reservas de Nomeação — Opções de Design e Estilhamento.

Gravar o tema

Clique Gravar no editor do tema, em seguida, veja a página ao vivo.

⚠️ O bloco Calendário de Nomeações ainda requer o Nomeação Reservas app embed a ser habilitado. Se não for, o bloco mostra uma mensagem "App Inbed Not Enabled".

👀 O Que os Clientes Vêem

Botão Automático do Livro Agora

1. Cliente visita a página do produto
2. Eles vêem uma Livro Agora botão em vez de Adicionar ao Carrinho
3. Eles clicam nele e abre um calendário popup
4. Eles selecionam uma data, hora e preencher o formulário de reserva
5. Se o pagamento estiver ativado, o produto é adicionado ao carrinho e eles check out
6. Se o pagamento não estiver habilitado, a reserva é confirmada imediatamente

Bloco Manual Modal

1. Cliente visita a página onde você colocou o bloco
2. Eles veem um cartão com detalhes de serviço, preço e opções variantes ou duração
3. Eles clicam Livro Agora para abrir o calendário de contexto
4. Eles completam o fluxo de reserva

Manual Bloco direto

1. Cliente visita a página onde você colocou o bloco
2. O calendário completo carrega em linha à medida que se deslocam para a vista
3. Eles selecionam uma data e hora diretamente na página
4. Eles completam o formulário de reserva e checkout

⚠️ Notas Importantes

• A incorporação do aplicativo é necessária para ambos os métodos. Mesmo que você use o bloco manual, a incorporação do aplicativo Reservas de Nomeações deve ser ativada.
• Usa o teu tema ao vivo e publicado. O calendário não aparecerá em rascunhos ou temas inéditos.
• Um serviço ativo por variante de produto. Se uma variante estiver conectada a mais de um serviço ativo, o comportamento pode ser imprevisível.
• Salve depois de cada mudança. As variantes do produto, preços, disponibilidade e configurações de serviço só chegam à frente da loja depois de clicar em Salvar.
• O botão Livro Agora oculta o original Adicionar ao Carrinho e botões de saída dinâmicos apenas para variantes de reserva. Outros produtos permanecem inalterados.
• Selectores de quantidade estão desativados para produtos bookable porque as reservas são compras single-slot.

🐞 Resolução de Problemas

O botão Livro Agora não aparece

• Confirmar Status da aplicação mostra Activo
• Certifique-se de que o serviço está salvo e ativo
• Verifique se você está vendo a página do produto e a variante corretas
• Certifique-se de que está a testar o tema ao vivo, não um rascunho
• Atualizar a página ou teste em uma janela Incógnito

O bloco manual mostra "App Inbed Not Enabled"

Volte ao Passo 1 e habilite o aplicativo Reservas de Nomeação para incorporar.

O bloco manual mostra "Configuração do serviço de apontamento não encontrada"

Verificar novamente o ID do serviço Tu colaste. Você pode copiar novamente de Meus serviços → Mais → Copiar ID de serviço.

O calendário abre, mas não existem datas disponíveis

Verifique o seu serviço Disponibilidade tab. Certifique-se de que os dias de trabalho estão habilitados, olhar para frente e aviso mínimo de agendamento são razoáveis, e as datas bloqueadas não estão cobrindo tudo.

Para uma completa solução de problemas, ver Calendário de reserva de nomeação não está mostrando na minha loja [fixed].

🎉 Resultado Final

Uma vez configurado:

✅ O aplicativo de Reservas de Nomeações está habilitado no seu tema
✅ Seu serviço é salvo, ativo e conectado ao produto certo
✅ A Livro Agora botão aparece automaticamente na página do produto
✅ Opcionalmente, um bloco Calendário de Nomeação é colocado em qualquer página que você escolher
✅ Os clientes podem reservar diretamente da sua loja

📚 Artigos relacionados

• Como configurar serviços de reserva de nomeação
• Calendário de reserva de nomeação não está mostrando na minha loja [fixed]
• Reservas de Nomeação — Opções de Design e Estilhamento
• Como definir CSS personalizado para o aplicativo reservas de nomeação
• Como configurar o botão de ação flutuante como Calendly para reservas de nomeação
• Reservas de nomeação — Todas as opções de pagamento explicadas
• Reservas de nomeação — Tipos de reservas explicados

Actualizado em: 10/09/2026