> ## 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 configurar Custom CSS para las reservas de citas App

> ℹ️ **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 **Aplicar**El 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**