Centro de Atención Nube Configura tu tienda Diseño Personalizar tu diseño Encabezado

¿Cómo personalizar el encabezado de mi diseño?

Te contamos los aspectos del encabezado de tu Tiendanube que puedes modificar

Última actualización: 22/07/2024

Personalizar el encabezado de tu diseño te puede ayudar a mostrar la identidad de tu marca, así como a facilitar la navegación en tu tienda, para que tus clientes puedan encontrar la información y productos que están buscando. 

Encabezado de ejemplo en una tienda

El encabezado de tu tienda contiene el logo, el buscador, el carrito y el menú principal de navegación. Es lo primero que ven tus clientes cuando llegan a tu tienda. Por eso es importante que refleje el estilo de tu marca y sea claro.

Success

Las opciones para personalizar el encabezado varían según la 🎨 plantilla de diseño que tengas seleccionada para tu tienda.

En este tutorial te contamos los diferentes aspectos del encabezado que puedes modificar.

Para configurar el encabezado de tu tienda, debes ingresar a "Mi Tiendanube > Diseño" dentro del administrador. Haciendo clic en "Editar diseño" y, luego, en la opción "Encabezado" vas a encontrar las opciones que te contamos a continuación.

Modificar el ancho del encabezado

Ver información

Delete

Success

Esta configuración está disponible únicamente para los diseños Simple, Material y Lifestyle.

Si quieres modificar el ancho del encabezado, es decir, el espacio que ocupan sus elementos en el ancho de la pantalla, puedes abrir el menú desplegable en "Seleccionar el ancho de columna" y elegir el tamaño que prefieras.

Sección de encabezado, mostrando las opciones de ancho de columna disponibles


Te mostramos ejemplo de los diferentes anchos disponibles. Las opciones varían dependiendo del diseño de tu tienda.

Chico

Encabezado con ancho chico

Mediano

Encabezado con ancho mediano

Completo

Encabezado con ancho completo


❗ Si cambias el ancho de tu encabezado de "Chico" a "Mediano", vas a notar que los elementos de tu tienda (banners, carrusel de imágenes, productos) van a pasar a ocupar un mayor porcentaje de la pantalla. Sin embargo, si cambias el ancho de "Mediano" a "Completo", el espacio que ocupan estos elementos se va a mantener igual.

Delete

Cambiar tamaño del logo

Ver información

Si quieres modificar el tamaño del logo, puedes seleccionar tres medidas distintas en la sección de "Logo".

Te mostramos ejemplos de cómo se visualiza el logo con sus diferentes tamaños:

Chico

Mediano

Grande

Delete

Warning

Esta configuración impacta tanto en la versión para computadoras, así como también para dispositivos móviles.

Delete

Cambiar la ubicación de tu logo

Ver información

Delete

Success

Esta configuración solo está disponible en el diseño Simple (eligiendo el tamaño "Mediano" o "Completo" para el ancho de tu encabezado), Amazonas, Río, Lima, Cali, Uyuni, Toluca, Morelia, Baires, Brasilia y Recife.

Al ingresar a la sección "Encabezado", en el apartado de "Ubicación del logo" puedes elegir que se muestre en el centro o a la izquierda.

DeleteOpción de ubicación del logo con un desplegable para elegir la opción deseada


Te mostramos cómo se ve para cada caso:

Centrado

Encabezado de tienda con el diseño Simple con el logo centrado

Izquierda

Encabezado de tienda con el diseño Simple con el logo a la izquierda


Cambiar el color de fondo del encabezado

Ver información

Delete

Success

Esta configuración está disponible solo para los diseños Amazonas, Bahía, Cubo, Idea, Simple, Trend, Río, Lima, Cali, Uyuni, Toluca, Baires, Brasilia, Morelia y Recife.

Puedes cambiar el color del encabezado desde el menú desplegable en "Color de fondo del encabezado". Es importante que tengas en cuenta tu logo y la imagen de tu marca para elegir la opción que mejor se adapte.

Opción para elegir el color de fondo del encabezado

❗ Las opciones de color varían según cada una de las plantillas que tienen disponible esta configuración. En algunos de los diseños, vas a poder elegir colores diferentes a la paleta de tu tienda.

Delete

Ajustar la visibilidad del encabezado

Ver información

Al marcar la casilla "Encabezado siempre visible al navegar por la tienda", tus clientes siempre van a ver el encabezado cuando recorran las diferentes secciones o deslicen hacia abajo en tu tienda.

Opción para que el encabezado esté siempre visible al navegar por la tienda marcada

Te mostramos un ejemplo de cómo se vería en el listado de productos:

GIF mostrando cómo se sigue viendo el encabezado al deslizar hacia abajo en el listado de productos


Además, en los diseños Trend, Focus y Lifestyle, puedes configurar un menú reducido. Para esto, seguí los pasos en:

📝 ¿Cómo mostrar un menú reducido en mi Tiendanube?

Delete

Agregar una barra de anuncio

Ver información

Agregar una barra de anuncio sirve para comunicar avisos importantes a tus clientes, como promociones, descuentos, fechas especiales, etc. Para incluirla en tu tienda, seguí el tutorial:

Delete

Warning

Si utilizas Simple, Trend, Idea, Río, Lima, Cali, Uyuni, Toluca, Morelia, Brasilia, Baires o Recife, puedes definir el color de fondo de la barra de anuncio.

Delete

Personalizar los elementos del encabezado

Ver información

Delete

Warning

Esta funcionalidad está disponible únicamente para las plantillas: Amazonas, Río, Lima, Cali, Uyuni, Toluca, Morelia, Baires, Brasilia y Recife.

Además de las configuraciones que mencionamos, es posible hacer configuraciones adicionales para personalizar aún más el encabezado de tu tienda.

En celulares

Dependiendo de la plantilla que utilices, vas a poder configurar:

  • Ubicación del logo.
  • Elegir si mostrar la barra de búsqueda extendida (para que tus clientes puedan hacer búsquedas más rápidamente).
  • Elegir si mostrar una barra con categorías (para que naveguen entre ellas) o solo como íconos.
  • Elegir si mostrar al carrito, la sección de mi cuenta, el buscador y el menú con textos o solo íconos.


Por ejemplo, acá puedes encontrar la diferencia de configuración con Amazonas:

 

Delete

En computadoras

Dependiendo de la plantilla que utilices, vas a poder configurar:

  • Ubicación del logo.
  • Elegir si mostrar la barra de búsqueda extendida (para que tus clientes puedan hacer búsquedas más rápidamente).
  • Elegir si mostrar una barra con categorías (para que naveguen entre ellas) o solo como íconos.
  • Elegir si mostrar al carrito, la sección de mi cuenta, el buscador y el menú con textos o solo íconos.
  • Configurar el color de los menús.
  • Agregar un banner de información de compra.
  • Definir si el menú se va a ver completo en el encabezado o en un menú hamburguesa.
  • Elegir los colores para la barra de anuncio.

Delete
Delete

Personalizar el encabezado transparente

Ver información

Con las plantillas Uyuni, Cali y Río, además de configurar el encabezado transparente durante la navegación en la tienda, también es posible hacer ediciones sobre el mismo.

Delete

Warning

Con Idea, también es posible configurar el encabezado transparente sobre el carrusel de imágenes, pero no es posible editar el diseño de sus elementos.

Vas a poder activar esta funcionalidad, y elegir si el mismo se va a mostrar transparente sobre el carrusel y los banners o sobre toda la tienda, y configurar un color y un logo alternativo.

De esta manera, tus clientes verán el encabezado con el fondo sólido, los colores principales y un logo al estar en la parte superior de tu tienda, pero al descender ven las otras configuraciones que hayas hecho.

Delete

Delete

Warning

Recuerda hacer clic en "Publicar los cambios" (o en "Guardar borrador" si estás trabajando desde el diseño borrador) una vez que finalices las configuraciones del encabezado.

Ahora que conoces los cambios que puedes realizar en el encabezado de tu tienda, puedes comenzar a aplicarlos de la manera que más te guste. Te recomendamos probar distintas opciones hasta que encuentres la que mejor se adapte al estilo de tu marca.

Si, además, quieres configurar el menú de navegación, puedes seguir nuestro tutorial:

📝 ¿Cómo editar el menú principal de navegación?

Da tu opinión sobre este artículo