> ## 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 establecer CSS personalizado para Popups > ℹ️ **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 tus popups coincidan perfectamente con la marca de tu tienda? 🎨 Mientras tanto Hoppy Popups incluye amplias opciones de personalización de diseño, **Custom CSS** le da control completo sobre ajustes avanzados de estilo que van más allá de la configuración estándar. Ya sea que esté refinando la tipografía, ajustando el espaciamiento, creando efectos visuales únicos, o resolviendo conflictos de estilo temático específico, Custom CSS le permite personalizar sus popups exactamente de la manera que desee. --- # **⚠️ Antes de empezar** Antes de utilizar CSS personalizado: * Asegúrese de que su popup ya ha sido creado y salvado. * Tener una comprensión básica de CSS o acceso a un desarrollador. * Comprende que Custom CSS puede anular los ajustes de diseño estándar. 💡 Opciones de estilo estándar tales como colores, fuentes y espaciamiento ya están disponibles en la pestaña Diseño. Custom CSS está destinado a requisitos de estilo más avanzados. --- # **🛠️ Paso 1 - Abra su configuración de Popup** Abrir el **Hoppy Popups** app de Shopify Admin. Entonces: ➡️ Abre un popup existente. ➡️ O crear un nuevo popup si no lo has hecho ya. Navegue a la **Diseño** tab. Desplazarse hasta que encuentres **Custom CSS** sección. --- # **🎨 Paso 2 - Abra la Sección de CSS Personalizada** Dentro del **Custom CSS** sección que encontrará: * Un editor de CSS * An **Aplicar** botón * A **Reset** botón * Una plantilla CSS de inicio La plantilla incluye selectores de popup usados comúnmente, lo que hace fácil comenzar a personalizar su popup sin necesidad de identificar los nombres de clase manualmente. --- # **✍️ Paso 3 - Agregue su CSS personalizado** El editor proporciona varios selectores listos para usar para estilizar elementos popup. ### **Selectores disponibles** Selector Descripción `.futureblink-popup` Entire contenedor popup `.futureblink-popup .title` Título de la Popup `.futureblink-popup .description` Texto de la descripción del popup `.futureblink-popup .cta-button` Botón de llamada a acción `.futureblink-popup .close-btn` Cierre el botón --- ### **Selectores móviles** Para el estilo móvil específico, utilice el `.mobile` variación. Selector Descripción `.futureblink-popup.mobile` Contenedor de popup móvil `.futureblink-popup.mobile .title` Título móvil `.futureblink-popup.mobile .description` Descripción móvil `.futureblink-popup.mobile .cta-button` Botón móvil CTA `.futureblink-popup.mobile .close-btn` Botón de cierre móvil --- ### **Ejemplo CSS** Para personalizar el título popup y el botón CTA: `.futureblink-popup .title {` `color: #ff6b6b;` `font-size: 24px;` `}` `.futureblink-popup .cta-button {` `box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);` `border-radius: 8px;` `}` 💡 También puede añadir selectores adicionales, animaciones, consultas multimedia y otras reglas CSS válidas según sea necesario. --- # **📱 Paso 4 - Añadir Mobile-Specific Styling** Para aplicar estilos sólo en dispositivos móviles, utilice el `.mobile` selectores. Ejemplo: `.futureblink-popup.mobile .title {` `font-size: 18px;` `}` La aplicación se envuelve automáticamente `.mobile` selectores dentro de una consulta de medios móviles al renderizarlos en su escaparate. Esto significa que no necesita crear manualmente puntos de ruptura móviles para estos selectores. --- # **✅ Paso 5 - Aplica tu CSS** Una vez añadido su CSS: ➡️ Haga clic **Aplicar**. Las actualizaciones de la vista previa automáticamente para que pueda revisar inmediatamente sus cambios de estilo. ⚠️ Simplemente pegar CSS en el editor no lo activa. Debes hacer clic **Aplicar** antes de que los estilos se activan. Si desea eliminar su estilo personalizado: ➡️ Haga clic **Reset**. Esto restaura la plantilla predeterminada y desactiva el CSS personalizado. --- # **👀 Paso 6 - Revisar la vista previa** Después de aplicar su CSS: ➡️ Revisa la vista previa del escritorio. ➡️ Revisa la vista previa móvil. Verificar que: * El texto muestra correctamente. * Los botones siguen alineados. * El espaciamiento parece consistente. * Los efectos visuales se comportan como se espera. Si se necesitan cambios: ➡️ Actualice el CSS. ➡️ Haga clic **Aplicar** otra vez. La vista previa se actualiza automáticamente después de cada actualización. --- # **💾 Paso 7 - Guardar y publicar** Una vez satisfecho con el diseño: ➡️ Haga clic **Guardar**. ➡️ Haga clic **Publish**. ⚠️ Salvar solo no actualiza tu escaparate. El popup también debe publicarse antes de que los clientes puedan ver los cambios. --- # **⚠️ Notas importantes** ### **CSS controla los ajustes de diseño** CSS personalizado tiene precedencia sobre la mayoría de los ajustes de diseño estándar. Si un entorno de diseño parece ser ignorado, es probable que sea superado por su CSS. --- ### **Manejo móvil es automático** La aplicación convierte automáticamente `.mobile` selectores en estilos móviles sensibles. Esto hace que sea fácil mantener diseños separados de escritorio y móviles sin escribir consultas de medios personalizados. --- ### **Estilizado** Custom CSS se ve automáticamente al popup específico que se está editando. Esto ayuda a prevenir conflictos de estilo con: * Otros popups * Elementos temáticos * Otros contenidos de tienda --- ### **Reset Option** Clicking **Reset** elimina sólo el CSS personalizado. No afecta: * Ajustes de Popup * Ajustes de diseño * Plantillas * Configuración de contenidos --- ### **CSS Validation** El editor no valida la sintaxis CSS. Si un estilo no aparece correctamente: ➡️ Compruebe los nombres del selector. ➡️ Verifica los frenos y los semicolons. ➡️ Revise el CSS para errores de sintaxis. --- # **❓ Solución de problemas** Si tus estilos no aparecen correctamente: ➡️ Confirmar que **Aplicar** ha sido pinchado. ➡️ Verificar el popup ha sido **Guardado** y **Publicado**. ➡️ Compruebe que los selectores coinciden exactamente con la plantilla proporcionada. ➡️ Prueba en una ventana Incognito o navegador privado. ➡️ Refresca el escaparate a los estilos de caché claros. --- # **🎉 Resultado final** ✅ Su popup se puede personalizar más allá de la configuración de diseño estándar. ✅ Las experiencias de escritorio y móviles se pueden estilo independientemente. ✅ Los efectos visuales avanzados y el estilo de marca se hacen posibles. ✅ Los estilos personalizados permanecen aislados al popup seleccionado. Custom CSS proporciona la flexibilidad para crear una experiencia popup más pulida y coherente al tiempo que mantiene la simplicidad de las herramientas de diseño incorporadas de la aplicación. ✨