> ## 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). # 📅 Cómo incluir el calendario de reserva de citas en su tienda > ℹ️ **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: * **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**