ℹ️ 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 tu widget de reserva coincida con la marca de tu tienda exactamente? Hoppy Appointments le permite añadir su propio CSS en la parte superior de la configuración de diseño incorporado, por lo que puede fino-tano fuentes, colores, espaciamiento, botones, y más.

Esta guía te lleva a través de añadir y aplicar CSS personalizado al widget de reserva.

⚠️ Antes de empezar

Antes de usar CSS personalizado, asegúrate de tener:

• El Hoppy Appointments aplicación instalada en su Shopify tienda
• Al menos un servicio activo
• Familia básica con selectores y declaraciones CSS

💡 Para la mayoría de los cambios de diseño — colores, fuentes, logotipos y estilos de botones— use el incorporado Diseño Ajustes primero. CSS personalizado es mejor cuando necesitas cambios las opciones incorporadas no cubren.

Para una descripción completa de las opciones de diseño incorporadas, vea Reservas de citas — Opciones de diseño y estilo.

🛠️ Paso 1 - Abra el Editor de CSS personalizado

CSS personalizado se puede gestionar en dos lugares.

Global CSS (aplica a todos los servicios por defecto)

1. Abrir el Hoppy Appointments app
2. Haga clic Ajustes en el menú de aplicación
3. Haga clic Diseño
4. Desplazarse hacia abajo Custom CSS tarjeta en la parte inferior de la página

CSS por servicio (sobreestablece CSS global para un servicio)

1. Abrir el Hoppy Appointments app
2. Ve. Servicios
3. Haga clic en el servicio que desea estilo
4. Haga clic en Diseño pestaña
5. Asegúrese de que No siga Ajustes de Tema Predeterminado debe ser revisado
6. Desplazarse hacia abajo Custom CSS tarjeta

🛠️ Paso 2 - Elija CSS Global o Service-Level

Al editar CSS en un servicio Diseño pestaña, verás una palanca:

No siga Ajustes de Tema Predeterminado

• Fuera. → el servicio utiliza el CSS global desde Ajustes → Diseño
• On → el servicio utiliza su propio CSS desde el nivel de servicio Diseño pestaña

Esto le permite mantener un estilo consistente a través de todos los servicios, o dar servicios específicos un aspecto único.

🛠️ Paso 3 - Escriba su CSS

El editor CSS comienza con una plantilla predeterminada que incluye los selectores de widget más comunes. Puede reemplazar o ampliar la plantilla con sus propias reglas.

Clases de envoltura principales

Selector

Lo que busca

.futureblink-appointment

Todo el widget de reserva

.futureblink-appointment .dialog

El diálogo de reserva principal (desktop)

.futureblink-appointment.mobile .dialog

El diálogo de reserva principal (móvil)

.futureblink-appointment .userInfoSection

El panel de detalles del servicio

Selectores comunes que puede estilo

Selector

Lo que busca

.futureblink-appointment .confirm-btn

Confirmación / botón de libro

.futureblink-appointment .continue-btn

Continúe el botón

.futureblink-appointment .back-btn

Botón trasero

.futureblink-appointment .time-slot.selected

Tiempo seleccionado ranura

.futureblink-appointment .highlighted_date.react-calendar__tile--active

Fecha de calendario seleccionada

.futureblink-appointment .schedule-form

Formulario de reserva al cliente

.futureblink-appointment .meeting-booked

Suceso / página de confirmación

Ejemplo

.futureblink-appointment .confirm-btn {
color de fondo: #2563eb;
color: #ffffff;
frontera-radius: 8px;
}

.futureblink-appointment.mobile .confirm-btn {
de fondo: #1d4ed8;
}

ℹ️ Tú sí. no necesidad de añadir !important a sus declaraciones. Hoppy Appointments automáticamente apéndices !important cuando el CSS se inyecta en el widget, lo que ayuda a sus reglas anular los estilos predeterminados.

🛠️ Paso 4 - Aplicar el CSS

Después de entrar en su CSS, haga clic en Aplicar botón debajo del editor.

• Aplicar → permite el CSS personalizado y lo inyecta en el widget de reserva
• Reset → deshabilita el CSS personalizado y revierte el editor a la plantilla predeterminada

⚠️ CSS personalizado sólo tiene efecto después de hacer clic AplicarEl pegado CSS en el campo por sí solo no cambia la apariencia del widget.

💾 Paso 5 - Guardar y Previsualizar

1. Haga clic Guardar en la barra superior
2. Espera el mensaje de confirmación
3. Vista previa del widget de reserva en el escaparate o en el panel de vista previa del administrador

Si editas por servicio CSS, asegúrate de No siga Ajustes de Tema Predeterminado toggle está encendido, de lo contrario el CSS global todavía se utilizará.

💡 Consejos & Buenas Prácticas

• Comienzo pequeño - cambiar un elemento a la vez para que pueda ver lo que cada regla afecta
• Use selectores específicos objetivo .futureblink-appointment .your-class en lugar de amplios selectores que podrían afectar otras partes de su tienda
• Pruebas en móvil - utilizar el .futureblink-appointment.mobile prefijo para ajustar el diseño móvil por separado
• Mantenga una copia de seguridad — copiar su CSS en un archivo de notas antes de hacer clic Reset
• Utilice la configuración de diseño incorporada primero — colores, fuentes y logos son más fáciles de manejar allí y no requieren conocimiento CSS

🐞 Solución de problemas

Mi CSS no está mostrando en el escaparate

1. Asegúrate de hacer clic Aplicar en el editor Custom CSS
2. Asegúrate de hacer clic Guardar en la parte superior de la página
3. Para CSS por servicio, asegúrese de No siga Ajustes de Tema Predeterminado está encendido
4. Compruebe que sus selectores coinciden con los nombres de clase widget real
5. Limpiar el caché del navegador o probar en una ventana de incógnito

El widget revertido a la mirada predeterminada

Clicking Reset deshabilita el CSS y restaura la plantilla predeterminada. Si desea que sus reglas personalizadas vuelvan, pegarlas de nuevo y haga clic en Aplicar.

Algunas reglas no funcionan

El auto !important la inyección funciona mejor con simple property: value; declaraciones. CSS muy complejo, como @media consultas, @keyframes, o selectores anidados - no puede ser transformado fiable. Mantenga sus reglas claras para los resultados más consistentes.

📚 Artículos relacionados

• Reservas de citas — Opciones de diseño y estilo
• Cómo configurar las Ubicaciones de Reuniones para las Reservas de Nombramientos
• Cómo configurar los servicios de reserva de citas

Actualizado el: 10/09/2026