Cores e tipografia

Pre-requisitos

  • Ter uma loja ativa na Offstore.
  • Possuir um plano Pro ou superior.

Passo a passo

Configurar cores

  1. No painel administrativo, acesse Aparencia > aba Personalizar.
  2. No painel esquerdo do editor visual, selecione a aba Geral.
  3. Localize a secao de Cores.
  4. Configure as duas cores disponiveis:
    • Cor de fundo (background): cor de fundo das paginas da loja. Voce pode escolher entre tres opcoes pre-definidas (Branco, Claro ou Escuro) ou inserir uma cor personalizada pelo seletor de cores.
    • Cor principal (primary): utilizada em botoes, links e destaques. E a cor principal da sua marca.
  5. Ao definir a cor de fundo, o sistema ajusta automaticamente as cores auxiliares (texto, bordas, superficies) para manter a harmonia visual.
  6. Acompanhe as alteracoes na pre-visualizacao em tempo real no painel direito.
  7. Clique em Salvar para aplicar as cores na sua loja.

Cores adicionais como texto, secundaria, superficie, bordas, destaque, estados e selos estao disponiveis na secao Opcoes avancadas, exclusiva para planos Premium ou superior.

Configurar tipografia

  1. No mesmo painel, localize a secao de Tipografia.
  2. Use o seletor global para escolher uma familia de fonte que sera aplicada em toda a loja. A fonte padrao e Inter.
  3. Para usar fontes diferentes em titulos e textos, configure os seletores Fonte de titulos e Fonte de textos separadamente.
  4. Ajuste o peso dos titulos (negrito, regular) conforme a identidade da sua marca.
  5. Clique em Salvar para publicar a alteracao.

Informacoes importantes

  • As cores sao organizadas de forma inteligente: ao alterar uma cor, todos os elementos que a utilizam sao atualizados automaticamente em toda a loja.
  • Ao definir a cor de fundo, o sistema ajusta automaticamente as cores auxiliares (texto, bordas, superficies) para manter a harmonia visual. No plano Premium, voce pode alternar para o modo manual e personalizar cada cor individualmente.
  • A personalizacao de cores e tipografia requer no minimo o plano Pro. No plano Free, a loja utiliza as configuracoes visuais padrao.
  • Recomendamos escolher cores com bom contraste entre fundo e texto para garantir a legibilidade e acessibilidade da sua loja.
  • A pre-visualizacao no editor reflete com precisao como a loja ficara para os visitantes.

Perguntas frequentes

Posso usar cores personalizadas em formato hexadecimal? Sim. O seletor de cores permite inserir codigos hexadecimais para definir cores exatas da sua marca.

A fonte se aplica a toda a loja? Sim. A familia de fonte escolhida e aplicada globalmente em todos os textos da vitrine, incluindo titulos, descricoes, botoes e menus de navegacao.

Quantas fontes posso utilizar simultaneamente? Voce pode definir ate duas familias de fonte: uma para titulos e outra para textos. No modo basico, um seletor global aplica a mesma fonte em ambos, mas voce tambem pode configura-las separadamente. Alem disso, e possivel ajustar o peso dos titulos (negrito, regular). No plano Premium, opcoes adicionais como tamanhos, espacamentos e transformacoes de texto estao disponiveis.

As cores geram impacto no carregamento da loja? Nao. As cores sao aplicadas via variaveis CSS e nao afetam o desempenho de carregamento.

Artigos relacionados