ℹ️ 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. 🚀

Actualizado el: 10/09/2026