> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 📅 Como inserir o calendário de reservas de nomeação em sua loja > ℹ️ **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: * **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**