> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Módulo de cabeçalho

> Aprenda a atualizar o cabeçalho do seu drawer do Upcart, incluindo logotipo, estilos de título, botão de fechar e layout.

<div id="overview">
  # Visão geral
</div>

O módulo Header permite personalizar a seção superior do seu drawer do Upcart com o logotipo da sua marca, o texto do título, o layout, a cor de fundo e o botão de fechar. Controles visuais facilitam a estilização do cabeçalho sem precisar definir tamanhos exatos em pixels.

<div id="header-module-settings">
  # **Configurações do módulo de cabeçalho**
</div>

<div id="general">
  ## **Geral**
</div>

**Height** alterna entre **Slim** e **Tall** para controlar o espaço vertical. **Bottom border** é **None** ou **Thin**. **Background color** aceita um código hexadecimal ou o seletor de cores integrado e suporta transparência.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/header-module-height-and-background.gif?s=982cf4fec081aa2c1b62901e53602b80" alt="Configurações General do módulo Header do Upcart com controles de altura e cor de fundo ao lado de uma prévia do carrinho" width="2172" height="1080" data-path="images/upcart/header-module-height-and-background.gif" />

<div id="title">
  # **Título**
</div>

Há **três maneiras** de definir o título do cabeçalho do seu cart drawer: herdar o estilo de título padrão do seu tema, exibir o logotipo da sua loja ou criar estilos de texto totalmente personalizados. Cada método oferece flexibilidade de acordo com as suas necessidades de design.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/header-module-title-options.gif?s=18bfdb000570d453195ba19bd5f0288b" alt="Opções de título do módulo Header do Upcart: herdar títulos do tema, logotipo da marca ou estilos de texto personalizados" width="1960" height="1080" data-path="images/upcart/header-module-title-options.gif" />

<div id="inherit-from-theme-titles">
  ## Herdar dos títulos do tema
</div>

Esta opção usa os estilos de título padrão do seu tema, ajudando a manter o design visualmente consistente com o restante do seu site. Você pode adicionar seu próprio título usando o campo Text e incluir dinamicamente o número de itens do carrinho usando `{{cart_quantity}}`. O alinhamento do texto pode ser definido como Side ou Center, e você pode selecionar o nível de título apropriado, H2, H3 ou H4, com base na estrutura de conteúdo da sua loja.

<div id="brand-logo">
  ## Logotipo da marca
</div>

Se você preferir usar o logotipo da marca no lugar do texto, pode fazer upload do logotipo da sua loja diretamente nesta seção. Escolha alinhar o logotipo em Side ou Center e dimensione-o com o controle deslizante **Logo size**, que vai de 14 px a 48 px. Não há limite obrigatório para o arquivo enviado, mas recomenda-se usar um arquivo PNG para transparência limpa e bordas nítidas. JPEGs também são suportados, mas podem incluir ruído de fundo ou degradar os detalhes do logotipo. Para o desempenho, procure manter os tamanhos de arquivo otimizados.

* Recomendamos usar um arquivo **PNG** para a melhor qualidade e suporte a fundos transparentes.
* JPEGs também funcionam, mas podem não ficar tão limpos, especialmente se o seu logotipo tiver um fundo ou detalhes finos.

<div id="define-text-styles">
  ## Definir estilos de texto
</div>

Selecionar a opção Text dá controle total sobre a estilização do título, independentemente do tema da sua loja. Você pode inserir qualquer título personalizado e incluir `{{cart_quantity}}` para atualizações dinâmicas. O alinhamento do texto pode ser definido como Side ou Center, com opções para alterar o peso da fonte para Normal, Semibold ou Bold. O tamanho da fonte é ajustável de 14px a 48px por meio de um controle deslizante visual, e você pode opcionalmente aplicar uma substituição de cor do texto.

<div id="close-button">
  # Botão de fechar
</div>

O botão de fechar é personalizável para combinar com o design da sua loja. **Location** o coloca no lado esquerdo ou direito do drawer. **Background**, **Icon** e **Border** aceitam, cada um, uma cor mais uma cor de hover separada. **Icon size** é Small, Medium ou Large, e **Icon thickness** é Normal ou Thick. **Border** é None, Thin, Normal ou Thick.

<Note>
  Os campos de cor da borda e de cor de hover da borda ficam desativados enquanto **Border** estiver definido como **None**. Escolha primeiro uma largura de borda e depois defina suas cores.
</Note>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/header-module-close-button-settings.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=c8f941c774ff6f7029b0833c09ca000d" alt="Configurações do botão de fechar do módulo Header do Upcart para localização, cores, tamanho do ícone e borda" width="1170" height="1166" data-path="images/upcart/header-module-close-button-settings.png" />

<div id="custom-template">
  # Template personalizado
</div>

Na versão 2.0 do módulo Header, um editor de código **Custom template** aparece abaixo das configurações, com um único template **Full** que cobre todo o módulo. Ele usa JSX baseado em React, e você precisa primeiro marcar **Access custom templates** em **Settings > Cart settings > Advanced Settings** no Cart Editor. Veja [Configurando um template personalizado](/pt/upcart/setting_up_a_custom_template_in_upcart).

<div id="tips">
  # Dicas
</div>

* **Quer espaçamento ou dimensionamento precisos?** Use [Custom CSS](/pt/upcart/custom_css) para ter controle total além dos controles deslizantes, ótimo para margens, padding ou escala de logotipo exatos.
* **Teste no desktop e no celular.** Elementos do cabeçalho como texto, logotipo e botões podem ser exibidos de forma diferente em vários tamanhos de tela
* **Use níveis de título adequados.** Escolher o título certo (H2, H3, H4) ajuda na acessibilidade e no SEO. Combine com a estrutura do conteúdo da sua loja.

Para mais maneiras de personalizar seu carrinho, explore nossa [documentação de ajuda do Upcart](/pt). Se você precisar de alterações personalizadas, recomendamos falar com um [Shopify Expert](https://www.shopify.com/ca/partners/directory).