ℹ️ 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.

Hoppy Appointments le da dos maneras de mostrar el calendario de reserva en su escaparate:

1. botón de libro automático ahora — reemplaza el botón Añadir al carrito en páginas de productos conectadas a sus servicios.
2. Bloque manual del calendario de citas — coloque una tarjeta de reserva o calendario en línea en cualquier página usando Shopify’s tema editor.

Esta guía te lleva a través de ambos métodos para que los clientes puedan empezar a reservar directamente desde tu tienda.

⚠️ Antes de empezar

Antes de incrustar el calendario, asegúrese de tener:

• El Hoppy Appointments aplicación instalada en su Shopify tienda
• Al menos un servicio creado y conectado a Shopify producto
• Una idea clara de si desea un calendario popup o un calendario inline en la página

Si aún no has creado un servicio, comienza con Cómo configurar los servicios de reserva de citas primero.

🛠️ Paso 1 - Habilitar la aplicación de las reservas de citas

La aplicación embed es el interruptor principal que hace que el widget de reserva funcione. Debe ser habilitado tanto para la incrustación automática como manual.

Opción A: Permite desde el interior de la aplicación

1. Abrir el Hoppy Appointments app
2. En el Dashboard, Encontrar el Situación de la aplicación tarjeta
3. Haga clic Activar

Esto te abre. Shopify editor de temas directamente a la sección embed de la aplicación.

Opción B: Habilitar manualmente desde Shopify Admin

1. Ve. Shopify Admin → Tienda Online → Temas
2. Haga clic Personalizar sobre su tema en vivo
3. Haga clic en App embeds icono en la parte superior
4. Encontrar Reservas de citas
5. Toggle it ON
6. Haga clic Guardar

Una vez habilitado, el Situación de la aplicación tarjeta dentro Hoppy Appointments espectáculos Activo.

🛠️ Paso 2 - Asegúrate de que tu servicio esté activo y guardado

El widget de reserva sólo aparece para los servicios que se guardan y se activan.

1. En la aplicación, vaya a Mis servicios
2. Compruebe la placa junto a su servicio:
3. • Activo ✅ - el servicio es en vivo
   • Inactivo - abrir el Más menú y haga clic Enciende
   • Archivado - abrir el Más menú y haga clic Unarchive, entonces enciende
3. Abra el servicio y haga clic Guardar

Salvar re-sincroniza su servicio con el escaparate. Esto es importante después de cambiar las variantes de productos, precios o disponibilidad.

🛠️ Paso 3 - Compruebe el botón de libro ahora en su página de producto

Una vez que la aplicación embed está activa y el servicio se guarda, la página de producto conectada a su servicio mostrará automáticamente un Reserva ahora botón en lugar de Añadir al carrito.

1. Abre tu tienda en vivo
2. Ir al producto conectado a su servicio
3. Confirmar el Reserva ahora botón aparece
4. Haga click para abrir el popup de la reserva

Si su producto tiene múltiples variantes, cambie entre ellas. El botón Libro Ahora aparece sólo para variantes que son parte del servicio.

💡 El selector de cantidad está deshabilitado para productos reservables porque cada reserva es para una ranura a la vez.

🛠️ Paso 4 — Añada el bloque del calendario de citas manualmente (opcional)

Use este método si:

• Su tema utiliza un constructor de página o forma de producto personalizado
• Usted desea el calendario en una página que no es una página de producto
• Usted desea una tarjeta de reserva estilo con detalles del servicio
• Usted desea el calendario completo incrustado directamente en la página

Añadir el bloque

1. Ve. Shopify Admin → Tienda Online → Temas
2. Haga clic Personalizar sobre su tema en vivo
3. Navegue a la página donde desea el calendario
4. Haga clic Agregar bloque o Add section
5. Encontrar Apps → Calendario de citas
6. Pruebe su ID de servicio
7. Elija un Modo de inserción

Encuentre su ID de servicio

• Abra la página de edición de servicio — el ID de servicio se muestra cerca de la parte superior
• O ir a Mis servicios → Más → Copiar ID de servicio

Elija un modo de embed

• Modal — muestra una tarjeta de reserva con la imagen de servicio, título, descripción, precio y Reserva ahora botón que abre el calendario en un popup
• Direct — incorpora el calendario de reservas completo directamente en la página para que los clientes puedan elegir fechas y horarios sin abrir un popup

Configurar el estilo básico

El bloque le permite personalizar:

• Color de fondo
• Título color y tamaño de fuente
• Color de precio y tamaño de fuente
• Color de etiqueta de opción y tamaño de fuente
• Color de botón, fondo y tamaño de fuente
• Ver detalles link color, fondo, tamaño de fuente y visibilidad

Para opciones de estilo más profundas, vea Reservas de citas — Opciones de diseño y estilo.

Guardar el tema

Haga clic Guardar en el editor de temas, luego ver la página en vivo.

⚠️ El bloque del calendario de citas todavía requiere Nombramiento Reservas app embed para ser habilitado. Si no lo es, el bloque muestra un mensaje "App Embed Not Enabled".

👀 Lo que los clientes ven

botón de libro automático ahora

1. Visitar la página del producto
2. Ellos ven un Reserva ahora botón en lugar de Add to Cart
3. Lo hacen y se abre un calendario popup
4. Seleccionan una fecha, hora y rellenan el formulario de reserva
5. Si el pago está habilitado, el producto se añade al carrito y se verifica
6. Si el pago no está habilitado, la reserva se confirma inmediatamente

Bloque manual Modal

1. El cliente visita la página donde se coloca el bloque
2. Ver una tarjeta con detalles de servicio, precio y opciones de variante o duración
3. Hacen clic Reserva ahora para abrir el calendario popup
4. Completan el flujo de reserva

Bloque directo manual

1. El cliente visita la página donde se coloca el bloque
2. El calendario completo carga inline mientras se desplazan a la vista
3. Seleccionan una fecha y hora directamente en la página
4. Completan el formulario de reserva y el checkout

⚠️ Notas importantes

• La aplicación embed es necesaria para ambos métodos. Incluso si utiliza el bloque manual, la aplicación de las Reservas de Nombramientos debe ser activada.
• Usa tu tema en vivo, publicado. El calendario no aparecerá en temas borrados o inéditos.
• Un servicio activo por variante del producto. Si una variante está conectada a más de un servicio activo, el comportamiento puede ser impredecible.
• Guardar después de cada cambio. Las variantes de productos, precios, disponibilidad y configuración de servicio sólo llegan al escaparate después de hacer clic en Guardar.
• El botón Book Now oculta los botones originales Add to Cart y checkout dinámico para variantes reservables solamente. Otros productos permanecen sin cambios.
• Selectores de cantidad son deshabilitados para productos reservables porque las reservas son compras de una sola parcela.

🐞 Solución de problemas

El botón Libro Ahora no aparece

• Confirmar el Situación de la aplicación espectáculos Activo
• Asegúrese de que el servicio es salvado y activo
• Compruebe que está viendo la página correcta del producto y la variante
• Asegúrese de que está probando sobre el tema en vivo, no un borrador
• Refrigere la página o prueba en una ventana de Incognito

El bloque manual muestra "App Embed Not Enabled"

Volver al Paso 1 y habilitar la aplicación de las Reservas de Nombramientos incrustado.

El bloque manual muestra "Configuración de servicio de designación no encontrada"

Verifique el ID de servicio Has pegado. Puedes copiarlo de nuevo. Mis servicios → Más → Copiar ID de servicio.

El calendario abre pero no hay fechas disponibles

Comprueba tu servicio Disponibilidad tab. Asegúrate de que los días laborables estén habilitados, que la vista y el aviso mínimo de programación son razonables, y las fechas bloqueadas no cubren todo.

Para un completo avance de solución de problemas, vea Nombramiento Calendario de Reservas no se muestra en mi tienda [Fixed].

🎉 Resultado final

Una vez configurado:

✅ La aplicación de las reservas de citas incrustada está habilitada en su tema
✅ Su servicio es guardado, activo y conectado al producto adecuado
✅ El Reserva ahora botón aparece automáticamente en la página del producto
✅ Opcionalmente, un bloque del calendario de citas se coloca en cualquier página que elija
✅ Los clientes pueden reservar directamente desde su escaparate

📚 Artículos relacionados

• Cómo configurar los servicios de reserva de citas
• Nombramiento Calendario de Reservas no se muestra en mi tienda [Fixed]
• Reservas de citas — Opciones de diseño y estilo
• Cómo establecer CSS personalizado para las reservas de citas App
• Cómo configurar el botón de acción flotante como Calendly para las reservas de citas
• Reservas de citas — Todas las opciones de pago explicadas
• Reservas de citas — Tipos de reservas Explicadas

Actualizado el: 10/09/2026