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

¿Quieres que los clientes puedan reservar desde cualquier lugar de tu tienda, no sólo la página de productos? Un botón de acción flotante funciona como el widget Calendly: un pequeño botón "Book Now" se mantiene fijo en la esquina de cada página, listo para abrir su modal de reserva con un clic.

Hoppy Appointments permite añadir este botón por servicio, personalizar su texto y colores, y elegir dónde aparece en la pantalla.

Este guía te guía a través de la configuración.

⚠️ Antes de empezar

Antes de configurar el botón de acción flotante, asegúrese de tener:

• El Hoppy Appointments aplicación instalada en su Shopify tienda
• Al menos un servicio activo ya creado
• El Hoppy Appointments app embed habilitado en su tema

💡 El botón flotante sólo aparece en las páginas donde la aplicación embed está activa. Si aún no has habilitado la embajada, ve a Shopify Admin → Tienda Online → Temas → Personalizar → App Embeds y encender el Hoppy Appointments incrustado.

🛠️ Paso 1 - Abra la pestaña General del Servicio

El botón de acción flotante está configurado por servicio, dentro del General tab — no la pestaña Diseño.

1. Abrir el Hoppy Appointments app
2. Ve. Servicios
3. Haga clic en el servicio que desea añadir el botón para
4. Haga clic en General pestaña
5. Desplazarse hacia abajo Botón de acción flotante tarjeta

🛠️ Paso 2 - Activar el botón de acción flotante

Dentro del Botón de acción flotante tarjeta:

1. Enciende el Activar botón flotante toggle

Una vez habilitado, los campos de configuración aparecen debajo de la palanca.

🛠️ Paso 3 - Configurar el botón

Configure el botón para que coincida con el estilo de su tienda y el flujo de reserva.

Texto del botón

Introduzca la etiqueta que los clientes verán en el botón. El texto predeterminado es Reserva ahora, pero puede utilizar cualquier cosa que se ajuste a su marca - por ejemplo:

• Reserva una llamada
• Nombramiento
• Reserva un Spot

Posición

Elija dónde aparece el botón en la pantalla:

• Correcto. — aparece en la esquina inferior derecha
• Bottom Left — aparece en la esquina inferior izquierda
• Bottom Center — aparece centrado en el fondo

Color de fondo

Elija el color de fondo del botón. El defecto es negro.

Color de texto

Elija el color de la etiqueta del botón. El defecto es blanco.

💡 Elija colores con fuerte contraste para que el botón sea fácil de leer en el fondo de su tienda.

💾 Paso 4 - Guardar y Previsualizar

1. Haga clic Guardar en la parte superior de la página de servicio
2. Espera el mensaje de confirmación
3. Visite su tienda y compruebe diferentes páginas: casa, producto, colección, carrito, etc.

El botón debe permanecer fijo en la esquina elegida y abrir el modal de reserva al hacer clic.

⚠️ Notas importantes

• Ajustes por servicio — cada servicio tiene su propio botón flotante. Configure por separado para cada servicio que desee mostrar en.
• Aparece en todas las páginas — una vez activado, el botón muestra en cada página donde Hoppy Appointments app embed está activo. No hay reglas de visibilidad específicas de página.
• Servicios múltiples = múltiples botones — si habilita el botón flotante para varios servicios, cada uno hará su propio botón. Para una experiencia más limpia, habilitarlo sólo en el servicio que más desea promover.
• Abre la reserva modal — haciendo clic en el botón abre el flujo de reserva para ese servicio directamente, sin salir de la página actual.
• Las traducciones requieren Configuración Avanzada — si desea que el texto del botón cambie por idioma, active Uso Configuración avanzada sobre el servicio y establecer la traducción Ajustes → Traducciones de servicio →. Ver la guía de traducción para detalles.

🐞 Solución de problemas

El botón no se muestra en mi tienda

1. Asegúrate Activar botón flotante está encendido para el servicio
2. Asegúrate de hacer clic Guardar
3. Confirmar el Hoppy Appointments app embed está habilitado en tu tema
4. Limpiar el caché del navegador o probar en una ventana de incógnito
5. Compruebe que el servicio está activo y correctamente conectado a un producto

El texto del botón está mal o no traducido

• Si Uso Configuración avanzada está apagado, el botón utiliza el texto del Texto del botón campo directamente.
• Si Uso Configuración avanzada está encendido, el texto del botón se tira de Ajustes → Traducciones → Traducciones de servicio → Floating Button Label.

El color del botón no se ve bien

Utilice los recolectores de color en la tarjeta FAB para el estilo básico. Para cambios visuales más avanzados, se puede apuntar a .futureblink-fab clase con CSS personalizado. Vea la guía de CSS personalizada para detalles.

🎉 Resultado final

Una vez configurado:

✅ Un botón flotante "Libro Ahora" aparece en cada página de su tienda
✅ Los clientes pueden empezar a reservar desde cualquier lugar sin navegar a una página de producto
✅ El botón abre la reserva de su servicio modal al instante
✅ El texto, la posición y los colores coinciden con su marca

📚 Artículos relacionados

• Reservas de citas — Opciones de diseño y estilo
• Cómo configurar Custom CSS para las reservas de citas App
• Reservas de citas — Traducción
• Cómo configurar los servicios de reserva de citas

Actualizado el: 10/09/2026