Como configurar cores, fontes e cantos da loja
Cor, tipografia e arredondamento são a "personalidade" da loja — valem da home ao checkout, inclusive dentro dos banners. Neste tutorial você define a cor da marca, a paleta de fundo, o par de fontes, e o raio dos cantos — sempre com a prévia reagindo ao vivo. Tudo no menu lateral Design da loja (/loja/tema), visão Tudo de uma vez.
Cor da marca
Na seção Cores, a cor da marca comanda botões, preços e destaques. Use um
dos presets (Azul, Verde, Terracota, Violeta, Preto) ou clique no último quadrado
para escolher uma cor personalizada — dá para colar o código hex da sua
identidade (ex.: #111114).
No gif, testamos Verde e Terracota e fechamos no Preto — elegante e sempre legível, combina com a Elorise.
Muito importante
a cor da marca vira o fundo do botão Comprar. Cores claras (amarelo, lima, pastel) deixam o texto do botão ilegível — se a sua identidade é clara, use-a nos detalhes e escolha uma cor escura para os botões.
Paleta neutra
A paleta neutra define o fundo e os cinzas da loja:
- Claro — branco clássico, neutro, foco total no produto;
- Escuro — fundo escuro de alto contraste, para marcas de atitude;
- Areia — off-white quente, sofisticado; muito usado em moda e beleza.
Dica
produto com fotos em fundo branco pede paleta Claro ou Areia — no Escuro, as fotos viram retângulos brancos flutuando na página.
Fontes
Em Tipografia & cantos, dois seletores: fonte dos títulos e fonte do corpo. As opções: Instrument Sans, DM Sans, Space Grotesk, Playfair Display, Libre Franklin e IBM Plex Mono — cada uma com prévia de letras no próprio menu.
No gif, escolhemos Playfair Display (serifada, cara de editorial de moda) para os títulos e mantivemos Instrument Sans no corpo.
Dica
a fórmula segura é título com personalidade + corpo discreto. Serifada nos títulos (Playfair) = sofisticação; geométrica (Space Grotesk) = moderna; mono (IBM Plex Mono) = techie. No corpo, fique com uma sans limpa — texto corrido em fonte "de personalidade" cansa rápido.
Raio dos cantos
O controle deslizante Raio dos cantos (0 a 24px) arredonda botões, cards e campos da loja inteira:
- 0px — tudo reto: editorial, sério, minimalista;
- 6–10px — arredondamento sutil, o meio-termo que funciona para quase todo mundo;
- 16px+ — bem arredondado: amigável, jovem, cara de app.
A prévia responde em tempo real — deslize e observe o botão Comprar mudando.
Salve e publique
Salvar alterações, e Publicar layout na barra escura para valer na loja.
Atenção
cor, fonte e raio mudam a loja inteira de uma vez — depois de publicar, navegue pela home, por uma página de produto e pelo carrinho para conferir o conjunto.
Pronto!
Identidade consistente da home ao checkout.