Barra de anuncios

Enlaces destacados

1. Documentación de Shopify sobre secciones y bloques
2. Documentación de Company XYZ sobre el bloque de botones
3. Documentación de Company XYZ sobre el bloque de icono con texto
4. Documentación de Company XYZ sobre el bloque de selectores de localización
5. Documentación de Company XYZ sobre el bloque de menú principal
6. Documentación de Company XYZ sobre el bloque de iconos de redes sociales
7. Documentación de Company XYZ sobre los ajustes de fondo de sección
8. Documentación de Company XYZ sobre los ajustes de espaciado de sección
9. Documentación de Company XYZ sobre los ajustes de separadores
10. Documentación de Company XYZ sobre los ajustes de visibilidad
11. Documentación de Company XYZ sobre los ajustes de anchos de diseño

Videos útiles

Vídeo de Shopify Academy: Cómo editar una barra de anuncios en Shopify Online Store 2.0 || Centro de ayuda de Shopify

Vídeo de Shopify Academy: Cómo editar una barra de anuncios en Shopify Online Store 2.0 || Centro de ayuda de Shopify

Use la barra de anuncios para colocar un mensaje compacto y un área de utilidades encima del encabezado principal. Puede mostrar un anuncio simple con un enlace y un menú, o una combinación más flexible de bloques, como botones, menús, selectores de localización, texto enriquecido e iconos sociales. Para una vista general más amplia de los diseños del tema, consulte la documentación de Shopify sobre secciones y bloques

De forma predeterminada, la sección usa el texto del anuncio, el enlace y el menú en los ajustes principales de la sección. Si añade bloques, el diseño de bloques toma el control para que pueda organizar la barra con más precisión.

Añadir bloques anula la salida predeterminada del texto del anuncio y del menú de los ajustes de la sección. Use un enfoque u otro para evitar confusiones mientras configura la barra.

Ajustes principales

Use los ajustes principales para una barra superior sencilla sin crear un diseño personalizado. Esta es la opción más rápida cuando solo necesita un mensaje promocional breve, un enlace opcional y un menú de utilidades simple.

Mantenga el texto del anuncio breve para que siga siendo legible en todos los dispositivos. Si necesita varios tipos de contenido, distintas zonas de alineación o diseños específicos por dispositivo, cambie a bloques en lugar de intentar que todo encaje en la configuración predeterminada.

Ajustes de color

Use estos controles de color de la sección para reemplazar los colores más amplios del tema en el texto y los iconos de la barra de anuncios. Esto resulta útil cuando la barra necesita destacar por una promoción, una alerta o una campaña de temporada.

Si también usa un fondo personalizado, compruebe cuidadosamente el contraste. La legibilidad clara importa más aquí que el estilo decorativo porque esta barra está pensada para revisarse rápidamente.

Tipos de bloque admitidos

1. Botón
2. Icono con texto
3. Selectores de localización
4. Menú principal
5. Texto enriquecido
6. Iconos de redes sociales

La mayoría de los bloques de esta sección también incluyen sus propios controles de diseño, alineación y visibilidad. Use esos ajustes para colocar los elementos a la izquierda, en el centro, a la derecha o en su propia fila, y para simplificar la barra en pantallas más pequeñas.

Botón

Use el bloque Botón para una acción clara, como una página de oferta, un enlace de registro o una página de soporte. Consulte el Botón.

Los estilos de botón más pequeños suelen adaptarse mejor a esta sección. Si la barra ya contiene varios elementos, evite estilos de botón demasiado grandes que puedan hacer que el área del encabezado se vea abarrotada.

Icono con texto

Use este bloque para avisos breves, como envío gratuito, devoluciones fáciles u ofertas por tiempo limitado. Consulte el Icono con texto.

Mantenga el mensaje breve y directo. Este bloque es más eficaz cuando refuerza una ventaja clave de un vistazo.

Selectores de localización

Use este bloque para mostrar selectores de país, moneda e idioma en la barra superior. Consulte el Selectores de localización.

Este bloque necesita una configuración de localización de apoyo antes de resultar útil. En móvil, el estilo de campo pequeño puede hacer que los selectores pasen a una nueva fila, así que previsualice siempre la barra en pantallas más pequeñas después de cambiar los estilos de selector.

Menú principal

Use el bloque Menú principal para añadir navegación secundaria, como Contacto, Preguntas frecuentes, Seguir pedido o enlaces de políticas. Consulte el Menú principal.

Puede añadir hasta dos bloques de menú si desea grupos de enlaces separados. Esto funciona bien cuando necesita navegación de utilidades en un lado y enlaces promocionales o relacionados con la cuenta en el otro.

Texto enriquecido

Use el bloque Texto enriquecido cuando necesite más formato del que permite el texto del anuncio predeterminado. Admite texto con estilo y enlaces en línea para mensajes más expresivos.

Úselo con moderación en esta sección. El texto grande o el contenido muy estilizado pueden hacer que la barra se vea recargada muy rápidamente.

Iconos de redes sociales

Use este bloque para mostrar cuentas sociales ya configuradas en los ajustes de su tema. Consulte el Iconos de redes sociales.

Puede mostrar todas las redes configuradas o elegir un conjunto más pequeño. Los iconos sólidos suelen ser los más fáciles de revisar en una barra superior compacta, mientras que el estilo solo con texto se adapta mejor a diseños más minimalistas.

Ajustes estándar de sección

Ajustes de fondo de sección

Los ajustes de fondo de sección controlan el fondo de la barra, incluidas las opciones de color, degradado, imagen, video y superposición. Úselos para separar visualmente la barra del encabezado o para admitir un estilo específico de campaña.

Como esta sección tiene poca altura, los fondos sutiles suelen funcionar mejor que los medios detallados. Si usa una imagen o un video, las superposiciones pueden ayudar a conservar la legibilidad del texto.

Ajustes de espaciado

Los ajustes de espaciado controlan el espacio vertical encima y debajo del contenido de la barra. Los pequeños cambios aquí pueden afectar notablemente la prominencia de la barra.

Use un espaciado más ajustado para diseños con muchas utilidades y un poco más de espaciado cuando la barra incluya botones o varias filas. Compruebe tanto en escritorio como en móvil para que la barra no quede más alta de lo previsto.

Ajustes de separador

Los ajustes de separador le permiten añadir una línea encima o debajo de la barra. Esto resulta útil cuando la barra está cerca del encabezado y necesita un límite visual más claro.

Si la barra y el encabezado usan colores similares, un separador puede facilitar la revisión del diseño. El color transparente del separador recurre al ajuste de color del borde más amplio.

Ajustes de visibilidad

Los ajustes de visibilidad controlan si toda la barra aparece en escritorio, móvil o ambos. Esto resulta útil cuando desea una barra de utilidades más completa en pantallas grandes, pero un área de encabezado más sencilla en teléfonos.

Puede combinar la visibilidad de la sección con la visibilidad a nivel de bloque para crear combinaciones de contenido específicas por dispositivo sin duplicar toda la configuración.

Ajustes de ancho

Los ajustes de ancho controlan el ancho máximo del contenido y el ancho general de la sección. En esta sección, el ancho del contenido afecta a lo agrupados que quedan los elementos, mientras que el ancho de la sección es más importante cuando usa estilos de fondo.

Es posible que el editor no muestre siempre los cambios de ancho con precisión, así que previsualice en la tienda online en vivo al ajustar el diseño. Un ancho de contenido más estrecho puede hacer que el contenido de utilidades sea más fácil de revisar, mientras que una sección más ancha o full-bleed funciona bien para tratamientos de fondo más destacados.

Notas de uso

1. Elija un solo método de contenido. Use el texto y el menú predeterminados para una barra simple, o añada bloques para un diseño personalizado, ya que los bloques reemplazan el contenido predeterminado.
2. Revise ambos viewports. Los controles de escritorio y móvil pueden cambiar la alineación, el espaciado, la visibilidad y el ajuste de línea, así que compruebe ambos tamaños después de ajustar la barra.
3. Observe los reemplazos de fondo. Los valores vacíos o con estilo predeterminado suelen conservar el estilo de reserva, mientras que los colores, degradados o medios explícitos hacen que la barra se vea más independiente del resto del encabezado.
4. Trate los medios con cuidado. Si usa medios distintos para escritorio y móvil, revise el recorte, la carga y la legibilidad para que la barra siga viéndose clara en ambos dispositivos.
5. Mantenga la navegación con intención. Los bloques de menú pueden redirigir el flujo de clientes, así que los enlaces ocultos, reordenados o solo para móvil deben revisarse para comprobar su accesibilidad y claridad.
6. Use la barra para contenido de utilidades. Reserve este espacio para avisos prioritarios, enlaces rápidos y navegación ligera en lugar de repetir el contenido principal del encabezado.