Payly
Sign in Start building Dashboard

Defina suas cores, fontes e layout

Use a aba Design do site para definir de uma só vez as cores, as fontes, o tamanho do texto e o arredondamento dos cantos da sua loja, para todas as páginas.

O Design do site reúne as configurações que fazem a sua loja inteira parecer uma única marca: as cores, as fontes, o tamanho do texto e o arredondamento dos cantos. Você define cada uma uma só vez, e todas as páginas seguem. Blocos individuais ainda podem substituir essas configurações quando você quiser.

Abra o Design do site

  1. Abra o editor. Veja O editor em resumo.
  2. No painel de configurações à direita, clique na aba Design do site.
  3. Clique em um título para abri-lo: Identidade, Cores, Tipografia ou Layout.

As alterações aparecem na página na hora e são salvas automaticamente. A sua loja no ar muda quando você publica.

Cores

Abra Cores para ver as sete cores que formam todas as páginas.

O grupo Cores do Design do site, com as cores Destaque, Texto sobre o destaque, Fundo da página, Superfície, Texto, Texto secundário e Bordas, e uma mensagem de que todos os pares de cores são fáceis de ler
  • Destaque: a cor principal da sua loja. Botões e links usam essa cor.
  • Texto sobre o destaque: a cor das palavras sobre o destaque, como o texto de um botão.
  • Fundo da página: a cor que fica atrás das suas páginas.
  • Superfície: a cor de cartões e painéis, como os cartões de produto e as caixas de formulário.
  • Texto: a cor dos títulos e dos outros textos principais.
  • Texto secundário: a cor mais discreta usada em parágrafos, descrições e textos pequenos.
  • Bordas: a cor das linhas finas e dos contornos.

Escolha uma cor

  1. Clique em uma caixa de cor.
  2. No seletor que se abre, faça qualquer uma destas ações:
    • Clique ou arraste no quadrado grande para definir o brilho e a intensidade da cor, e arraste a faixa abaixo dele para mudar a cor em si.
    • Digite ou cole um código hexadecimal, como #2B2622, na caixa.
    • Clique em uma amostra em Cores do tema para reutilizar uma cor que você já tem, ou em uma de Recentes para uma cor que você escolheu há pouco.
    O seletor de cores aberto em Destaque, com um quadrado de cor, uma faixa de matiz, uma caixa de código hexadecimal, cores do tema e uma cor recente
  3. Clique em qualquer lugar fora do seletor, ou pressione Esc, para fechá-lo.

Confira se o texto está legível

Abaixo das sete cores, a Payly verifica se cada cor de texto é fácil de ler sobre a cor que fica atrás dela. Se estiver tudo certo, você vê Todos os pares de cores são fáceis de ler. Se algum par estiver fraco demais, a lista mostra qual é, indica a razão de contraste e quanto seria necessário, e oferece um botão Corrigir que ajusta a cor do texto para você.

Um aviso de contraste listando Texto secundário na página e Texto secundário nos cartões, cada um com sua razão de contraste e um botão Corrigir

A Payly não impede você de escolher um par de baixo contraste, mas texto cinza-claro sobre fundo claro é difícil de ler, principalmente em um celular sob o sol.

Tipografia

Abra Tipografia para escolher as suas fontes e os tamanhos de texto.

O grupo Tipografia com Fonte do texto, Tamanho base da fonte, Altura da linha do texto, Fonte dos títulos, Tamanho dos títulos, Peso dos títulos e Espaçamento entre letras dos títulos
  • Fonte do texto: a fonte de parágrafos, menus e botões.
  • Tamanho base da fonte: o tamanho do texto normal.
  • Altura da linha do texto: o espaço entre as linhas de texto. Um número maior dá mais espaço.
  • Fonte dos títulos: a fonte dos títulos. Escolha Usar a fonte do site para usar a fonte do texto também nos títulos.
  • Tamanho dos títulos: deixa todos os títulos maiores ou menores, em porcentagem.
  • Peso dos títulos: o quanto os títulos são em negrito.
  • Espaçamento entre letras dos títulos: aproxima ou afasta as letras dos títulos.

Escolha uma fonte

  1. Clique na caixa Fonte do texto ou Fonte dos títulos.
  2. Role a lista, que mostra cada nome na sua própria fonte. O grupo Recomendada, no topo, tem fontes que combinam com a maioria das lojas.
    A lista de fontes com uma caixa de busca e o grupo Recomendada: Inter, DM Sans, Work Sans, Manrope e outras
  3. Para encontrar uma fonte pelo nome, digite em Buscar fontes….
  4. Clique em uma fonte para usá-la.

A lista abrange toda a biblioteca do Google Fonts. As fontes que você usa são incluídas na sua loja quando você publica. Se uma fonte não estiver na lista, digite o nome exato dela no Google Fonts na caixa de busca e escolha-a em Usar mesmo assim.

Layout

Abra Layout para duas configurações:

  • Raio dos cantos define o quanto são arredondados os cantos de botões, cartões e imagens. Deslize até 0 para cantos retos e para a direita para cantos suaves. Os blocos cujo raio dos cantos está em Automático seguem esta configuração.
  • Direção do texto é Esquerda para direita para a maioria dos idiomas. Direita para esquerda inverte o layout inteiro para árabe, hebraico, persa e urdu.

Identidade

Abra Identidade para definir o seu Ícone do navegador, a pequena imagem exibida na aba do navegador. Use uma marca simples em vez do logotipo inteiro, porque ela é exibida com cerca de 16 pixels. Clique em Enviar imagem ou Ver imagens enviadas, como descrito em Adicione imagens e use a biblioteca de mídia. Se você deixar vazio, o seu logotipo será usado.

O seu logotipo não fica aqui. Ele fica no seu cabeçalho, onde aparece. Veja Personalize o cabeçalho e o rodapé.

Mude apenas um bloco

Todo bloco de texto, título e botão pode substituir a fonte, o tamanho e as cores do site. Selecione o bloco e abra o grupo Tipografia ou Aparência. Veja Edite textos, títulos e botões.

Dica: Se você quiser um visual completamente diferente, pode recomeçar a partir de um dos designs prontos. Veja Troque para outro design de site.

Artigos relacionados

Last updated 2026-10-03
Back to the help center

We use only the cookies needed to keep you signed in, plus first-party analytics. No advertising cookies, no third-party trackers, and we never sell your data.