Logo, cores e fontes

O logo

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

Suba em PNG com fundo transparente, se você tiver. Fundo branco num cabeçalho colorido aparece como um retângulo, e é o erro mais visível de loja nova.

Há também o ícone do navegador (aquele quadradinho na aba) e a altura do logo, para ajustar sem cortar.

Se você não tem logo, a loja mostra o nome em texto — e isso é melhor que um logo mal feito.

As cores

Onde: Aparência → Cores e estilos prontos.

A que importa é a cor principal: ela pinta os botões, os links e os detalhes. Se você mexer em uma só, mexa nessa.

Regra que vale para qualquer loja: uma cor forte, o resto neutro. Cor forte demais cansa e, pior, some — quando tudo grita, nada chama atenção, e o botão de comprar deixa de se destacar.

Se a sua marca já tem cor, use o código dela (aquele que começa com #) em vez de escolher no olho.

As demais cores — fundo, texto, linhas — podem ficar em Automática: a loja escolhe um tom que combina e garante contraste legível.

Além das cores gerais, cada parte da loja pode ter as suas — e cada uma fica no grupo da própria parte, em Automática de fábrica:

• Cabeçalho e logo e Barra de categorias — cabeçalho, barra de categorias, o botão “Todas as categorias”, o menu que abre na barra (a lista e o painel), a busca e os ícones.
• No celular — o menu (a gaveta) e a barra de baixo.
• Produtos, Filtros e Benefícios — cartão do produto, bloco Categorias da home, caixa de filtros, paginação e benefícios.
• Fotos do produto e Nome, preço e estoque — o fundo das fotos, o nome e o estoque.
• Carrinho e checkout — o carrinho lateral, a barra de frete grátis e os avisos.
• Minha conta — o menu da conta e a lista de pedidos.
• Rodapé — fundo, texto, títulos, linhas e o botão do cadastro de e-mail.
• Aviso de cookies.

Nas partes com fundo, texto e destaque, escolher só o fundo basta: o texto, as linhas e o texto apagado se acertam sozinhos para dar leitura, e o destaque pinta os botões e o item escolhido.

Os avisos que aparecem no carrinho, no checkout e no produto — “Produto adicionado ao carrinho”, “Tem um cupom?”, “Preencha o CEP” — vêm em verde, azul e vermelho. Para outras cores, escolha em Aparência → Cores e estilos prontos → Cores: Aviso de sucesso, Aviso de informação e Aviso de erro. Use um tom forte: é a cor do texto e do ícone, e o fundo e a borda saem dela, clarinhos. Dentro de Minha conta os avisos ficam neutros, de propósito: lá eles são telas vazias, como “você ainda não fez nenhum pedido”.

As fontes

Onde: Aparência → Fontes.

Duas escolhas: a dos títulos e a do texto. As combinações prontas já resolvem isso bem.

Se for escolher à mão: fonte com serifa (aquelas com “pezinhos”) passa tradição e cabe em joia, vinho e decoração; sem serifa passa modernidade e cabe em quase todo o resto. Não use mais de duas.

A loja começa com o texto em Inter e os títulos em Lexend, as duas de desenho atual e fáceis de ler no celular. Também há a Plus Jakarta Sans e a Space Grotesk, de traço mais atual — a segunda com jeito técnico, boa para eletrônicos, peças e esporte —, a Nunito, arredondada e amigável, a Baloo 2 (Encorpada), grossa e redonda como título de embalagem — boa para snack, doce e suplemento —, e a Playfair, com serifa, elegante nos títulos. Essas sete a loja baixa sozinha para quem visita; “Do sistema” e “Clássica” usam a fonte que o aparelho já tem e abrem um pouco mais rápido.

Os títulos das seções

“Mais vendidos”, “Novidades”, “Categorias”: os títulos das seções da página começam à esquerda, com o “Ver todos” e as setas do outro lado. Em Aparência → Fontes, Alinhamento dos títulos de seção → No meio põe o título no centro (o “Ver todos” continua à direita; no celular, vai para baixo do título), e Títulos de seção em MAIÚSCULAS escreve todos em caixa alta, e também os nomes nos cartões do bloco Categorias — o jeito das lojas de marca própria, como snacks, suplementos e moda jovem.

Cantos e espaçamento

Onde: Aparência → Layout e espaços.

O arredondamento muda o tom da loja inteira: cantos retos são sérios e editoriais; muito arredondados são amigáveis e informais. É uma escolha só, e ela vale para botões, cartões e imagens.

Produtos por linha e Espaço entre produtos moram em Aparência → Produtos e filtros, junto do resto da vitrine; as cores do preço, em Preços e pagamento, na mesma área.

Se estiver na dúvida

Escolha o estilo pronto mais parecido com o que você quer e mexa só na cor principal. Levar a loja para o ar bonita e simples vale mais que passar uma semana escolhendo tons — e a pré-visualização continua ali para você melhorar depois.