La pestaña Design (Diseño) te da un control total sobre la apariencia de tu barra de anuncios en toda tu tienda. Desde los colores de fondo y la tipografía hasta las animaciones de botones, el estilo de iconos y el CSS personalizado, casi todos los detalles visuales se pueden ajustar para que coincidan con tu marca.

Puedes lanzarte rápidamente con una plantilla lista para usar o personalizar cada píxel manualmente. De cualquier manera, la barra se sentirá como una parte natural de tu tienda 🎨

La mayoría de los ajustes relacionados con el color incluyen:

• Un Color Picker (Selector de color) para la selección visual
• Una Hex Code Input (Entrada de código hexadecimal) para los colores exactos de tu marca

⚠️ Antes de comenzar

Para configurar los ajustes de Design (Diseño):

→ Abre una barra de anuncios existente
→ O crea una nueva primero

Luego haz clic en la pestaña Design (Diseño) dentro del editor.

ℹ️ Algunas opciones aparecen solo para tipos o configuraciones de barra específicos. Por ejemplo, las animaciones de deslizamiento se muestran solo para barras Multiple (Múltiples), y el estilo de cupón aparece solo cuando se usa un CTA de Coupon (Cupón). A continuación se indican estos campos condicionales para que sepas exactamente cuándo esperarlos.

🎨 Plantilla

• Qué hace: Aplica instantáneamente un estilo visual prefabricado a tu barra de anuncios.
• Cómo usarla: Elige entre más de 25 plantillas para iniciar tu diseño sin tener que modificar manualmente cada campo.

Cada plantilla rellena previamente:

• Tipo de fondo, color y ajustes de degradado
• Colores y tamaños del título y subtítulo
• Colores del botón, color del texto y radio de esquina
• Estilo del borde, icono y cupón

Las plantillas disponibles incluyen: Custom, Dawn, Black Friday, Beauty Dark, Beauty, Festiv, Forest, Dusk, Electric, Freeze, Aqua, Alert, Noon, Purple, Blue, Leaf, Party, Orange, Ocean, Yellow, Beauty Light, Greydient, Black, Navy

⚠️ Importante: Seleccionar una plantilla sobrescribirá la mayoría de los campos de diseño. Tu ajuste de Visibility (Visibilidad) y Position (Posición) (configurados en la pestaña Placement (Ubicación)) se conservan.

💡 Las plantillas son ideales para campañas de temporada. ¿Quieres un look de Viernes Negro? Selecciona la plantilla Black Friday y ajusta desde allí.

👀 Visibilidad

• Qué hace: Controla en qué dispositivos aparece tu barra de anuncios.
• Opciones:
• • Desktop and Mobile (Escritorio y móvil) — Visible en todos los dispositivos
  • Only Desktop (Solo escritorio)
  • Only Mobile (Solo móvil)

Esto es útil cuando deseas mensajes o diseños diferentes para los compradores de escritorio y móviles.

🖼️ Estilo de fondo

• Qué hace: Cambia la apariencia del fondo de la barra de anuncios.
• Opciones disponibles:
• • Single Color (Color sólido) — Un color de fondo sólido
  • Gradient (Degradado) — Dos colores mezclados a un ángulo personalizado
  • Patterns (Patrones) — Patrones de fondo decorativos

🎨 Color sólido

• Elige un color usando el Color Picker (Selector de color) o ingresa manualmente un Hex Code (código hexadecimal).

🌈 Degradado

• Gradient Angle Degree (Grado del ángulo del degradado): Controla la dirección de la mezcla (0–360°)
• Initial Color (Color inicial): El color de inicio
• Final Color (Color final): El color final

💡 Un degradado sutil puede agregar profundidad sin resultar distractor. Prueba ángulos de bajo contraste para un look moderno.

✨ Patrones

Seleccionar Patterns (Patrones) revela un menú desplegable con más de 35 opciones de fondo integradas:

• Decorativos: Wavy, Sale, Discount, Balloon, Girly, Party, Fresh
• Festivos y de temporada: Birthday, Easter Sunday, Thanksgiving, Veterans Day, Labor Day, Children's Day, Father's Day, Mother's Day, Women's Day, Carnival Monday
• Texturizados: Tiny Square, Random Grain, Puzzle, Flowers, Radial, Upholstery, Cheese

ℹ️ Los patrones se aplican como estilos de fondo CSS. Algunos usan CSS puro; otros usan recursos de imagen.

📐 Bordes y esquinas

Esta sección controla la forma y el contorno de la barra.

• Bar Corner Radius (px) (Radio de esquina de la barra en px): Qué tan redondeadas aparecen las esquinas de la barra
• Bar Padding (px) (Relleno de la barra en px): Espaciado interno entre los bordes de la barra y su contenido
• Border Size (px) (Tamaño del borde en px): Grosor del borde exterior
• Border Color (Color del borde): El color del borde

💡 Un radio de esquina de 0 da una barra rectangular con bordes afilados. Valores más altos crean formas más suaves y modernas.

🔤 Tipografía

Esta sección controla cómo aparece todo el texto en la barra de anuncios.

📝 Estilo del título

• Title Size (px) (Tamaño del título en px): El tamaño del mensaje principal
• Title Color (Color del título): El color del mensaje principal

📄 Estilo del subtítulo

• Subheading Size (px) (Tamaño del subtítulo en px): El tamaño del texto de apoyo
• Subheading Color (Color del subtítulo): El color del texto de apoyo

ℹ️ El campo de subtítulo se oculta cuando se usa el tipo de barra Running (En ejecución), ya que las barras de marquesina normalmente usan una sola línea de texto.

🔠 Fuente

Elige entre 63 fuentes disponibles, incluyendo:

• Fuentes del sistema: Helvetica, Arial, Tahoma, Times New Roman, Georgia, Courier New, Segoe UI, y más
• Google Fonts: Roboto, Montserrat, Open Sans, Poppins, Playfair Display, Lato, Inter, Oswald, Raleway, Nunito, Lobster, Pacifico, Bebas Neue, Anton, Dancing Script, y muchas más

La primera opción es Use your theme font (Usar la fuente de tu tema), que coincide automáticamente con la tipografía existente de tu tienda.

💡 Para una mejor legibilidad, usa 1 o 2 fuentes por barra. Una fuente display audaz para el título y una sans-serif limpia para el subtítulo suelen funcionar bien.

🔘 Diseño del botón

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

ℹ️ Estos ajustes siempre están disponibles en la pestaña Design (Diseño). Afectan la tienda solo cuando tu tipo de CTA está configurado en Button (Botón), Full Bar (Barra completa) o Trigger (Disparador).

🎨 Color del botón

• Cambia el color de fondo del botón CTA.

🔤 Tamaño y color del texto del botón

• Size (px) (Tamaño en px): Controla el tamaño del texto dentro del botón
• Color (Color): Cambia el color del texto del botón

⭕ Radio de esquina y estilo del botón

Estos dos campos están vinculados:

• Corner Radius (px) (Radio de esquina en px): Escribe manualmente un valor para controlar el redondeo
• Button Style (Estilo del botón): Cambia rápidamente entre preajustes:
• • Square (Cuadrado) → establece el radio en 0 px
  • Rounded (Redondeado) → establece el radio en 10 px
  • Fully Rounded (Completamente redondeado) → establece el radio en 30 px

Cuando seleccionas un estilo predefinido, el radio de esquina se actualiza automáticamente. Cuando escribes un radio personalizado, el estilo predefinido se actualiza para coincidir:

• 0–9 px → Square (Cuadrado)
• 10–29 px → Rounded (Redondeado)
• 30+ px → Fully Rounded (Completamente redondeado)

💪 Grosor de fuente

• Controla qué tan negrita o ligera aparece el texto del botón
• Opciones: Normal, Bold, 100–900

✍️ Estilo de fuente

• Alterna entre: Normal, Italic, Underline

✨ Animación del botón

Agrega una animación continua al botón para ayudar a que destaque.

Animaciones disponibles: None, Emitting, Bounce, Flash, Rubber Band, Swing, Tada, Wobble, Jello, Flip

💡 Animaciones sutiles como Bounce o Emitting llaman la atención sin sentirse agresivas. Usa Flip o Tada para campañas de alta urgencia.

🏷️ Diseño de cupón

Esta sección personaliza la apariencia del cuadro de código de cupón.

ℹ️ Esta sección aparece solo cuando:

• Alguna diapositiva de contenido usa Coupon (Cupón) como tipo de CTA, o
• El tipo de barra está configurado en Email (Correo electrónico)

Ajustes disponibles

• Coupon Border Style (Estilo del borde del cupón): Dashed, Solid, Dotted, Double, Groove, Ridge, Inset, Outset o None
• Coupon Border Color (Color del borde del cupón): El color del contorno del cuadro de cupón
• Coupon Text Color (Color del texto del cupón): El color del texto del código de cupón
• Coupon Background (Fondo del cupón): El color de fondo del cuadro de cupón (admite fondos transparentes)

💡 Un borde dashed con un fondo de contraste es el look clásico de cupón. Prueba un fondo semitransparente si quieres que el patrón o degradado de la barra se muestre a través del cupón.

🎆 Animaciones de la barra

Transición de barra múltiple

Disponible solo cuando el tipo de barra está configurado en Multiple (Múltiple).

Controla cómo se transfieren las diapositivas entre sí:

• Slide (Deslizar) — Se desplaza horizontalmente entre anuncios
• Fade In (Desvanecer) — Se desvanece suavemente de una diapositiva a la siguiente
• Cube (Cubo) — Un efecto de rotación de cubo 3D
• Flip (Voltear) — Un efecto de transición de volteo de carta

ℹ️ Este ajuste se encuentra en la pestaña Design (Diseño), no en la pestaña Content (Contenido).

🎨 Ajustes de iconos

🚪 Color del icono de cierre

• Cambia el color del icono del botón de cerrar (descartar).
• Solo es visible cuando la opción Close Icon (Icono de cierre) está habilitada en la pestaña Content (Contenido).

➡️ Color del icono de flecha

• Cambia el color de las flechas de navegación.
• Solo es visible cuando el tipo de barra está configurado en Multiple (Múltiple), ya que las flechas se usan para navegar entre diapositivas.

👥 Iconos del banner (iconos sociales)

Esta sección da estilo a los iconos de redes sociales que aparecen dentro de la barra.

• Social Icon Size (px) (Tamaño del icono social en px): Ajusta el tamaño del icono
• Social Icon Color (Color del icono social): Cambia el color del icono
• Social Icon Position (Posición del icono social): Coloca los iconos en el lado Left (Izquierdo) o Right (Derecho) de la barra
• Use Original Social Icon Color (Usar color original del icono social): Cuando está habilitado, cada plataforma conserva su color de marca (azul de Facebook, degradado de Instagram, etc.) en lugar de usar tu color personalizado

ℹ️ Los iconos sociales se configuran en la pestaña Content (Contenido). La pestaña Design (Diseño) solo controla cómo se ven.

💻 CSS personalizado (para usuarios avanzados)

💡 Función avanzada: Si necesitas un estilo que no está disponible en los ajustes estándar, puedes escribir tu propio CSS directamente en el editor.

Cuando está habilitado, se proporciona un esqueleto de CSS con clases objetivo predefinidas:

• Contenedor completo de la barra: .futureblink-announcement-bar
• Texto del título: .futureblink-announcement-bar .title
• Texto del subtítulo: .futureblink-announcement-bar .subheading
• Título móvil: .futureblink-announcement-bar.mobile .title
• Subtítulo móvil: .futureblink-announcement-bar.mobile .subheading
• Botón CTA: .futureblink-announcement-bar .cta-button
• Botón CTA móvil: .futureblink-announcement-bar.mobile .cta-button
• Botón de cierre: .futureblink-announcement-bar .close-btn
• Flechas de navegación: .futureblink-announcement-bar .arrow
• Botones anterior/siguiente: .futureblink-announcement-bar .button-prev y .button-next

Cómo funciona el CSS personalizado en la tienda:

• Todos los selectores se aplican automáticamente a tu barra de anuncios específica
• Cada declaración recibe prioridad !important para anular los estilos del tema
• Los selectores móviles (.mobile) se envuelven automáticamente en una media query móvil
• El CSS se inyecta como una etiqueta <style> cuando se renderiza la barra

⚠️ Ten en cuenta: El CSS personalizado es poderoso, pero puede entrar en conflicto con los estilos del tema. Prueba exhaustivamente tanto en escritorio como en móvil después de aplicar los cambios.

🛒 Diseño de checkout

Disponible solo para barras de anuncios colocadas en la Checkout Page (Página de checkout) (Shopify Plus requerido).

Cuando la pestaña Placement (Ubicación) está configurada en Checkout Page (Página de checkout), la pestaña completa de Design (Diseño) se reemplaza por un panel simplificado:

• Checkout Title Size (Tamaño del título de checkout) — Extra Small, Small, Base, Medium, Large, Extra Large
• Checkout Title Color (Color del título de checkout) — Blue, Dull Grey, Black, Green, Yellow, Red
• Checkout Subheading Size (Tamaño del subtítulo de checkout) — Las mismas opciones de tamaño
• Checkout Subheading Color (Color del subtítulo de checkout) — Las mismas opciones de color

ℹ️ El diseño de checkout usa los tokens de tono nativos de Shopify para un estilo consistente dentro del entorno de checkout. Los degradados, patrones, botones y CSS personalizado no están disponibles en las barras de checkout.

🚀 Resultado final

Una vez configurada correctamente, la configuración de Design & Styling (Diseño y estilo) te ayuda a crear una barra de anuncios visualmente consistente y profesional que se siente como una parte natural de tu tienda.

Con el estilo adecuado en su lugar:

✅ La barra se alinea con los colores y la tipografía de tu marca
✅ Los mensajes importantes se vuelven más notorios y legibles
✅ Los botones y CTAs destacan sin resultar intrusivos
✅ Los patrones y degradados de fondo agregan personalidad visual
✅ Las transiciones de diapositivas se sienten suaves y pulidas
✅ Las experiencias móvil y de escritorio se optimizan de forma independiente
✅ Los usuarios avanzados pueden ampliar el estilo con CSS personalizado

Usar estas opciones de diseño y estilo de manera efectiva garantiza que cada barra de anuncios se sienta intencional, alineada con tu marca y fácil de interactuar para los clientes ✨

Actualizado el: 01/09/2026