Skip to main content

​
Visão geral

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.

​
Configurações do módulo de cabeçalho

​
Geral

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. 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

​
Título

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. Opções de título do módulo Header do Upcart: herdar títulos do tema, logotipo da marca ou estilos de texto personalizados

​
Herdar dos títulos do tema

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. 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.

​
Definir estilos de texto

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.

​
Botão de fechar

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.
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.
Configurações do botão de fechar do módulo Header do Upcart para localização, cores, tamanho do ícone e borda

​
Template personalizado

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.

​
Dicas

  • Quer espaçamento ou dimensionamento precisos? Use 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. Se você precisar de alterações personalizadas, recomendamos falar com um Shopify Expert.