---
title: "Como configurar o cabeçalho da sua loja | App de Loja Online - Tutoriais - GoodBarber"
description: "Hoje vamos configurar o cabeçalho ou logotipo e o título do seu aplicativo\r \r Esta é a parte superior do seu aplicativo, que está sempre visível e acessível …"
canonical_url: "https://pt.goodbarber.com/tutorials/shop/design/como-configurar-o-cabecalho-da-sua-loja/"
lang: pt
---

# Como configurar o cabeçalho da sua loja | App de Loja Online - Tutoriais - GoodBarber

[Voltar](https://pt.goodbarber.com/tutorials/shop/)

# Como configurar o cabeçalho da sua loja

Hoje vamos configurar o cabeçalho ou logotipo e o título do seu aplicativo

Esta é a parte superior do seu aplicativo, que está sempre visível e acessível em todas as seções

O cabeçalho tem 4 objetivos
- Exibir a identidade do seu aplicativo
- Dar um título a uma seção
- Atalhos de exibição
- Navegar no aplicativo

Então, vamos ao menu Conteúdo e Design > Design > Design geral

Clique no Logo e Título

Aqui posso adicionar o título em formato de texto ou adicionar um logotipo

Estou realmente procurando por algo com uma marca, então vou adicionar um logotipo

Eu já tinha um pronto :)

Voila!

Agora estou selecionando o alinhamento do logo: à esquerda ou centralizado

Fácil não?

Mas você quer fazer mais certo? Eu sabia

Você pode personalizar seu cabeçalho ainda mais ativando o menu avançado aqui

Agora eu tenho mais opções
Posso mudar a cor da fonte, o separador, adicionar imagens de fundo
Também posso adicionar links ao meu cabeçalho
Vou adicionar um link para o carrinho. Clique em adicione uma ação, selecione o ícone e defina a cor do atalho. Perfeito

Para o PWA, você pode escolher exibir o título do atalho em desktop e tablets

Em seguida, a cor da marca do carrinho e está pronto

Na última etapa, os outros elementos do cabeçalho:
Isto é a seta de retrocesso que será exibida quando seus usuários navegarem em seu catálogo. Dependendo do seu modelo de navegação, você pode ter outras opções. Por exemplo, com o Swipe, você pode escolher o ícone para abrir o menu
Estou adicionando o vídeo dos modelos de navegação na barra de informações

Vamos pré- visualizar

Terminado!

Deixa eu te mostrar o resultado final

Agora você sabe como personalizar o cabeçalho de sua loja

Te vejo em breve para outro tutorial

## Vídeos semelhantes

[DesignComo configurar seu menu de navegação](/tutorials/shop/design/como-configurar-seu-menu-de-navegacao/)

![Como configurar seu menu de navegação](https://portal.ww-cdn.com/portal_static/images/videos_shop11.4f7dad94042e.jpg)

[DesignComo personalizar os ícones do menu](/tutorials/shop/design/como-personalizar-os-icones-do-menu/)

![Como personalizar os ícones do menu](https://portal.ww-cdn.com/portal_static/images/videos_shop12.6eeb6d5a859c.jpg)

[DesignComo configurar a página inicial (Home) do seu aplicativo](/tutorials/shop/design/como-configurar-a-pagina-inicial-do-seu-aplicativo/)

![Como configurar a página inicial (Home) do seu aplicativo](https://portal.ww-cdn.com/portal_static/images/videos_shop13.e1aed198d25d.jpg)

[DesignComo personalizar sua tela de lançamento](/tutorials/shop/design/como-personalizar-sua-tela-de-lancamento/)

![Como personalizar sua tela de lançamento](https://portal.ww-cdn.com/portal_static/images/videos_shop14.5ba4ff60f4e0.jpg)

[DesignComo configurar o estilo global da sua loja](/tutorials/shop/design/como-configurar-o-estilo-global-da-sua-loja/)

![Como configurar o estilo global da sua loja](https://portal.ww-cdn.com/portal_static/images/videos_shop16.60bbdddf3a84.jpg)

[DesignComo personalizar os principais ícones da sua loja](/tutorials/shop/design/como-personalizar-os-principais-icones-da-sua-loja/)

![Como personalizar os principais ícones da sua loja](https://portal.ww-cdn.com/portal_static/images/videos_shop17.5fb60f1ec20f.jpg)

[DesignComo criar o design das seções de sua loja](/tutorials/shop/design/como-criar-o-design-das-secoes-de-sua-loja/)

![Como criar o design das seções de sua loja](https://portal.ww-cdn.com/portal_static/images/videos_shop18.471e5731e7e3.jpg)

[DesignComo desengatar o design de uma seção](/tutorials/shop/design/como-separar-o-design-de-uma-secao/)

![Como desengatar o design de uma seção](https://portal.ww-cdn.com/portal_static/images/videos_shop19.6bfd3cd7cba1.jpg)

[DesignComo escolher o tamanho do seu cabeçalho](/tutorials/shop/design/como-escolher-o-tamanho-do-seu-cabecalho/)

![Como escolher o tamanho do seu cabeçalho](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)