ℹ️ Note: Este artículo fue traducido automáticamente usando AI y puede contener imprecisiones. Si algo se ve mal, póngase en contacto con nuestro equipo de apoyo.

El calendario de reservas suele empezar a funcionar justo después de la configuración, pero a veces un pequeño ajuste de configuración, tema o disponibilidad puede evitar que aparezca en tu tienda.

La buena noticia es que estos problemas suelen solucionarse muy rápido 🚀

Esta guía repasa las razones más comunes por las que el calendario de reservas (o su botón Book Now (Reservar ahora)) puede no aparecer, y cómo resolver cada una paso a paso.

En la mayoría de los casos, el problema está relacionado con uno de los siguientes:

• App Embed está desactivado
• El servicio no se guardó, está desactivado o está archivado
• Estás consultando la página de producto o variante incorrecta
• Se modificaron las variantes del producto después de crear el servicio
• Estás previsualizando un tema borrador (no publicado)
• Conflictos con tema personalizado o constructor de páginas
• La configuración de disponibilidad oculta todas las fechas
• Los horarios están completamente reservados o se alcanzaron los límites de reserva
• Caché del navegador o de la tienda

Veamos uno por uno 👇

✅ Paso 1: Verifica que App Embed esté activado

Para que el calendario de reservas aparezca en tu tienda, la App Embed debe estar activada dentro de tu tema de Shopify. Esta es la causa más común.

La forma más rápida de verificarlo es directamente dentro de la app:

Abre la app Hoppy Appointments → en el dashboard/homepage (panel de inicio), busca la tarjeta App Status (Estado de la app).

• Active (Activo) → La App Embed está activada ✅
• Inactive (Inactivo) → Haz clic en Activate (Activar): te lleva directamente al editor de tu tema

Para activarla manualmente, ve a:

Shopify Admin → Online Store → Themes → Customize → App Embeds

Luego:

• Busca “Appointment Bookings”
• Toggle it ON (Activa el interruptor)
• Haz clic en Save (Guardar)

Consejo:
Si ya estaba activada, prueba a desactivarla (OFF) → Save (Guardar) → ON → Save (Guardar) de nuevo, y luego actualiza tu tienda.

Después de este paso, el botón Book Now debería aparecer en la página de producto conectada a tu servicio.

✅ Paso 2: Asegúrate de que el servicio esté guardado y activo

Incluso con la App Embed activada, un servicio solo aparece en tu tienda cuando está guardado y activo.

Abre la app → dashboard/homepage (panel de inicio) y revisa la etiqueta junto a tu servicio:

• Inactive (Inactivo) → Abre el menú More (Más) → Turn on (Activar)
• Archived (Archivado) → Abre el menú More (Más) → Unarchive (Desarchivar), y luego asegúrate de que esté activado

A continuación, abre el servicio y haz clic en Save (Guardar), incluso si no cambiaste nada.

Guardar vuelve a sincronizar el servicio con tu tienda, lo que soluciona la mayoría de los casos de “antes funcionaba”.

Después de guardar, aparece un banner en la parte superior de la página:

• “Make sure Appointment Booking App Embed is active” → Haz clic en Enable App Embed (Activar incrustación de reservas) (consulta el Paso 1)
• “Confirm Appointment Booking is published successfully” → Haz clic en Open Store (Abrir tienda) para verificar el resultado

ℹ️ Si el botón Book Now abre una ventana emergente en blanco o vacía, el servicio suele estar desactivado o archivado; este paso también lo soluciona.

✅ Paso 3: Verifica que estés en la página de producto y variante correctas

El botón Book Now solo aparece en la página de producto conectada a tu servicio, no en otros productos.

Abre tu servicio → pestaña General → tarjeta Booking (Reserva) y confirma qué producto está seleccionado.

Ejemplo:
Si tu servicio está conectado a “Guitar Lesson” pero estás viendo la página de producto “Drum Lesson”, el botón no aparecerá allí.

Si el producto tiene varias variantes, prueba también a cambiar entre variantes en la tienda.

⚠️ Importante:
Si editaste, eliminaste o volviste a crear las variantes del producto en Shopify después de configurar el servicio, la conexión puede quedar obsoleta.

La solución es sencilla:

→ Abre el servicio
→ Haz clic en Change (Cambiar)
→ Selecciona las variantes correctas después de modificar las variantes del producto
→ Haz clic en Save (Guardar)

Esto vuelve a sincronizar la información más reciente del producto y sus variantes con tu tienda.

✅ Paso 4: Verifica en tu tema publicado y activo

La App Embed se verifica, y el calendario se muestra, solo en tu tema publicado y activo.

Esto significa que:

• Activar la App Embed mientras editas un tema borrador o no publicado no hará que el calendario aparezca en tu tienda activa
• Si cambiaste recientemente a un nuevo tema, la App Embed permanece desactivada en el nuevo tema hasta que la vuelvas a activar (consulta el Paso 1)

Prueba siempre en tu tienda activa:

→ Abre tu tienda en una pestaña normal del navegador, no solo en la previsualización del editor de temas.

✅ Paso 5: Actualización forzada y modo incógnito

A veces Shopify o tu navegador almacenan temporalmente en caché los recursos de la tienda.

Una actualización forzada suele solucionarlo al instante.

Windows

Ctrl + Shift + R

Mac

Cmd + Shift + R

Prueba también:

• Abrir tu tienda en una ventana de incógnito o privada
• Probar en otro navegador o en tu teléfono

Esto confirma si el problema es solo contenido en caché.

✅ Paso 6: ¿Usas un tema personalizado o un constructor de páginas?

La mayoría de los temas de Shopify funcionan con Hoppy Appointments sin configuración adicional: la app reemplaza automáticamente el botón Add to Cart (Añadir al carrito) por el botón Book Now en las páginas de producto reservables.

Sin embargo, los temas fuertemente personalizados o creados con constructores de páginas pueden usar formularios de producto no estándar, que la app no siempre puede detectar.

En ese caso, coloca el calendario manualmente:

Abre Shopify Theme Editor → Navega a la página deseada → Add Block (Añadir bloque) → Apps → Appointment Calendar

Luego:

• Pega tu Service ID (ID del servicio)

→ Encuéntralo en la parte superior de la página de edición del servicio, o a través de My services (Mis servicios) → More (Más) → Copy Service ID (Copiar ID del servicio)

• Elige el Embedding Mode (Modo de incrustación):
• • Modal (Modal) → Muestra una tarjeta de reserva que abre el calendario en una ventana emergente
  • Direct (Directo) → Incrusta el calendario completo directamente en la página
• Guarda el tema

El bloque también te indica cuando algo va mal:

• “App Embed Not Enabled” → Vuelve al Paso 1: la App Embed es necesaria incluso para la colocación manual
• “Appointment service configuration not found” → Revisa el Service ID que pegaste

💡 Alternativa: activa el Floating Action Button (Botón de acción flotante) dentro de tu servicio (General tab → Enable floating button) para mostrar un botón flotante Book Now en todas las páginas de la tienda. Recuerda hacer clic en Save (Guardar) en el servicio después.

✅ Paso 7: ¿El calendario se abre pero no muestra fechas/horarios? Revisa la disponibilidad

Si la ventana emergente se abre pero los clientes no pueden seleccionar ninguna fecha, la configuración de disponibilidad suele ser la razón.

Abre tu servicio → pestaña Availability (Disponibilidad) y revisa lo siguiente:

• Los días laborables están activados con horarios de inicio y fin válidos
• Date-range availability (Disponibilidad por rango de fechas) → Si estableciste fechas específicas y ya pasaron, ninguna fecha aparecerá. Añade un nuevo rango de fechas actual
• Minimum scheduling notice (Antelación mínima para reservar) → Un valor alto (p. ej., 48 horas) elimina hoy y mañana del calendario. El valor predeterminado es 1 hora
• Look ahead (Antelación de visualización) → Controla hasta cuánto tiempo pueden reservar los clientes. Un valor corto (p. ej., 2–3 días) hace que el calendario parezca casi vacío
• Break times (Tiempos de descanso) → Asegúrate de que no cubran todas tus horas laborables
• Blocked dates (Fechas bloqueadas) → Elimina cualquier fecha que no deba estar bloqueada

Ejemplo:
Si tu Look ahead (Antelación de visualización) está en 2 días y tu Minimum scheduling notice (Antelación mínima para reservar) es de 48 horas, los clientes pueden no ver ninguna fecha reservable.

Después de ajustar, haz clic en Save (Guardar) y actualiza tu tienda; las fechas deberían volverse seleccionables.

✅ Paso 8: Revisa la configuración de zona horaria

Una zona horaria incorrecta puede desplazar tus horarios o hacer que parezca que no hay nada disponible a las horas que esperas.

Abre tu servicio → pestaña Availability (Disponibilidad) → tarjeta Timezone & hour format (Zona horaria y formato de hora):

• Confirma que tu Timezone (Zona horaria) sea correcta
• Lock timezone (Bloquear zona horaria) → Cuando está activado, todos los clientes ven los horarios en tu zona horaria, sin importar dónde estén
• Show timezone selector (Mostrar selector de zona horaria) → Permite a los clientes cambiar a su propia zona horaria

💡 Si clientes de otros países reportan horarios “faltantes”, probablemente estén viendo tu agenda convertida a su zona horaria local.

✅ Paso 9: Verifica si los horarios están completamente reservados o se alcanzaron los límites

A veces el calendario funciona correctamente: los horarios simplemente ya están ocupados.

Revisa lo siguiente:

• Maximum bookings per time slot (Reservas máximas por franja horaria) → El valor predeterminado es 1, por lo que un horario desaparece tan pronto como alguien lo reserve. Increméntalo para clases o sesiones grupales
• Maximum bookings per day (Reservas máximas por día) → Cuando se alcanza, todo el día queda no disponible
• Existing bookings (Reservas existentes) → Abre la página Bookings (Reservas) para ver qué horarios ya están ocupados

¿Usas el modo Availability per teammate (Disponibilidad por compañero de equipo)?

Si no hay compañeros de equipo asignados al servicio, no se generará ningún horario:

→ Availability tab (Pestaña Disponibilidad) → Assign teammates to this service (Asignar compañeros a este servicio), o vuelve a Availability per service (Disponibilidad por servicio)

💡 ¿Quieres que los días completamente reservados sigan visibles?

Activa la Waitlist (Lista de espera) en la pestaña Payment (Pago), luego activa Show waitlist when a slot is fully booked (Mostrar lista de espera cuando un horario esté completo): los clientes verán una opción “Join waitlist” (Unirse a lista de espera) en lugar de un calendario vacío.

⚠️ Ten en cuenta

• La previsualización dentro de la página de configuración del servicio es aproximada: confía siempre en el calendario de tu página de producto activa
• El bloque de app Appointment Calendar (Calendario de citas) también requiere la App Embed del Paso 1
• Cada producto o variante solo puede estar conectado a un servicio activo a la vez

¿Todavía no se muestra?

Si ya probaste todos los pasos anteriores y el calendario de reservas sigue sin verse:

1. Vuelve a guardar el servicio
2. Confirma que App Status (Estado de la app) muestre Active (Activo)
3. Prueba en la página de producto activa (no en la previsualización del tema)
4. Prueba en una ventana de incógnito

Si el problema continúa, no dudes en contactarnos directamente desde la app Hoppy Appointments.

Para ayudarnos a solucionarlo más rápido, incluye:

• La URL de tu tienda
• La URL de la página de producto donde debería aparecer el calendario
• Tu Service ID (ID del servicio) (My services (Mis servicios) → More (Más) → Copy Service ID (Copiar ID del servicio))
• El nombre de tu tema
• Una captura de pantalla de la tarjeta App Status (Estado de la app)

Estaremos encantados de ayudarte 🙌

Actualizado el: 10/09/2026