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

La pestaña Diseño le da control completo sobre cómo su temporizador de cuenta atrás se ve en su escaparate. De colores y fuentes a animaciones de temporizador y patrones de fondo, casi todos los detalles visuales se pueden personalizar para que coincida con su marca.

Puedes:

• lanzamiento rápido utilizando plantillas pre-hechas
• O profundamente personalizar cada detalle visual manualmente

Esta guía descompone cada opción de diseño para que pueda construir cuentas que se sientan nativas de su tienda ✨

⚠️ Antes de empezar

Para configurar la configuración de diseño:

→ Abrir una configuración del temporizador de cuenta atrás existente
→ O crear un nuevo temporizador de cuenta atrás primero

Entonces navega por el Diseño tab dentro del editor de cuenta atrás.

ℹ️ Las opciones de diseño disponibles cambian dependiendo de cuál Tipo de colocación Usted ha seleccionado. Por ejemplo, los contadores de página de checkout usan Shopify's sistema de diseño y ofrecen menos opciones de personalización.

🎨 Plantilla & Visibilidad

Esta sección controla el punto de partida visual general y la visibilidad del dispositivo para su cuenta regresiva.

Plantillas pre-hechas

El Plantilla dropdown le permite aplicar al instante un estilo visual completo. Hay 24 plantillas incorporadas para elegir, incluyendo:

• Dawn - Limpio y mínimo
• Electricidad - Bold y enérgico
• Forest - Tonos naturales de la tierra
• Neon - Brillante y llamativo
• Minimal - Sencillez destripada
• Mint - Suave y fresca
• Bubble Gum - Juguete y colorido
• Y muchos más

Selección de una plantilla rellena automáticamente:

• Colores de fondo o gradientes
• Estilos de frontera
• Colores y tamaños de tipografía
• Button Styling

💡 Si elige una plantilla y ajusta manualmente los ajustes individuales, sus cambios se conservan. Seleccionar una nueva plantilla más tarde sobreescribirá tus valores personalizados.

ℹ️ Para Página, Cart Drawer, y Top/Bottom Bar colocaciones, plantillas preservan su existente tamaño del título, tamaño del tiempo, y tamaño separador en lugar de sobreescribirlos.

Visibilidad

Controla los dispositivos que su cuenta regresiva aparece en:

• Escritorio y móvil — Visible en todas partes (por defecto)
• Solo para escritorio — Oculto en dispositivos móviles
• Solo móvil — Oculto en el escritorio

Posición " Conductor pegajoso "

Estas opciones sólo aparecen para Top/Bottom Bar Cuenta atrás.

• Posición — Elija Top o Bottom de la página
• Sticky — Aparece sólo cuando la posición se establece en la parte superior. Cuando está habilitado, la barra permanece fija en la parte superior de la pantalla mientras los clientes se desplazan.

Estilo del temporizador

Esta sección controla cómo se muestran los dígitos de cuenta atrás.

ℹ️ Esta sección es no disponible para Página, Cart Drawer, Página de inicioo Página de inicio Cuenta atrás.

Estilos disponibles

• Reloj Flip — Classic 3D flip animación para cada dígito
• Azulejos dobles Cada dígito obtiene su propio mini tile
• Números bajos — dígitos limpios sin caja de fondo
• Azulejos cuadrados — Números dentro de cajas cuadradas redondeadas
• Azulejos de círculo — Números dentro de cajas circulares
• No, esconde temporizador - Elimina los dígitos del temporizador por completo

Color de fondo del temporizador

Este selector de color aparece sólo cuando selecciona:

• Reloj Flip
• Azulejos dobles
• Azulejos cuadrados
• Azulejos de círculo

Lo hace no aparece Números bajos o Ninguno.

Para los estilos de reloj de vuelta, la mitad inferior de cada tila de giro se renderiza automáticamente en una sombra ligeramente más ligera de su color seleccionado. Esto crea el efecto de giro 3D realista en el escaparate.

🖼️ Antecedentes

Esta sección controla la apariencia de fondo de su contenedor de cuenta atrás.

ℹ️ Esta sección es no disponible para Página de inicio Cuenta atrás.

Tipos de fondo

• Color individual - Un color de fondo sólido
• Gradiente — Dos colores mezclados en un ángulo que controla
• Tri color gradiente — Tres colores mezclados en un ángulo que controla
• Patrones - Superposiciones de fondo decorativo

Color individual

Elija un color usando el Color Picker o entrar en Hex Code directamente.

Gradiente

Cuando se selecciona, aparecen tres campos adicionales:

• Grado en Angle — Controla la dirección (0° a 360°)
• Color inicial — El color inicial
• Color final — El color final

Tri Color Gradiente

Cuando se selecciona, aparecen cuatro campos adicionales:

• Grado en Angle
• Color inicial
• Color intermedio — El color medio
• Color final

Patrones

Cuando se selecciona, un Patrón deserción aparece con 37 opciones incorporadas, incluyendo:

• Pequeños cuadrados, grano al azar, rompecabezas, flores
• Temas estacionales: cumpleaños, globo, carnaval, estero, día de los padres, día de las madres, acción de gracias, día de veteranos, día de las mujeres
• Venta enfocada: venta, descuento, tapicería, fresco, ondulado
• Y más

Algunos patrones incluyen superposiciones oscuras sutiles para mantener el texto legible.

📐 Frontera

Esta sección controla el contorno de su contenedor de cuenta atrás.

ℹ️ Esta sección es no disponible para Página de inicio Cuenta atrás.

Estilo de frontera

Elija entre:

• Ninguno, Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset

Campos fronterizos condicionales

Los siguientes campos aparecen sólo cuando el Estilo Fronterizo no es "no":

• Radius fronterizo (px) - ¿Qué tan redondeado aparecen las esquinas
• Tamaño de la frontera (px) - Espesor de la línea fronteriza
• Color de la frontera — Color de la frontera

⚠️ Si selecciona un estilo de frontera mientras que el tamaño todavía está fijado a 0, la aplicación automáticamente lo establece a 2px Así que la frontera se hace visible.

📏 Spacing

Esta sección controla el espaciado interno y externo alrededor de su cuenta regresiva.

ℹ️ Esta sección es no disponible para Página de inicio Cuenta atrás.

Campos disponibles

• Parte superior (px) — Espacio entre el contenido y el borde superior
• Bottom interior (px) — Espacio entre el contenido y el borde inferior
• Parte superior exterior (px) — Espacio entre la cuenta atrás y elementos por encima de ella
• Bottom exterior (px) — Espacio entre la cuenta atrás y elementos debajo de ella

💡 Piensa en "inside" como relleno y "outside" como margen. El aumento del espacio exterior ayuda a separar la cuenta regresiva de elementos de página cercanos.

🔤 Tipografía

Esta sección controla cómo aparecen todos los elementos de texto. Los campos exactos disponibles dependen de su ubicación de cuenta atrás.

ℹ️ Esta sección es no disponible para Página de inicio Cuenta atrás.

Fuente Familia

Elija entre Opciones de fuente 60+, incluyendo:

• Usa tu fuente de tema - Concuerda con tu Shopify tema automáticamente
• Fuentes del sistema: Helvetica, Arial, Tahoma, Times New Roman, Georgia, Courier New, Segoe UI, Impact, and more
• Google Fuentes: Roboto, Montserrat, Open Sans, Poppins, Inter, Playfair Display, Oswald, Raleway, Nunito, Lobster, Pacifico, Bebas Neue, Anton, Dancing Script, y muchos más

ℹ️ Si seleccionas una fuente de Google, la aplicación la carga automáticamente de Google Fonts en tu escaparate. Las fuentes de sistema y "Utilice su fuente de tema" no activan solicitudes externas.

Tipografía Elementos por Colocación

Cada elemento tiene su propio Tamaño (px) y Color campos:

Página de productos, página de aterrizaje y posición personalizada

• Título — Título principal de cuenta atrás
• Subheading — Mensaje secundario debajo del título
• Timer — Los dígitos de cuenta atrás mismos
• Time Labels — Los "Días", "Hours", "Minutes", "Seconds" texto
• Mensaje extendido — Shown cuando el temporizador se extiende (aparece solamente si su acción final se establece para "Extienda")

Cart Page and Cart Drawer

• Título - Generalmente contiene {timer} variable inline
• Timer — Los dígitos de cuenta atrás en vivo
• Mensaje extendido — Aparece sólo si la acción final es "Extender"

ℹ️ Las colocaciones relacionadas con el carrito sí no mostrar Opciones de tipografía Subheading o Time Labels.

📊 Progress Bar

Esta sección personaliza el indicador de progreso visual mostrado arriba o debajo del temporizador.

ℹ️ Esta sección es sólo disponible para Página, Landing Page, y Posición personalizada Cuenta atrás.

Cuando aparece

La tarjeta de diseño de Progress Bar aparece sólo si habilitaste la barra de progreso en la Índice pestaña primero.

Si la barra de progreso no está habilitada en Contenido, toda esta tarjeta está oculta.

Configuración de barras de progreso

• Color de fondo — El color de la porción sin rellenar de la barra (por defecto: gris claro)
• Bar Color — El color de la porción llena (por defecto: negro)

Comportamiento frontal

La barra de progreso es una barra redondeada de 8 px que llena proporcionalmente sobre la base del tiempo restante. Actualiza cada segundo con una suave animación de transición de 1 segundo.

Separador

Esta sección controla los caracteres que aparecen entre unidades de tiempo (entre días, horas, minutos y segundos).

Lugares no verificados

• Separador de caracteres — Elige de:
• • : Colon
  • - Hyphen
  • . Período
  • | Barra vertical
  • / ¡Adelante!
  • Espacio (negro)
• Tamaño del separador (px)
• Color del separador — Hex color picker

Página de inicio

Porque las cuentas de salida usan Shopify's Checkout UI Extension framework, separator styling está limitado a Shopify's fichas predefinidas:

• Tamaño del separador — extraSmall, small, base, medium, large, extraLarge
• Color del separador — accent (azul), subdued (grito), info (negro), success (verde) warning (amarillo), critical (rojo)

🔘 Button Design

Esta sección personaliza el botón de llamada a acción.

ℹ️ Esta sección es sólo disponible para Top/Bottom Bar, Landing Page, y Posición personalizada Cuenta atrás.

Button Animation Style

Añade una animación continua de bucle al botón:

• Ninguno - Botón estatico
• Shake - Un suave batido de lado a lado
• Pulso - Efecto de escalada rítmica
• Zoom - Ampliación y contratos
• Slide — movimiento deslizante sutil
• Fade - Pulso de velocidad
• Spin - Efecto rotativo
• Pop - Botín de escala rápida
• Blink - Breve efecto de parpadeo

Button Hover Effects

Añade un efecto interactivo cuando los clientes saltan sobre el botón:

• Ninguno
• Glow — Resplandor gradiente alrededor del botón
• Blob - Efecto morfológico del bloque orgánico
• Pulso de palanca - Pulses sobre ratón
• Botón N° 045 — Un estilo de preset numerado
• Botón de flujo
• Cierre el botón derecho
• Smoosh, Overleap, Collision
• Button burbuja — Efecto del pop de burbujas
• Squishy
• Máscara 1, Máscara 2, Máscara 3
• Gooey Button
• Botón 3D — Efecto de profundidad tridimensional

Ajustes adicionales de botón

• Button Color — Color de fondo del botón
• Tamaño del texto del botón (px)
• Color de texto de botón
• Radius fronterizo (px) — Cuán redondeadas están las esquinas del botón

📝 Diseño de mensajes personalizados

Esta sección aparece sólo cuando la acción final de su cuenta regresiva se establece Mostrar mensaje personalizado o Extender temporizador.

Controla la tipografía de los clientes del mensaje ver después de que el temporizador termine.

Campos disponibles

• Tamaño del título personalizado (px) + Color
• Tamaño de subpartida personalizado (px) + Color

ℹ️ Si tu acción final incluye múltiples intervalos de extensión y cualquiera de ellos usa un mensaje personalizado, esta tarjeta se vuelve visible.

❌ Cerrar Icon

Esta sección personaliza el botón de desestimación para las barras de cuenta atrás.

ℹ️ Esta sección es sólo disponible para Top/Bottom Bar Cuenta atrás.

Prerrequisito

El icono cercano debe ser habilitado primero en el Índice pestaña usando la Cerrar Icon buzón de verificación. Si no está habilitado allí, esta tarjeta de diseño no tiene efecto.

Cerrar Icon Color

Elija un color hex para el icono X. El icono se coloca en el borde derecho de la barra y se centra verticalmente.

Comportamiento frontal: Cuando un cliente hace clic en el icono cercano, la barra está oculta usando el almacenamiento del navegador y no volverá a aparecer durante esa sesión.

💻 Custom CSS

Para los comerciantes que necesitan estilizar más allá de las opciones incorporadas, puede escribir su propio CSS.

ℹ️ Esta sección es no disponible para Página de inicio Cuenta atrás.

Clases de destino disponibles

El editor incluye una plantilla predeterminada con estas clases de destino:

.futureblink-countdown-timer { }
.futureblink-countdown-timer .title { }
.futureblink-countdown-timer .subheading { }
.futureblink-countdown-timer .cta-button { }
.futureblink-countdown-timer .close-btn { }

Cómo aplicar

1. Introduzca su CSS en el área de texto
2. Haga clic Aplicar
3. Los estilos se inyectan en el escaparate automáticamente

⚠️ La aplicación automáticamente anexa !important a cada propiedad CSS cuando se aplica, lo que ayuda a anular los conflictos temáticos. Si un estilo no parece funcionar inmediatamente, trate de ahorrar y refrescar su escaparate.

📍 Diseño por ubicación

Las diferentes ubicaciones de cuenta atrás tienen diferentes capacidades de diseño basadas en limitaciones técnicas.

Página de producto, Página de aterrizaje, Posición personalizada

Estas colocaciones ofrecen la experiencia de diseño más completa:

✅ Todas las plantillas
✅ Todos los estilos del temporizador (flip, azulejos, llano, etc.)
✅ Opciones de fondo completas (single, gradiente, tri-gradiente, patrones)
✅ Frontera, espaciamiento, barra de progreso
✅ Controles de tipografía completos
❌ Diseño de botones — no disponible para páginas de productos
✅ Custom CSS

Top / Bottom Bar

Opciones de diseño casi completas con algunas adiciones específicas de colocación:

✅ Posición (top/bottom) y toggle pegajoso
✅ Diseño de iconos
✅ Diseño de botones
✅ Todos los estilos y fondos del temporizador
✅ Custom CSS
❌ Barra de progreso - no disponible para barras

Cart Page, Cart Drawer, Cart Page Standalone

Diseño simplificado enfocado en mensajería en línea:

✅ Antecedentes, frontera, espaciamiento, separador
✅ Titulo y tipografía del temporizador
✅ Custom CSS
❌ Estilo de temporizador - siempre texto en línea
❌ Progresos
❌ Diseño de botones
❌ Tipografía de subpartida y etiquetas de tiempo

Página de inicio

Heavily restricted due to Shopify Extensiones de la interfaz de usuario:

✅ Tamaño y color del separador (sólo las fichas de Polaris)
✅ Tamaño y color del título (sólo fichas de Polonia)
✅ Tamaño y color del temporizador (polaris fichas solamente)
❌ Plantillas
❌ Antecedentes, frontera, espaciamiento
❌ Estilos de temporizador — texto simple solamente
❌ Progresos
❌ Button Styling
❌ Cerrar icono
❌ Custom CSS
❌ Selección familiar de fuentes

⚠️ Notas importantes

Plantillas Sobreescribir Valores Personalizados

Cuando selecciona una plantilla prehecha, reemplaza la mayoría de los valores de diseño. Si ya has personalizado colores y tamaños manualmente, guarda tu trabajo antes de experimentar con plantillas.

Limitaciones de salida son plataforma-Level

Las opciones de diseño restringidas en las páginas de registro son impuestas por Shopify's Checkout UI Extension framework. Estas no son limitaciones de aplicaciones - aseguran que su cuenta regresiva sigue siendo compatible con ShopifyEs un entorno de control seguro.

Las Timers de Carritos siempre están tristes

Conteos relacionados con el carro hacen que el temporizador sea un texto simple en línea porque la cuenta regresiva generalmente está incrustada dentro de una frase usando la {timer} variable. Los relojes Flip y los estilos de azulejos romperían el flujo de frase visualmente.

Escalada de tiempo móvil

En pantallas más pequeñas que 633px de ancho, los tamaños de dígitos de tiempo se reducen automáticamente (normalmente en un 33%) para prevenir el desbordamiento y mantener la legibilidad en dispositivos móviles.

💡 Use casos " Ejemplos

Minimal Product Page Timer

→ Colocación: Página del producto
→ Estilo del temporizador: Números de línea
→ Antecedentes: Color único (blanco o transparente)
→ Frontera: Ninguno
→ Tipografía: Título pequeño, temporizador medio, separador sutil

Bold Top Bar Anuncio

→ Colocación: Top/Bottom Bar
→ Posición: superior + pegajoso
→ Plantilla: Neon o Electric
→ Estilo del temporizador: reloj Flip o azulejos cuadrados
→ Animación de botón: Pulso
→ Cerrar icono: Activado con el color de juego

Venta de página de aterrizaje estacional

→ Lugar: Página de aterrizaje
→ Antecedentes: Patrón (por ejemplo, cumpleaños, carnaval o tema de temporada)
→ Estilo del reloj: azulejos del círculo
→ Barra de Progreso: Activado con colores de marca
→ Botón: esquinas redondeadas con efecto de resplandor

🎉 Resultado final

Una vez configurado con éxito, los ajustes Design & Styling le ayudan a crear recuentos que se sienten como una parte natural de su escaparate.

✅ Cuenta atrás coinciden con los colores de su marca y la tipografía
✅ Los estilos Timer crean el nivel adecuado de urgencia visual
✅ Los antecedentes y patrones establecen el estado de ánimo para cada campaña
✅ Los botones destacan con animaciones y efectos de tolva
✅ El espacio y las fronteras dan su cuenta regresiva pulido profesional
✅ Custom CSS desbloquea flexibilidad de diseño ilimitada
✅ Cada tipo de colocación respeta sus propias limitaciones de diseño

Utilizando estas opciones de diseño correctamente garantiza que sus temporizadores de cuenta atrás se ven intencionales, profesionales y alineados con el resto de su tienda ✨

Actualizado el: 10/09/2026