---
title: "Cómo configurar el encabezado de tu tienda | App de tienda online - Tutoriales - GoodBarber"
description: "Hoy vamos a configurar el encabezado o el logotipo y el título de tu aplicación.\r \r Esta es la parte superior de tu aplicación, que siempre está visible y accesible en tod…"
canonical_url: "https://es.goodbarber.com/tutorials/shop/diseno/como-configurar-el-encabezado-de-tu-tienda/"
lang: es
---

# Cómo configurar el encabezado de tu tienda | App de tienda online - Tutoriales - GoodBarber

[Atrás](https://es.goodbarber.com/tutorials/shop/)

# Cómo configurar el encabezado de tu tienda

Hoy vamos a configurar el encabezado o el logotipo y el título de tu aplicación.

Esta es la parte superior de tu aplicación, que siempre está visible y accesible en todas las secciones.

El encabezado tiene 4 objetivos
Muestra la identidad de tu aplicación
Dar un título a una sección
Mostrar atajos
Navegar en la aplicación

Entonces, vayamos al menú Contenido y diseño> Diseño> Diseño general

Haz clic en Logo & título

Aquí puedo o agregar el título en formato de texto o agregar un logotipo

Realmente estoy buscando algo de marca, así que agrego un logotipo

Ya lo tenía listo :)

¡Voila!

Ahora estoy seleccionando la alineación del logo: a la derecha o centrada

Fácil, ¿no?

Pero quieres hacer más, ¿verdad? lo sabía

Puedes personalizar tu encabezado aún más activando el menú avanzado aquí

Ahora tengo mas opciones
Puedo cambiar el color de la fuente, el separador, agregar imágenes de fondo
También puedo agregar enlaces a mi encabezado
Agregaré un enlace al carrito. Haz clic en agregar una acción, seleccione el icono y establezca el color del acceso directo. Perfecto

Para la PWA, puedes elegir el título del acceso directo en computadoras de escritorio y tabletas

El color del carrit está hecho.

Último paso los otros elementos del encabezado:
Es decir, la flecha hacia atrás que se mostrará cuando tus usuarios naveguen por tu catálogo. Dependiendo de tu plantilla de navegación, puedes tener otras opciones. Por ejemplo, con Swipe, puedes elegir el icono para abrir el menú.
Estoy agregando el video en las plantillas de navegación en la barra de información

Hagamos una vista previa

¡Finalizado!

Déjame mostrarte el resultado final

Ahora sabes cómo personalizar el encabezado de tu tienda

Nos vemos muy pronto para otro tutorial.

## Vídeos similares

[DiseñoCómo configurar tu menú de navegación](/tutorials/shop/diseno/como-configurar-tu-menu-de-navegacion/)

![Cómo configurar tu menú de navegación](https://portal.ww-cdn.com/portal_static/images/videos_shop11.4f7dad94042e.jpg)

[DiseñoCómo personalizar los iconos del menú](/tutorials/shop/diseno/como-personalizar-los-iconos-del-menu/)

![Cómo personalizar los iconos del menú](https://portal.ww-cdn.com/portal_static/images/videos_shop12.6eeb6d5a859c.jpg)

[DiseñoCómo configurar la página de inicio de tu aplicación](/tutorials/shop/diseno/como-configurar-la-pagina-de-inicio-de-tu-aplicacion/)

![Cómo configurar la página de inicio de tu aplicación](https://portal.ww-cdn.com/portal_static/images/videos_shop13.e1aed198d25d.jpg)

[DiseñoCómo personalizar tu pantalla de bienvenida](/tutorials/shop/diseno/como-personalizar-tu-pantalla-de-bienvenida/)

![Cómo personalizar tu pantalla de bienvenida](https://portal.ww-cdn.com/portal_static/images/videos_shop14.5ba4ff60f4e0.jpg)

[DiseñoCómo configurar el estilo global de tu tienda](/tutorials/shop/diseno/como-configurar-el-estilo-global-de-tu-tienda/)

![Cómo configurar el estilo global de tu tienda](https://portal.ww-cdn.com/portal_static/images/videos_shop16.60bbdddf3a84.jpg)

[DiseñoCómo personalizar los iconos principales de tu tienda](/tutorials/shop/diseno/como-personalizar-los-iconos-principales-de-tu-tienda/)

![Cómo personalizar los iconos principales de tu tienda](https://portal.ww-cdn.com/portal_static/images/videos_shop17.5fb60f1ec20f.jpg)

[DiseñoCómo diseñar las secciones de tu tienda](/tutorials/shop/diseno/como-disenar-las-secciones-de-tu-tienda/)

![Cómo diseñar las secciones de tu tienda](https://portal.ww-cdn.com/portal_static/images/videos_shop18.471e5731e7e3.jpg)

[DiseñoCómo desenganchar el diseño de una sección](/tutorials/shop/diseno/como-desenganchar-el-diseno-de-una-seccion/)

![Cómo desenganchar el diseño de una sección](https://portal.ww-cdn.com/portal_static/images/videos_shop19.6bfd3cd7cba1.jpg)

[DiseñoCómo elegir el tamaño de tu encabezado](/tutorials/shop/diseno/como-elegir-el-tamano-de-tu-encabezado/)

![Cómo elegir el tamaño de tu encabezado](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)