> ## 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 las barras de contadores > ℹ️ **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 tu temporizador de cuenta atrás o bar para que coincida perfectamente con tu marca de tienda? 🎨 Mientras que la aplicación incluye amplios controles de diseño, a veces necesita flexibilidad adicional para personalizar detalles específicos de estilo. El **Custom CSS** característica le permite aplicar sus propias reglas de CSS a los temporizadores de cuenta atrás y barras para la personalización visual avanzada. Esta guía camina a través de todo lo que necesita saber acerca de añadir y gestionar CSS personalizado para las colocaciones de cuenta atrás. --- # **⚠️ Antes de empezar** Antes de utilizar CSS personalizado: * Asegúrese de que ya ha creado un temporizador de cuenta atrás o barra de cuenta atrás. * Asegúrese de tener acceso a la **Diseño** tab dentro del editor de cuenta atrás. * Tenga una comprensión básica de CSS o acceso a un desarrollador que puede ayudar. ⚠️ **Importante:** CSS personalizado **no disponible para las cuentas de página de Checkout**. Porque... Shopify El checkout utiliza un marco de extensión UI seguro, la inyección de CSS externa está restringida por Shopify. Custom CSS es plenamente compatible con: * Páginas de productos * Landing Pages * Top Bars * Bottom Bars * Páginas de Carrito * Carritos * Correo electrónico --- # **🛠️ Paso 1 - Abra la pestaña de diseño** Abra el temporizador de cuenta atrás o bar que le gustaría personalizar. Entonces: ➡️ Haga clic en **Diseño** tab. Desplazarse hasta que encuentres **Custom CSS** sección. 💡 CSS personalizado trabaja en la parte superior de la configuración de diseño existente, plantillas, colores y selecciones tipográficas. --- # **🎨 Paso 2 - Abra la Sección de CSS Personalizada** Dentro de la pestaña Diseño: ➡️ Localizar el **Custom CSS** tarjeta. Dentro de esta sección encontrarás: * Un editor de CSS * Una plantilla CSS de inicio * An **Aplicar** botón La plantilla de arranque incluye selectores de uso común, facilitando la personalización de la cuenta regresiva sin necesidad de identificar los nombres de clase manualmente. --- # **✍️ Paso 3 - Agregue su CSS personalizado** El editor incluye varios selectores listos para usar. ### **Selectores disponibles** Selector Descripción `.futureblink-countdown-timer` Entire contenedor de cuenta regresiva `.futureblink-countdown-timer .title` Texto del título principal `.futureblink-countdown-timer .subheading` Texto siguiente `.futureblink-countdown-timer .cta-button` Botón de llamada a acción `.futureblink-countdown-timer .close-btn` Cerrar icono --- ### **Ejemplo CSS** Para hacer el título audaz y cambiar su color: .futureblink-countdown-timer .title { font-weight: 700; color: #ff6600; } 💡 También puede agregar sus propios selectores, consultas de medios, animaciones y reglas adicionales de CSS según sea necesario. --- # **✅ Paso 4 - Aplicar su CSS** Después de entrar en su CSS: ➡️ Haga clic **Aplicar**. Una vez activado, el **Aplicar** botones cambios **Reset**, indicando que sus estilos personalizados están activos. ### **Lo que sucede automáticamente** La aplicación realiza automáticamente varias acciones detrás de las escenas: * Inyecte su CSS en el escaparate. * Adds `!important` prioridad cuando sea necesario. * Estilos de tubos a la configuración actual de cuenta atrás. * Evita los conflictos de estilo con otras cuentas. Esto ayuda a asegurar que su CSS funciona consistentemente a través de su tienda. --- # **💾 Paso 5 - Guardar y publicar** Después de aplicar su CSS: ➡️ Haga clic **Guardar**. ➡️ Haga clic **Publish**. ⚠️ Salvar solo no actualiza el escaparate. La cuenta regresiva también debe publicarse antes de que los clientes puedan ver los cambios. --- # **👀 Paso 6 - Verificar los cambios** Después de publicar: ➡️ Abre tu tienda. ➡️ Navegue a la página donde aparece la cuenta atrás. ➡️ Refresca la página. Si los estilos actualizados no aparecen inmediatamente, realice un refresco duro: **Windows** `Ctrl + Shift + R` **Mac** `Cmd + Shift + R` Si se necesitan nuevos ajustes: ➡️ Vuelve al editor. ➡️ Actualice el CSS. ➡️ Haga clic **Aplicar**, **Guardar**, y **Publish** otra vez. --- # **⚠️ Notas importantes** ### **Limitación de página de checkout** CSS personalizado no está disponible en las cuentas de página de salida porque Shopify's Checkout UI Extensiones operan dentro de un entorno seguro que restringe la inyección personalizada CSS. ### **Manejo automático !importante** La aplicación añade automáticamente `!important` prioridad a las declaraciones de CSS al hacer estilos en el escaparate. Si `!important` ya está presente, la aplicación evita aplicarla dos veces. ### **Estilizado** Cada cuenta regresiva recibe su propio alcance de estilo aislado. Esto significa: ✅ Diferentes cuentas pueden tener diferentes diseños. ✅ Los estilos permanecen aislados a la cuenta regresiva seleccionada. ✅ Otros elementos de página siguen sin ser afectados. ### **Reset Option** Clicking **Reset** sólo elimina CSS personalizado. No afecta: * Plantillas * Colores * Tipografía * Ajustes de diseño * Configuración de cuenta atrás ### **View Guide** La sección de CSS personalizado también incluye una **View Guide** enlace que proporciona referencias adicionales de CSS cuando sea necesario. --- # **❓ Solución de problemas** Si tus estilos no aparecen correctamente: ➡️ Verificar eso **Aplicar** ha sido pinchado. ➡️ Confirma la cuenta regresiva **Guardado** y **Publicado**. ➡️ Compruebe que los selectores coinciden exactamente con los nombres de clase proporcionados. ➡️ Prueba usando una ventana del navegador Incognito o Privado. ➡️ Realice un refrigerio duro para limpiar estilos caché. --- # **🎉 Resultado final** ✅ Su temporizador o bar de cuenta atrás refleja los requisitos de estilo de su marca. ✅ Los conflictos de estilo temático se minimizan mediante la gestión automática de prioridades CSS. ✅ Cuentas individuales pueden ser estilo independiente. ✅ Los estilos personalizados permanecen aislados sin afectar a otros elementos del escaparate. Custom CSS proporciona una manera flexible para los diseños de cuenta regresiva fina y manteniendo el resto de su configuración simple y fácil de manejar. 🚀