Cabeçalho, rodapé e menu

Cabeçalho

Onde: Aparência → Cabeçalho e logo.

Há cinco modelos, cada um com uma arrumação diferente do logo, da busca e dos ícones. Experimente na pré-visualização — a diferença entre eles é sentida, não descrita.

• Clássico — marca à esquerda, a busca larga no meio e os ícones à direita.
• Marca no meio — a marca no centro, os ícones à direita e, à esquerda, o menu montado em Conteúdo → Menus ou, sem menu, a busca.
• Duas linhas — marca, menu e ícones em cima; a busca larga, de ponta a ponta, embaixo. A distância entre as duas linhas é Espaço entre as linhas.
• Compacto — uma linha só: a marca, as categorias (a barra de categorias entra na mesma linha, em vez de ficar embaixo) e os ícones, sem as palavras. A busca fica na lupa e abre suspensa, por cima da página, sem mudar a altura do topo.
• Minimalista — o botão Menu à esquerda, a marca no meio, a lupa e os ícones à direita. O menu abre numa gaveta, no computador também, com as categorias, as marcas e o que você montou em Conteúdo → Menus. As cores e o logo dele ficam logo abaixo do modelo, em Fundo do menu lateral, Texto do menu lateral, Logo do menu lateral e nas cores do Botão de destaque do menu lateral (o “Melhores ofertas” do alto do menu), que só aparecem com o Minimalista escolhido. Com só o fundo do botão escolhido, o texto dele se acerta sozinho. O logo é opcional: serve para pôr outra versão da marca — a branca, num menu escuro. Sem ele, vai o logo da loja. A gaveta é a mesma do celular: tudo vale nos dois. Combina com a Barra de categorias desligada.

No celular, todos seguem as escolhas de Aparência → No celular.

As cores do topo se acertam sozinhas: com o Fundo do cabeçalho escuro e o texto no automático, palavras e ícones ficam claros, e a busca vira um campo branco. A barra de categorias, no automático, segue o fundo do cabeçalho.

Ajustes que valem a pena:

• Cabeçalho fixo ao rolar — o topo acompanha a rolagem. Bom em catálogo grande, porque a busca fica sempre à mão.
• Como o cabeçalho fixo se comporta — sempre à vista, do mesmo tamanho, ou encolhe ao rolar, ficando mais baixo e com a marca menor. Nos dois, o topo nunca sai da tela.
• Estilo do cabeçalho — reto, de ponta a ponta; cartão flutuante, solto das bordas, com cantos arredondados e o fundo da loja em volta; vidro, que ao rolar fica translúcido e mostra o conteúdo desfocado por trás; ou transparente sobre o banner: na home, o topo (e a barra de categorias) pega a cor da borda de cima do banner principal, e os dois viram uma peça só. O texto do topo fica claro ou escuro sozinho, pelo contraste; no carrossel, a cor acompanha o banner que está na tela; ao rolar, com o cabeçalho fixo, o topo volta às cores de sempre. Funciona melhor com banner de fundo liso ou em degradê no alto. Quando a cor tirada da imagem não fica boa, escolha outra em Cor do topo sobre o banner, logo abaixo: ela passa a valer para todos os banners do topo, no computador e no celular, e o texto continua ficando claro ou escuro sozinho. Nas outras páginas, vale o reto. Com o cartão flutuante, a barra de categorias logo abaixo vira um cartão também.
• Barra de categorias — a linha abaixo do cabeçalho. Pode grudar junto, ou não. Além do fundo e do texto, ela tem a cor da categoria ao passar o mouse e as cores do menu que abre na barra — fundo, texto e destaque —, que valem para a lista que abre embaixo de uma categoria e para o painel “Todas as categorias”. Com só o fundo escolhido, o texto se acerta sozinho para dar leitura.
• Cor dos links do cabeçalho ao passar o mouse — no menu do cabeçalho; no automático, a cor principal.
• Botão “Todas as categorias” — fundo e texto próprios, em Topo → Barra de categorias.
• Cor da logo no cabeçalho — se a sua logo tem letras escuras e o cabeçalho é escuro, escolha Toda em branco. No rodapé, a mesma ideia está em Marca no rodapé → A logo do cabeçalho, toda em branco, e a altura dela ali é escolhida em Altura da marca no rodapé — ela nunca passa da largura da coluna, e a altura do cabeçalho cresce sozinha quando a marca do topo pede mais espaço.
• Botão de destaque da barra — o “Melhores ofertas”. Texto, link, cor, cor do texto, cantos, ícone e estilo (preenchido, só o contorno ou só o texto) ficam juntos, em Topo → Barra de categorias. No automático, ele usa a cor principal da loja; se a barra já for dessa cor, ele inverte para não sumir.
• Desenho das categorias nos menus — foto ou ícone, no painel “Todas as categorias” e no menu do celular. O ícone de cada categoria se escolhe em Categorias e marcas.
• Produtos com foto no painel “Todas as categorias” — ao passar o mouse numa categoria, três produtos dela aparecem ao lado das subcategorias, com foto, nome e preço, os mais vendidos primeiro. Vem ligado; as fotos só carregam quando o painel abre.
• Largura da busca — em loja com muitos produtos, uma busca larga aumenta o uso. A busca já vem com o botão da lupa encaixado; em Busca → Botão da busca dá para trocar por um botão escrito ou tirar.
• Faixa de aviso — a tarja acima do cabeçalho: “Frete grátis acima de R$ 199”. Fica desligada enquanto você não escrever nada. Ganha um ícone em Ícone da faixa de aviso. Em Ordem da barra de cima dá para somar outras mensagens, cada uma com o seu ícone. Com duas ou mais, no celular elas giram, uma de cada vez.

A faixa que passa

Você pode ligar uma faixa de texto correndo — com cor de fundo, cor do texto, velocidade e onde aparecer (acima do cabeçalho, abaixo dele, abaixo do banner principal ou antes do rodapé). Em Largura da faixa, ela vai de ponta a ponta da tela ou fica na largura do conteúdo da loja, com cantos arredondados. Em Letra da faixa, escolha a letra dos títulos para a faixa ficar grossa, maior e em MAIÚSCULAS.

Ela só liga quando você escreve alguma frase, e a velocidade se ajusta ao número de frases para o ritmo de leitura não mudar quando você acrescentar uma.

Rodapé

Onde: Aparência → Rodapé.

São quatro modelos, e o conteúdo vem de vários lugares: links do rodapé, contato, redes sociais e o cadastro de e-mail. O padrão é Marca em destaque: a marca na coluna mais larga, com o nome maior, o texto sobre a loja e as redes; as redes sociais com o ícone de cada uma (em Redes sociais dá para pôr o nome ao lado, ou só o nome); as formas de pagamento com a bandeira de cada uma — Pix, Visa, Mastercard, Elo, boleto, pagamento na entrega — e as formas de entrega, as duas tiradas do que está ligado em Pagamentos e em Frete (loja que só aceita Pix não mostra cartão; para escrever a lista à mão, use Formas de pagamento mostradas, e para esconder, os botões Mostrar formas de pagamento e Mostrar formas de entrega); e os direitos numa base com fundo próprio. Ao lado das formas de pagamento entram o selo Compra segura, que dá para desligar, e um selo de entrega, se você escrever o texto dele (por exemplo, “Entregamos em toda a Serra”).

Os outros três: Completo, as mesmas colunas sem o destaque da marca; Enxuto, uma faixa só, com a marca à esquerda, até sete links no meio e as redes à direita, e embaixo uma linha com o contato e as formas de pagamento; e Centralizado, tudo empilhado no meio — marca, frase sobre a loja e redes, os links numa linha só, separados por pontos, e o contato, o endereço e o pagamento. Nos dois últimos, os links das colunas viram uma lista só, sem repetir o mesmo endereço.

No celular, o rodapé vem em seções que abrem ao tocar. A marca, o texto sobre a loja e as redes ficam no meio, no topo. “Institucional” e “Fale com a gente” são linhas com uma setinha, e as formas de pagamento e os direitos ficam centralizados embaixo. Para mostrar tudo aberto, uma coluna embaixo da outra, escolha Rodapé no celular → Tudo aberto.

Os mesmos dados de contato (WhatsApp, telefone, e-mail, endereço, horário e CNPJ) aparecem na página de Contato, ao lado do formulário. No celular, o WhatsApp, o telefone e o e-mail viram botões no topo da página, para o cliente falar na hora, e o formulário vem embaixo. Para voltar ao formulário primeiro, escolha Página de contato no celular → Formulário primeiro, em Aparência → Contato e dados da loja. O texto entre os botões e o formulário (“Ou escreva para a gente”) também muda ali.

Na coluna da marca, o logo (ou o nome) vem com espaço embaixo, o texto sobre a loja numa medida confortável de ler, e o endereço e o CNPJ separados por uma linha, cada um com o ícone numa bolinha. Essa coluna é a mais larga do rodapé.

O rodapé começa claro, como o resto da loja. Em Tom do rodapé → Escuro ele fica na cor principal da loja quase no preto, com letras claras: é o desenho das lojas grandes, e separa bem o fim da página.

O cadastro de e-mail, logo acima do rodapé, tem dois estilos em Estilo do cadastro de e-mail: a faixa clara com tudo no meio, que é o padrão, ou a faixa na cor da loja, com o texto de um lado e o campo do outro. Combina bem com o rodapé escuro. O botão dele tem cor e texto próprios; no automático, segue os botões da loja.

As redes sociais ficam embaixo da marca. Para dar a elas uma coluna própria, com título, ponha Redes sociais em Ordem das colunas do rodapé; o título se muda em Título da coluna de redes sociais. Os Links do rodapé valem enquanto o menu do rodapé, em Conteúdo → Menus, estiver vazio.

O que não pode faltar num rodapé brasileiro:

• Razão social e CNPJ — passa confiança e é exigência de quem vende.
• Endereço e telefone.
• Trocas e devoluções, privacidade e termos.
• Formas de pagamento e entrega.

Rodapé é onde o cliente desconfiado vai checar se a loja é de verdade. Vale caprichar.

Menu

Onde: Conteúdo → Menus.

O menu do topo aponta para categorias, páginas ou endereços que você escrever.

Cinco a sete itens é o teto do que se lê de relance. Se você tem mais categorias que isso, use a barra de categorias para elas e deixe no menu só o essencial: a loja, as coleções da estação, o blog, o contato.

No celular o menu vira gaveta e a busca vira lupa, sozinhos — você não precisa configurar nada para isso.

Para o menu ficar ao lado do logo, e não numa linha embaixo, escolha em Aparência → Cabeçalho e logo Onde fica o menu → Ao lado da marca e desligue a barra de categorias: com ela ligada e o mesmo menu nas duas, a loja mostra só a barra, que tem os submenus. Em Menu em MAIÚSCULAS e em negrito, os itens ficam em caixa alta.