ℹ️ 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 incluye un sistema de diseño completo para que el widget de reservas, las páginas de éxito, la página de reprogramación y la página de cancelación encajen perfectamente en tu tienda.

Puedes controlar colores, fuentes, botones, fondos e incluso cargar imágenes personalizadas. Todo se administra desde dos lugares:

• Settings → Design (Configuración → Diseño) → valores predeterminados de toda la tienda que se aplican a cada servicio
• Service → Design tab (Pestaña Diseño del servicio) → anulaciones por servicio cuando quieras que uno luzca diferente

Esta guía explica cada opción de diseño, cuándo aparece y cómo afecta la tienda.

⚠️ Before You Begin

La configuración de diseño se administra desde:

• Hoppy Appointments → Settings → Default Design (Diseño predeterminado) para los valores globales
• Hoppy Appointments → Services → [tu servicio] → Design (Diseño) para las anulaciones por servicio

Antes de personalizar el widget, asegúrate de que:

• La aplicación Hoppy Appointments esté instalada
• Tengas al menos un servicio creado
• El Appointment Bookings app embed (incrustación de la aplicación Appointment Bookings) esté habilitado en tu tema de Shopify

ℹ️ Sin la app embed habilitada, los clientes no verán el widget de reservas, sin importar cuán bonita sea tu configuración de diseño.

Consulta la guía de solución de problemas Calendar Not Showing (Calendario no visible) si necesitas ayuda para habilitar la incrustación.

🌐 Diseño global vs. diseño por servicio

Diseño global (Settings → Design)

Este es tu valor predeterminado de toda la tienda. Cada servicio nuevo usa automáticamente estos colores, fuentes y estilos, a menos que indiques lo contrario.

Úsalo cuando quieras una apariencia coherente en todos tus servicios reservables.

Diseño por servicio (Service → Design tab)

Cada servicio tiene una casilla de verificación llamada:

Do not Follow Default Theme Settings (No seguir la configuración del tema predeterminado)

• Desmarcada → El servicio usa el diseño global. Todos los campos de color y fuente permanecen ocultos para mantener todo sencillo.
• Marcada → Aparece el editor de diseño completo y este servicio usa su propio estilo en lugar de los valores predeterminados globales.

💡 Usa el diseño por servicio cuando uno deba lucir diferente; por ejemplo, una consulta premium con un tema oscuro o una clase con temática navideña.

Qué se controla y dónde

La mayoría de las opciones de diseño existen tanto a nivel global como por servicio, pero algunas son solo por servicio:

🎨 Las pestañas de diseño

El editor de diseño está organizado en pestañas. Cada una controla una pantalla diferente que ven los clientes.

📅 Página de reservas (Booking Page)

Esta pestaña controla el widget de reservas principal: el calendario, las franjas horarias, el formulario y los botones de navegación.

Fuente (Font)

Elige la familia de fuentes que se usa en todo el widget. La aplicación admite docenas de Google Fonts y fuentes del sistema comunes.

• System fonts (fuentes del sistema), como Arial o Helvetica, se cargan al instante desde el dispositivo del cliente
• Google Fonts se cargan automáticamente al seleccionarlas

Si una fuente no puede cargarse, el widget usa una fuente segura como respaldo.

Colores de fondo (Background Colors)

• Outer background color (Color de fondo exterior) → El área detrás del widget de reservas
• Info section background color (Color de fondo de la sección de información) → El panel izquierdo que muestra la imagen, el título y el precio del servicio
• Card background color (Color de fondo de la tarjeta) → La tarjeta principal que contiene el calendario y el formulario

Estas tres capas permiten crear profundidad y separación dentro del widget.

Texto e iconos (Text & Icons)

• Text color (Color del texto) → El color predeterminado para la mayoría del texto del widget
• Icons color (Color de los iconos) → El color de los iconos pequeños como flechas y marcas de verificación

Fecha y franja horaria seleccionadas (Selected Date & Time Slot)

• Selected background color (Color de fondo de la selección) → El color detrás de una fecha o franja horaria elegida
• Selected text color (Color del texto de la selección) → El color del texto en la fecha o franja horaria seleccionada

Ayudan a que los clientes vean claramente lo que han elegido.

Botones (Buttons)

• Confirm button (Botón Confirmar) → Color de fondo y del texto para la acción principal
• Back button (Botón Atrás) → Color de fondo y del texto para retroceder un paso
• Continue button (Botón Continuar) → Color de fondo y del texto para flujos de varios pasos

Cada botón se puede estilizar de forma independiente para que coincida con la jerarquía de botones de tu tienda.

🎉 Página de éxito (Success Page)

Esta pestaña controla la pantalla que ven los clientes después de una reserva gratuita o confirmada.

• Heading size / color (Tamaño/color del encabezado)
• Description size / color (Tamaño/color de la descripción)
• Details size / color (Tamaño/color de los detalles) → Para el texto del resumen de la reserva
• Button text size / background color / text color (Tamaño del texto del botón / color de fondo / color del texto) → El botón CTA de la pantalla de éxito
• Icons color (Color de los iconos)
• Custom image (Imagen personalizada) → Reemplaza la ilustración de éxito predeterminada por tu propia imagen

💡 Cargar una imagen de éxito personalizada es una buena forma de reforzar tu marca o celebrar la reserva con un gráfico amigable.

🔄 Página de reprogramación (Rescheduling Page)

Esta pestaña tiene dos secciones internas:

• Reschedule Form (Formulario de reprogramación) → La pantalla donde los clientes eligen un nuevo horario
• Success Page (Página de éxito) → La pantalla de confirmación una vez completada la reprogramación

Cada sección tiene los mismos tipos de controles que la pestaña principal Success Page:

• Heading size / color
• Message text size / color
• Details size / color
• Button size and colors
• Icons color
• Custom image

❌ Página de cancelación (Cancel Page)

Esta pestaña también tiene dos secciones internas:

• Cancel Form (Formulario de cancelación) → La pantalla donde los clientes confirman que desean cancelar
• Success Page (Página de éxito) → La pantalla de confirmación una vez completada la cancelación

Incluye los mismos controles de estilo que la pestaña Rescheduling Page.

🖼️ Logotipo personalizado (Custom Logo)

ℹ️ Esta opción está disponible solo en la pestaña Design (Diseño) por servicio.

Habilita Custom logo (Logotipo personalizado) para reemplazar la imagen del producto en el widget de reservas con tu propio logotipo o imagen cargada.

• Recomendado para mantener la coherencia de marca
• Las cargas de imágenes están limitadas a 1 MB
• Los formatos aceptados incluyen GIF, JPEG, PNG y WebP

🧑‍💻 CSS personalizado (Custom CSS)

Para los comerciantes que desean un control preciso al píxel, tanto las páginas de diseño global como por servicio incluyen un editor de Custom CSS (CSS personalizado).

• Pega tu propio CSS en el editor
• Haz clic en Apply (Aplicar) para activarlo en la tienda
• Haz clic en Reset (Restablecer) para restaurar la plantilla de CSS predeterminada y desactivar tus cambios

El editor incluye una plantilla predeterminada que muestra los selectores comunes que puedes usar, como:

• El contenedor exterior del widget
• La tarjeta del diálogo
• La sección de información
• Fechas y franjas horarias seleccionadas del calendario
• Los botones Confirm, Back y Continue
• Variantes específicas para móvil

⚠️ Importante:

• El CSS personalizado solo se aplica cuando haces clic en Apply
• Si un servicio sigue el tema predeterminado, usa el CSS personalizado global
• Si un servicio usa su propio diseño, usa su propio CSS personalizado por servicio
• La aplicación añade automáticamente !important a las declaraciones CSS para ayudar a anular los estilos del tema

💡 El CSS personalizado es ideal para ajustes avanzados, pero la mayoría de los comerciantes pueden obtener el aspecto deseado usando solo los selectores de color y fuente.

🔘 Botón de acción flotante (Floating Action Button)

ℹ️ El Floating Action Button se configura en la pestaña General de un servicio, no en la pestaña Design. Se incluye aquí porque tiene sus propias opciones de estilo.

Habilita el Floating Action Button para mostrar un botón fijo de Book Now (Reservar ahora) que sigue a los clientes mientras se desplazan por tu tienda.

Cuando está habilitado, puedes personalizar:

• Button text (Texto del botón) → El valor predeterminado es 'Book Now' (Reservar ahora)
• Position (Posición) → Inferior derecha, inferior izquierda o inferior centro
• Background color (Color de fondo)
• Text color (Color del texto)

Es útil cuando quieres que los clientes puedan reservar desde cualquier página, no solo desde la página del producto.

Consulta la documentación de Service Setup (Configuración del servicio) para obtener más detalles sobre cómo habilitar y colocar el botón flotante.

🧩 Estilo del bloque de aplicación del editor de temas (Theme Editor App Block Styling)

Si añades el bloque Appointment Calendar (Calendario de citas) a través del editor de temas de Shopify, obtienes opciones de estilo adicionales independientes del panel de administración de la aplicación.

Esta configuración controla la tarjeta o botón que abre el modal de reservas:

• Title color / font size (Color del título / tamaño de fuente)
• Price color / font size (Color del precio / tamaño de fuente)
• Option color / font size (Color de la opción / tamaño de fuente)
• View details button (Botón Ver detalles) → Mostrar/ocultar, texto, colores, tamaño de fuente
• Book Now button (Botón Reservar ahora) → Fondo, color del texto, tamaño de fuente
• Block background color (Color de fondo del bloque)

⚠️ Importante:

Esta configuración solo da estilo al bloque de la página. El modal que se abre sigue usando la configuración de diseño de Settings → Design o de la pestaña Design del servicio.

Algunas opciones del bloque solo aparecen cuando el bloque está configurado en modo Modal.

🖥️ Cómo se ve el estilo en la tienda

El widget de reservas se carga dentro de un iframe en tu tienda. El iframe toma la configuración de diseño que hayas definido y la aplica a:

• El fondo exterior del widget
• Los fondos del panel de información y de la tarjeta
• Todo el texto y los iconos
• Las fechas y franjas horarias seleccionadas del calendario
• Los botones Confirm, Back y Continue
• Las páginas Success, Rescheduling y Cancel
• La ubicación del logotipo personalizado
• Las anulaciones de CSS personalizado

Las fuentes se cargan de forma dinámica. Google Fonts se obtienen de los servidores de Google, mientras que las fuentes del sistema se cargan desde el dispositivo del cliente.

Si una fuente no carga o falta un color, el widget usa valores seguros como respaldo para que la experiencia de reserva siga siendo usable.

⚠️ Notas importantes y limitaciones

• El diseño global es el predeterminado. Los servicios nuevos siguen automáticamente el tema global, a menos que marques Do not Follow Default Theme Settings.
• El CSS personalizado debe aplicarse. Escribir CSS en el editor no hace nada hasta que hagas clic en Apply.
• El CSS por servicio solo se aplica cuando el servicio usa su propio diseño. Si un servicio sigue el tema global, ignora su propio campo de CSS personalizado.
• El logotipo personalizado es solo por servicio. No existe una opción global de logotipo personalizado.
• Las cargas de imágenes están limitadas a 1 MB. Las imágenes más grandes deberán comprimirse antes de cargarlas.
• La configuración del bloque del editor de temas es independiente. Dar estilo al bloque Appointment Calendar en Shopify no cambia el interior del modal.
• El fondo del contenedor del modal lo controla el tema. El área detrás del modal emergente se define con el CSS de la extensión del tema, no por la configuración de diseño del panel de la aplicación.
• La app embed debe estar habilitada. La configuración de diseño solo aparece en la tienda si la app embed de Appointment Bookings está activada en tu tema.

💡 Casos de uso comunes

Hacer que el widget coincida con la marca de tu tienda

• Ve a Settings → Design
• Establece el Outer background color, el Card background color y el Text color para que coincidan con tu tienda
• Elige una fuente que coincida con tu tema
• Estiliza el Confirm button para que coincida con tu CTA principal

Resultado: Cada servicio parece una parte natural de tu tienda.

Un servicio con una apariencia diferente

• Abre el servicio → pestaña Design
• Marca Do not Follow Default Theme Settings
• Cambia los colores y carga un Custom logo

Resultado: Solo ese servicio usa el estilo personalizado. Todos los demás mantienen el diseño global.

Imagen personalizada en la página de éxito

• Abre Settings → Design → Success Page
• Carga una imagen personalizada en Custom image

Resultado: Los clientes ven tu ilustración de marca después de reservar en lugar de la predeterminada.

Ajuste avanzado de diseño

• Abre Settings → Design
• Expande el editor de Custom CSS
• Añade tu CSS y haz clic en Apply

Resultado: Puedes apuntar a elementos específicos del widget que no cubren los selectores de color.

🎉 Resultado final

Una vez configuradas las opciones de diseño:

✅ El widget de reservas coincide con los colores y fuentes de tu tienda
✅ Las páginas de éxito, reprogramación y cancelación lucen coherentes con tu marca
✅ Las anulaciones por servicio permiten destacar servicios individuales cuando sea necesario
✅ Los logotipos e imágenes personalizados añaden un toque personal
✅ El CSS personalizado te ofrece control total sobre el estilo avanzado
✅ Los clientes disfrutan de una experiencia de reserva pulida y profesional 🎨

Con la configuración de diseño adecuada, reservar una cita se siente como una parte fluida de tu tienda Shopify ✨

Actualizado el: 10/09/2026