Como adicionar o Koalendar ao Shopify
Permita que os clientes marquem horários sem sair da sua loja no Shopify. São apenas dois passos rápidos:
- Copie o código de incorporação (ou link) do seu Koalendar
- Cole isso na área “Liquid/HTML personalizado” do Shopify e salve
📑 Menu
- Passo 1 – Copie o código de incorporação do Koalendar
- Passo 2 – Adicione-o no Shopify
- Resolução de problemas
- Que estilo devo usar?
📋 Passo 1 – Copie o código de incorporação do Koalendar
- No painel do Koalendar, clique em “Compartilhar” ao lado da página de reserva que você deseja usar.
- Selecione “Adicionar ao site”.
- Escolha um estilo de incorporação e clique em “Copiar código”.
| Estilo incorporado | O que os clientes veem |
|---|---|
| Incorporar no texto 🖥️ | O calendário completo aparece diretamente na página do produto. |
| Widget pop-up 📍 | Botão flutuante “Reserve agora” que abre o calendário em uma janela pop-up. |
| Texto/Botão do pop-up 🔗 | Qualquer link ou botão abre um calendário pop-up. |
🎨 Dica: personalize as cores, o texto e a posição no Koalendar antes de copiar, para que fiquem em sintonia com o tema da sua loja.
➕ Precisa apenas de um link normal? Copie a URL de compartilhamento do Koalendar e vincule-a a qualquer botão ou item de menu para abrir o agendador em uma nova aba.
📝 Passo 2 – Adicione no Shopify
A. Texto ou botão incorporado no texto ou em janela pop-up (página ou seção)
- No painel de administração do Shopify, acesse Loja online → Temas e clique em Personalizar no tema publicado.
- Acesse a página ou o modelo onde deseja inserir o calendário.
- Clique em “Adicionar seção” (ou “Adicionar bloco”) e selecione “Liquid personalizado” (ou “HTML personalizado” para temas mais antigos).
- Cole o código do Koalendar na caixa de texto.
- Salve e, em seguida, visualize— o calendário ou o gatilho pop-up deve carregar instantaneamente.
B. Widget pop-up (botão flutuante em todo o site)
- Loja online → Temas → Ações (botão (...) → Editar código.
- Abra o arquivo layout/theme.liquid (ou theme.liquid nos temas mais recentes).
- Vá até o final da página e cole o código do widget do Koalendar logo antes de ************
</body>. - Salvar. O botão flutuante agora aparece na sua loja virtual.
📝 Alguns temas oferecem uma caixa em Configurações do tema → Scripts personalizados. Você pode colar o script do widget nesse campo, em vez de editar o código.
🛠️ Resolução de problemas
| Tema | Corrigir |
| O calendário/widget não está sendo exibido | Certifique-se de ter colado o script completo e salvo o tema. Limpe o cache do navegador e atualize a página. |
| O link pop-up aparece, mas não abre | Verifique se o snippet de acionamento e o script do Koalendar estão na mesma página/modelo. |
| O widget aparece em todas as páginas, mas você só quer que ele apareça em uma | Cole o código de incorporação nessa página específica, em vez de no arquivo theme.liquid. |
| A altura do calendário parece estar errada | Ajuste a altura no Koalendar antes de copiar ou coloque o código de incorporação dentro de uma tag div com CSS personalizado. |
🤔 Que estilo devo usar?
| Objetivo | Melhor método |
| Exibir o calendário dentro da página de um produto ou de informações | Incorporar no texto 🖥️ |
| Chamada à ação em toda a loja | Widget pop-up 📍 |
| Adicionar agendamento a um CTA existente | Texto/Botão do pop-up 🔗 |
| Link externo simples | Crie um link para a URL do seu Koalendar |