Cómo añadir Koalendar a Shopify
Permita a los clientes reservar citas sin salir de su tienda Shopify. Solo hay que seguir dos sencillos pasos:
- Copia el código de inserción (o enlace) de Koalendar.
- Pégalo en el área Personalizado Liquid/HTML de Shopify y guarda.
📑 Menú
- Paso 1: copia tu código de inserción de Koalendar.
- Paso 2: añádalo en Shopify.
- Solución de problemas
- ¿Qué estilo debo usar?
📋 Paso 1: copia tu código de inserción de Koalendar.
- En el panel de control de Koalendar, haz clic en Compartir junto a la página de reservas que deseas utilizar.
- Seleccione Añadir al sitio web.
- Elige un estilo de inserción y haz clic en Copiar código.
| Estilo incrustado | Lo que ven los compradores |
|---|---|
| Inline Embed 🖥️ | El calendario completo aparece directamente en el producto/página. |
| Widget emergente 📍 | Botón flotante «Reservar ahora» que abre el calendario en una ventana emergente. |
| Texto emergente/Botón 🔗 | Cualquier enlace o botón activa un calendario emergente. |
🎨 Consejo: Personaliza los colores, el texto y la posición en Koalendar antes de copiarlo para que coincida con el tema de tu tienda.
➕ ¿Solo necesitas un enlace normal? Copia la URL para compartir de Koalendar y vincula cualquier botón o elemento del menú para abrir el programador en una nueva pestaña.
📝 Paso 2: añádelo en Shopify.
A. Texto/botón integrado o emergente (página o sección)
- En el panel de control de Shopify, ve a Tienda online → Temas y haz clic en Personalizar para el tema publicado.
- Navega hasta la página o plantilla donde deseas colocar el calendario.
- Haz clic en Añadir sección (o Añadir bloque), selecciona Liquid personalizado (o HTML personalizado para temas más antiguos).
- Pega tu código Koalendar en el cuadro de texto.
- Guarde y luego haga clic en Vista previa: el calendario o la ventana emergente deberían cargarse al instante.
B. Widget emergente (botón flotante en todo el sitio)
- Tienda online → Temas → Acciones (... botón) → Editar código.
- Abre layout/theme.liquid (o theme.liquid en los temas más recientes).
- Desplázate hasta la parte inferior y pega el script del widget de Koalendar. justo antes de ************
</body>. - Guardar. El botón flotante aparecerá ahora en toda tu tienda.
📝 Algunos temas ofrecen una casilla Configuración del tema → Scripts personalizados. Puedes pegar el script del widget allí en lugar de editar el código.
🛠️ Solución de problemas
| Problema | Arreglar |
| El calendario/widget no se muestra. | Asegúrate de haber pegado el script completo y de haber guardado el tema. Borra la caché del navegador y vuelve a cargar la página. |
| El enlace emergente se muestra pero no se abre. | Confirma que tanto el fragmento de código de activación como el script de Koalendar se encuentran en la misma página/plantilla. |
| Widget en todas las páginas, pero solo lo quieres en una | Pega el código de inserción en esa página específica en lugar de en theme.liquid. |
| La altura del calendario parece incorrecta. | Ajusta la altura en Koalendar antes de copiar o envuelve el código incrustado en un div con CSS personalizado. |
🤔 ¿Qué estilo debería usar?
| Objetivo | El mejor método |
| Mostrar calendario dentro de una página de producto o información | Inline Embed 🖥️ |
| Llamada a la acción en toda la tienda | Widget emergente 📍 |
| Añadir programación a una CTA existente | Texto emergente/Botón 🔗 |
| Enlace externo simple | Añade un hipervínculo a tu URL de Koalendar. |