Cabeçalho

Introdução

O Cabeçalho é a secção presente no topo de cada tema Jumpseller e é uma das secções mais importantes para qualquer loja de comércio eletrónico.

Fornece acesso a muitos dos elementos-chave que permitirão aos clientes navegar pela sua loja, tais como o seu Logótipo (ou nome da loja), itens de Moeda e Idiomas, o item do Carrinho, entre outros que serão explicados mais adiante nesta página.

Em termos do Editor Visual da sua loja, mesmo que o Cabeçalho em si seja também um Componente, não pode ser movido ou reposicionado para outro local como os restantes, pois deve ser apresentado e aparecer no topo de cada Modelo (por exemplo, página inicial, Categorias, Produtos, etc.) para garantir uma funcionalidade e apresentação consistentes.

Configurações do componente

De seguida, pode encontrar a lista de opções que lhe permitirão personalizá-lo.

Versão do Cabeçalho

Esta opção permite-lhe escolher entre diferentes designs de Cabeçalho, cujas diferenças variam em aspetos como os seguintes:

• A posição do Logótipo ou Nome da loja.
• A posição e o aspeto da Barra de pesquisa.
• Onde e como os Links para redes sociais são posicionados, se ativados.
• Como os itens de navegação do Menu principal são apresentados e onde.
• Se o Menu de Desktop é apresentado, e onde e como.
• A posição dos itens do Cabeçalho, como Iniciar sessão, Idiomas, Lista de desejos e Carrinho.

De seguida, encontrará alguns exemplos de como cada versão se apresenta, para que tenha uma visão clara do que poderá alcançar ao escolher qualquer uma delas.

Nota: Aqui iremos referir-nos principalmente às diferenças em dispositivos de Desktop, uma vez que para dispositivos Móveis a maioria das versões é basicamente a mesma em termos de design, com apenas pequenas diferenças entre elas.

Clássico

Esta versão é a que será instalada por predefinição quando criar uma loja no Jumpseller, ou quando instalar o tema Simple. Entre as suas características mais importantes podemos destacar as seguintes:

• O Logótipo ou Nome da loja está sempre posicionado ao centro.
• A Barra de pesquisa é um formulário no qual pode escrever diretamente para pesquisar produtos, e está sempre posicionada no lado esquerdo.
• No lado direito do Cabeçalho, encontrará os itens para os clientes realizarem diferentes ações, como por exemplo Iniciar sessão e Idiomas.
• Na parte inferior, o Menu de Desktop está completamente visível e oculta-se em dispositivos Móveis.

Retalho

Esta versão é a que vem selecionada por predefinição no tema Mega. Se não o instalou, mas pretende obter o resultado que pode ver na imagem acima, existem determinadas opções que precisará de ativar:

1. Aceda às configurações do componente Cabeçalho e escolha Retalho.
2. De seguida, ative a opção Mostrar menu de Categorias, caso em que poderá editar as opções que ficarão visíveis.
3. Abra o grupo Outras opções e, dentro da opção Posição das ações do Cabeçalho, escolha Barra superior. Pode também ativar a opção Mostrar links para redes sociais.
4. De seguida, volte atrás e aceda às configurações do Menu de Desktop e, dentro da opção Alinhamento do menu, escolha Esquerda.

Compacto

Esta versão é a que vem selecionada por predefinição no tema Starter. Se não o instalou, mas pretende obter o resultado que pode ver na imagem acima, existem determinadas opções que precisará de ativar:

1. Aceda às configurações do componente Cabeçalho e escolha Compacto.
2. De seguida, abra o grupo Outras opções e ative a opção Mostrar links para redes sociais, para que estes fiquem visíveis no lado esquerdo do Cabeçalho.

Prime

Esta versão oferece um aspeto mais minimalista, onde alguns elementos se comportam de forma diferente das versões anteriores, como por exemplo os seguintes:

• O Logótipo ou Nome da loja estará sempre posicionado ao centro.
• O Menu de Desktop não é visível em nenhum dispositivo e, por isso, todos os itens de navegação do Menu principal serão apresentados dentro do painel do Menu Móvel.
• O Menu Móvel é o que será utilizado em todos os dispositivos, Desktop e Móvel.
• A Barra de pesquisa abrirá sobre o Cabeçalho através de um botão, da mesma forma que acontece nas versões anteriores do Cabeçalho em dispositivos Móveis.
• Os links para redes sociais serão apresentados no lado esquerdo do Cabeçalho, se ativados.
• Os itens do Menu de Categorias serão apresentados dentro de um painel, que pode ser aberto através de um botão de forma semelhante ao Menu Móvel.

Nota: o componente Menu de Desktop, mesmo quando ativo, não será apresentado na loja.

Slim

Esta versão oferece um aspeto mais “slim” –daí o nome– onde os elementos têm como objetivo utilizar o menor espaço possível. Funciona de forma semelhante à versão Prime, mas considerando as seguintes diferenças:

• O Logótipo ou Nome da loja estará sempre posicionado no lado esquerdo do Cabeçalho.
• O Menu de Desktop será visível em dispositivos Desktop juntamente com os restantes elementos.
• O Menu Móvel será utilizado em dispositivos mais pequenos e pode ser aberto através do item Menu.
• A Barra de pesquisa abrirá sobre o Cabeçalho através de um botão, da mesma forma que acontece nas versões anteriores do Cabeçalho em dispositivos Móveis.
• Os links para redes sociais serão apresentados no lado direito do Cabeçalho, se ativados.
• O Menu de Categorias será apresentado como o primeiro item da lista e estará acessível através do respetivo painel em dispositivos Móveis.

Minimal

Esta versão do Cabeçalho oferece uma experiência diferente, focada no comportamento de pesquisa ao apresentar um campo grande e largo que ocupa a maior parte do espaço, bem como uma Barra de navegação secundária que é apresentada em dispositivos Móveis. Vem já selecionada se optar por instalar o tema Delivery.

Os elementos dentro desta secção comportar-se-ão da seguinte forma:

• O Logótipo ou Nome da loja estará sempre posicionado no lado esquerdo.
• Tanto os menus de Desktop como os de Categorias são acessíveis através dos respetivos itens, abrindo um painel lateral para cada um. Desta forma, a experiência em todos os dispositivos é exatamente a mesma.
• Os itens Carrinho e Iniciar sessão são apresentados no lado direito do Cabeçalho em dispositivos grandes. Em dispositivos Móveis, serão apresentados na Barra de navegação localizada na parte inferior do browser.
• A Barra de pesquisa será apresentada no Cabeçalho para dispositivos com uma largura igual ou superior a 576px. Para dispositivos com largura inferior, estará acessível através de uma janela modal que aparece na parte superior da janela do browser.
• Itens como Idiomas, Moeda e redes sociais serão sempre apresentados dentro do painel do Menu Móvel.

Barra de navegação Móvel

Como foi mencionado, esta versão do Cabeçalho apresenta automaticamente uma secção secundária, localizada e fixada na parte inferior da janela do browser. O seu foco é proporcionar uma experiência semelhante às aplicações de “Entrega”, oferecendo os links e itens mais úteis no seu interior. São os seguintes (da esquerda para a direita):

• Link para a página inicial: apresentado no lado esquerdo da barra de navegação, permitindo aos clientes regressar rapidamente à página inicial da loja.
• Botão de Categorias: se tiver ativado a opção Menu de Categorias nas configurações do Cabeçalho, o Link para a página inicial será substituído por outro que abre o painel de Categorias.
• Pesquisa: este item é o que permite abrir e apresentar a Barra de pesquisa, que ficará visível na parte superior da janela do browser.
• Carrinho: este item é o link que permite abrir o painel do Carrinho lateral, que contém um resumo da encomenda do cliente. Contém também o “Contador” que informa os clientes sobre a quantidade de itens que adicionaram.
• Iniciar sessão: este item fornece um link para a página onde os clientes podem iniciar sessão nas suas contas. Se já tiverem sessão iniciada, abrirá um menu suspenso com vários links relacionados com a sua conta.
• Contacto: este item fornece um acesso rápido à página de Contacto da loja.

Largura

Permite definir a largura máxima que o componente se estenderá até à janela do browser.

Pode ler mais sobre como esta opção irá afetar o componente nesta página.

Cabeçalho Fixo

Permite-lhe fixar o Cabeçalho no topo da janela do browser, para que acompanhe os utilizadores enquanto fazem scroll para cima e para baixo na loja.

Ao ativar esta opção, opções adicionais também ficarão disponíveis para serem utilizadas e aplicadas:

Sobreposição

Permite colocar o Cabeçalho sobre e à frente de todo o conteúdo da página inicial da loja.

Quando ativado, será apresentada uma opção chamada Transparência de sobreposição com a qual pode definir a transparência (opacidade) do Cabeçalho.

Nota: Esta opção funcionará apenas na página inicial da sua loja e recomenda-se que seja utilizada juntamente com um componente que tenha uma imagem e esteja posicionado em primeiro lugar, como por exemplo um Slider ou Banner grande.

Estilo flutuante

Permite apresentar o Cabeçalho com margens ou espaços superiores, direitos e esquerdos, para que o conteúdo por detrás seja visível ao fazer scroll.

Quando ativado, será apresentada uma opção chamada Opacidade da sombra, com a qual pode apresentar uma sombra atrás do Cabeçalho, para aumentar o contraste com os restantes elementos do tema.

Barra de ferramentas flutuante

Permite mover os itens Carrinho, Pesquisa e Iniciar sessão para fora do Cabeçalho e para a sua própria secção, com estilos de botão.

Quando ativado, será apresentada uma opção chamada Posição da barra de ferramentas, com a qual pode escolher a sua posição.

Opções de Logótipo

Este grupo de opções permite-lhe carregar um Logótipo para o Cabeçalho, com base no seguinte:

Logótipo

O que carregar aqui substituirá o adicionado no painel de administração da sua loja em Definições > Geral > Marca.

Ao carregá-lo, será apresentada uma nova opção chamada Logótipo (móvel) na qual pode adicionar outro apenas para dispositivos móveis, que será apresentado em dispositivos com uma largura ≤575px.

Nota: Se não carregar nenhum logótipo aqui, será apresentado o Nome da loja definido em Definições > Geral > Preferências.

Altura do logótipo

Encontrará duas opções para gerir a altura dos logótipos, tanto para dispositivos desktop como móveis.

Isto será aplicado aos logótipos adicionados através do componente, bem como ao adicionado através do painel de administração da loja.

Itens do menu

Este grupo de opções permite-lhe ajustar aspetos de design sobre os itens (links) dos menus de Desktop e Móvel do Cabeçalho.

Tamanhos

Com as opções Tamanho no menu de desktop e Tamanho no menu móvel pode ajustar manualmente o tamanho dos itens ao visualizar o Menu principal nos respetivos dispositivos.

Primeiros itens em maiúsculas

Permite forçar que o nome dos itens seja apresentado em texto maiúsculo, mesmo que não tenham sido escritos dessa forma: por exemplo, TODOS OS PRODUTOS.

Peso

Permite definir o peso para todos os itens.

Nota: Isto dependerá das variáveis disponíveis da fonte que definiu para a opção Fonte principal em Definições do tema > Fontes > Seleção de fonte.

Mostrar como botão

Se ativado, os itens do menu de primeiro nível serão apresentados como botões, apenas em dispositivos desktop.

Será apresentada uma opção secundária na qual pode definir o Estilo dos botões, com base nas cores Principal ou Secundária do pacote de cores definido para o Cabeçalho.

Nota: Se definir um Pacote de cores diferente dentro do subcomponente Menu, os botões considerarão os estilos desse em vez do outro.

Itens do Cabeçalho

Este grupo de opções permite-lhe ajustar aspetos de design sobre os itens como por exemplo Moeda, Idioma, Iniciar sessão e Carrinho.

Tamanhos

Com as opções Tamanho (desktop) e Tamanho (móvel) pode ajustar manualmente o tamanho dos itens ao visualizá-los nos respetivos dispositivos.

Borda de separação

Permite apresentar uma linha vertical entre os itens para criar uma separação visual.

Nota: esta opção apenas será visível ao utilizar as versões de Cabeçalho 4, 5 e 6.

Outros estilos

As seguintes opções permitem realizar e aplicar os mesmos efeitos que os mencionados acima, mas neste caso para estes itens:

• Maiúsculas
• Peso
• Mostrar como botão: Ao ativar esta opção, outra ficará visível para definir os estilos do botão.

Mostrar textos

Se desativado, os itens do cabeçalho apresentarão apenas ícones e os textos ficarão ocultos. Em dispositivos móveis, os textos estarão sempre ocultos.

Comportamento do Iniciar sessão

Permite definir o comportamento que o item Iniciar sessão terá:

• Suspenso: o item apresentará um menu suspenso com diferentes links, dependendo se o utilizador tem sessão iniciada ou não.
• Link: será um link direto para a Página de conta se o utilizador tiver sessão iniciada; caso contrário, levará à Página de início de sessão.

Menu de Categorias

Ao ativar a opção Mostrar menu, será apresentado um menu adicional no início da lista. Os itens deste serão os adicionados em Navegação > Menu de Categorias.

A posição em que este será colocado variará dependendo da Versão do Cabeçalho que escolheu.

As seguintes opções também serão apresentadas para que possa personalizá-lo:

• Apresentar em: Permite definir em que dispositivos será apresentado.
• Título: Permite modificar o texto do item para este menu.
• Ícone: Permite modificar o ícone que acompanha o texto do item.
• Mostrar como botão: Permite aplicar um estilo de botão ao item que abre o menu suspenso. Este estilo também será aplicado se ativar Mostrar como botão no grupo Itens do menu acima.
  • Estilo: Permite definir o estilo do botão, da mesma forma que foi explicado acima. Isto substituirá a outra opção Estilo dentro de Itens do menu.

Aparência

Este grupo de opções permite-lhe definir outros aspetos de design e comportamentos do Cabeçalho.

Borda inferior

Permite apresentar uma borda na parte inferior do Cabeçalho. Isto pode ajudar a criar uma separação visual entre este componente e o restante conteúdo que vem a seguir no tema.

Posição das ações

Permite definir a posição em que os itens de Moedas e Idiomas serão apresentados.

Ao escolher Barra superior nesta opção, há algumas coisas que precisa de considerar para que funcione corretamente:

• Precisa de ter adicionado um componente Barra superior dentro do Cabeçalho e ter pelo menos um Slide da barra superior.
• Precisa de ter pelo menos 2 ou mais Moedas, e/ou 2 ou mais Idiomas adicionados nas definições da sua loja.
• Se não tiver mais do que um Idioma e/ou Moeda e definir as ações para serem visíveis na Barra superior, verá um espaço em branco no lado direito desta secção.

Links para redes sociais

Permite apresentar todos os links (e os seus ícones) que pode adicionar no painel de administração da sua loja em Definições > Geral > Preferências > Redes sociais.

A posição em que estes links aparecem dependerá de cada Versão do Cabeçalho.

Cores do conteúdo

Permite escolher o Pacote de cores para o Cabeçalho.

Menus utilizados neste contexto

Fornece um link direto para a configuração dos Menus de navegação que este componente utiliza. Neste caso encontrará os seguintes:

• Menu principal
• Menu de categorias

Menu (desktop)

O Menu é um subcomponente do Cabeçalho e permite apresentar os itens de navegação definidos em Personalização > Navegação > Menu Principal para dispositivos Desktop com uma largura igual ou superior a 992px.

Este menu ocultará em dispositivos com uma largura igual ou inferior a 991px e, quando isso ocorrer, será apresentado um item no lado esquerdo do Cabeçalho que permitirá abrir o Menu Móvel ao clicar.

Este item também será apresentado se optar por ocultar o subcomponente Menu.

Mais detalhes sobre isto podem ser encontrados nesta secção da documentação.

As opções disponíveis para personalizá-lo são as seguintes:

Disposição

Este grupo contém opções para alterar o design do componente.

Largura

Permite definir a sua largura com base nas seguintes opções:

1. Largura do Cabeçalho: Expandirá o conteúdo do menu com base na opção definida nas configurações de Largura do Cabeçalho.
2. Largura total: Expandirá o conteúdo até à largura máxima do browser, independentemente da Largura definida nas configurações do Cabeçalho.

Borda superior

Permite apresentar uma borda no topo do menu, para o separar do restante conteúdo que está acima.

Espaço à esquerda e à direita

Permite decidir se o menu terá um espaço no lado esquerdo e direito do browser. Útil se optar por utilizar a opção Largura total acima.

Alinhamento

Permite definir o alinhamento dos itens presentes no menu.

Se tiver ativado a opção Links para redes sociais e estes forem apresentados dentro do menu, o alinhamento funcionará da seguinte forma:

• Esquerda: Os itens do menu serão posicionados no lado esquerdo, enquanto os links sociais ficam à direita.
• Centro: Todos os itens, incluindo os links sociais, alinharão e posicionar-se-ão ao centro da secção.
• Direita: Os itens do menu serão posicionados no lado direito, enquanto os links sociais ficam à esquerda.

Personalizar cores

Com esta opção pode definir um Pacote de cores individual apenas para este menu, para que se diferencie do restante conteúdo do Cabeçalho.

Quando ativado, será apresentada a opção Cores do conteúdo, na qual pode escolher um Pacote de cores a utilizar.

Submenus

Este grupo de opções permite definir o comportamento dos Submenus, que são uma lista de itens para um item que tem níveis internos.

Evento de abertura

Define o evento do rato que abrirá um menu suspenso para itens de primeiro nível que têm subitens no interior.

Dependendo do que escolher, isto irá alterar a forma como os itens de primeiro nível se comportam, pelo que é importante considerar o seguinte:

• Ao clicar:
  • O menu suspenso apenas abrirá quando um utilizador clicar no item de primeiro nível, e fechará ao clicar em qualquer outro lugar fora dele.
  • O item de primeiro nível não irá para nenhuma página ao clicar nele, portanto, se for por exemplo uma categoria, só estará acessível clicando no item “Ver todos” no final da lista do menu suspenso, se ativado.
• Ao passar o rato (ou mouseover):
  • O menu suspenso abrirá quando o utilizador colocar o rato sobre o item, e fechará automaticamente quando o rato estiver posicionado fora da sua área.
  • O item de primeiro nível irá para o conteúdo definido na configuração do Menu principal de navegação (por exemplo, categoria, produto, página, etc.).
  • A única situação em que não irá para nenhum conteúdo da loja ao clicar será se o tipo de item for igual a Sem URL.

Estilo

Permite definir o aspeto dos Menus suspensos, com base em duas opções:

Flyout

Os subitens serão empilhados verticalmente um abaixo do outro. Se algum destes também tiver níveis no interior, serão apresentados no lado direito.

Considere o seguinte relativamente ao comportamento desta opção:

• Os menus suspensos aninhados herdarão o “evento do rato” definido na opção acima, por exemplo, terceiro, quarto e níveis mais profundos.
• Tenha em consideração a quantidade de subitens dentro de cada menu suspenso, pois se adicionar demasiados e a lista se tornar extremamente longa, é muito provável que os últimos não sejam totalmente visíveis na janela do browser.

Mega Menu

Os subitens serão distribuídos em colunas dentro de um menu suspenso grande e largo, para permitir espaço suficiente para que todos sejam visíveis.

Considere o seguinte relativamente ao comportamento desta opção:

Profundidade: Recomenda-se que tenha pelo menos 3 níveis para cada item para que funcione corretamente, como por exemplo:

• Casacos (1.º nível)
  • Casacos de couro (2.º nível)
    • Casacos de couro castanho (3.º nível)
    • Casacos de couro preto (3.º nível)
  • Casacos de lã (2.º nível)
• Calças (1.º nível)
• Camisas (1.º nível)

Nota: Os itens de 4.º nível (ou mais profundos) não serão apresentados.

Evento do rato: Este submenu também herdará o comportamento definido na opção de evento de abertura dos Submenus e, portanto, abrirá com base nisso.

Quantidade de colunas: Os itens de 2.º nível serão distribuídos num máximo de 6 colunas no eixo horizontal. Portanto, se tiver mais de seis itens de 2.º nível, os restantes serão empilhados e posicionados abaixo numa nova linha. Pelo contrário, se tiver cinco ou menos itens de 2.º nível, adaptar-se-ão adequadamente numa única linha horizontal.

Link ‘Ver todos’

Permite mostrar um link que leva ao nível principal de cada item de navegação.

Opções do mega menu

Este grupo de opções ficará visível se escolher Mega menu na opção Estilo acima.

Com elas pode ajustar o seguinte:

Colunas personalizadas

Se ativado, poderá definir a quantidade de colunas que cada item de 2.º nível terá, em relação à largura total do menu suspenso, escolhendo entre 3 e 6 numa nova opção chamada Quantidade de colunas.

Se desativado, serão dispostos automaticamente com base em cálculos feitos dentro do tema, dependendo de quantos subitens cada menu suspenso tem.

Imagens dos itens

Com esta opção pode optar por apresentar as imagens para itens do tipo Categoria, Produto ou Página. Se for outro tipo de item, não será apresentada nenhuma imagem. O mesmo acontecerá se qualquer um dos itens que o permitem não tiver imagens.

Quando ativado, também poderá escolher o Rácio (ou dimensão), bem como a Posição em que as imagens serão apresentadas.

Menu (móvel)

Mesmo que o Menu Móvel não seja um componente disponível dentro do Cabeçalho do tema, é uma secção que será apresentada e acessível nos seguintes contextos:

1.- Componente Menu oculto

Se optar por ocultar o Menu, aparecerá um item no lado esquerdo do Cabeçalho que permitirá abrir o Menu Móvel, para todos os tipos de dispositivos (Desktop e Móvel).

Nota: a posição do item que abre o Menu móvel variará dentro do Cabeçalho, dependendo da Versão do Cabeçalho que escolher.

Exemplo de como o Cabeçalho ficará quando o Menu de Desktop estiver oculto num dispositivo Desktop.

2.- Dispositivos Tablet e Móvel

Mesmo que normalmente nos refiramos apenas a dispositivos móveis nesta documentação, muitas vezes isto também inclui –inerentemente– dispositivos Tablet.

O Menu Móvel estará automaticamente acessível para dispositivos com uma largura igual ou inferior a 991 pixels e, portanto, o Menu ocultará em dispositivos com menos do que isso.

Barra Superior

Este subcomponente do Cabeçalho permite adicionar múltiplos elementos filhos chamados Slides. Estes serão sempre apresentados dentro de um carrossel.

Configurações do componente

As opções para personalizá-lo são as seguintes:

Largura

Permite definir a largura da secção, com base nas seguintes opções:

• Largura do Cabeçalho: Expandirá o conteúdo do menu com base na opção definida nas configurações de Largura do Cabeçalho.
• Largura total: Expandirá o conteúdo até à largura máxima do browser.

Fixar Barra Superior

Permite fixar (ancorar) a Barra Superior no topo da janela do browser para que acompanhe os utilizadores enquanto fazem scroll para cima e para baixo na loja.

Isto será aplicado apenas em dispositivos Desktop com uma largura igual ou superior a 576px.

Para dispositivos com largura inferior a essa, a Barra Superior será posicionada abaixo do Cabeçalho.

Reprodução automática

Se ativado, os Slides farão a transição automaticamente de um para o seguinte com base na velocidade definida abaixo.

Além disso, será apresentada a opção Velocidade de reprodução automática para que possa controlar o tempo ou velocidade a que o carrossel aguardará para passar de um Slide para o seguinte.

Estará também disponível uma terceira opção chamada Reprodução automática contínua, que fará com que o carrossel tenha uma transição que o fará parecer infinito.

Ao ativar isto, Velocidade de reprodução automática (móvel) permitir-lhe-á definir a velocidade apenas para dispositivos móveis.

Cores do conteúdo

Permite escolher o Pacote de cores para toda a Barra superior.

Configurações do subcomponente

Os Slides são os elementos filhos de um componente Barra Superior e têm as seguintes opções para personalizá-los:

Ícone

Permite apresentar um ícone no lado esquerdo do texto.

Texto

Aqui pode adicionar o texto a ser apresentado no Slide.

Link

Permite adicionar um link para qualquer conteúdo da loja, como Categorias, Produtos, Páginas, etc.

Ao adicionar um, as seguintes opções também ficarão disponíveis para utilização:

• Texto do link: Obrigatório. Texto que será apresentado no link.
• Link externo: Se ativado, o link abrirá num novo separador do browser.