Centro de Atención Nube Configurá tu tienda Diseño Personalizar el diseño Encabezado

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

Te contamos los aspectos del encabezado de tu Tiendanube que podés modificar

Última actualización: 16/09/2022

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 podés modificar.

Para configurar el encabezado de tu tienda, debés ingresar a Mi Tiendanube > Diseño dentro del Administrador. Haciendo clic en "Personalizar el diseño actual" 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 querés modificar el ancho del encabezado, es decir, el espacio que ocupan sus elementos en el ancho de la pantalla, podés 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 cambiás 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 cambiás el ancho de "Mediano" a "Completo", el espacio que ocupan estos elementos se va a mantener igual.

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, y en el diseño Amazonas.

Para el diseño Simple con ancho mediano o completo de encabezado, vas a ver la opción de "Ubicación del logo", con la que podés 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


Al cambiar la ubicación de tu logo, su tamaño se modifica automáticamente.


Cambiar el color de fondo del encabezado

Ver información

Delete

Success

Esta configuración está disponible solo para los diseños Trend, Simple, Amazonas, Idea, Base, Cubo y Bahía.

Podés 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.

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, podés 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

Delete

Warning

Esta funcionalidad está disponible en todos nuestros diseños, a diferencia de las anteriores. Además, en Simple y Trend, podés definir el color de fondo de la barra de anuncio.

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

Personalizar de los elementos del encabezado

Ver información

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

En celulares

Además de definir la posición en la que se muestra tu logo en la tienda, podés elegir si mostrar la barra de búsqueda extendida (para que tus clientes puedan hacer búsquedas más rápidamente), si mostrar una barra con categorías (para que naveguen entre ellas) o solo como íconos.


Acá podés ver la diferencia entre cada opción:

Delete

En computadoras

También podés definir la ubicación del logo y, además, podés configurar el tamaño de los iconos (grande o chico).

Delete
Delete

Delete

Warning

Recordá 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 conocés los cambios que podés realizar en el encabezado de tu tienda, podés 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, querés configurar el menú de navegación, podés seguir nuestro tutorial:

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