Cores e tipografia

Pré-requisitos

  • Ter uma loja ativa na Offstore.
  • As cores de fundo, principal e promocional estão disponíveis em todos os planos, inclusive o Free. A tipografia e as demais cores exigem o plano Pro ou superior.

Passo a passo

Configurar cores

  1. No painel administrativo, acesse Aparência > aba Personalizar.
  2. No painel esquerdo do editor visual, selecione a aba Geral.
  3. Localize a seção de Cores.
  4. Configure as três cores disponíveis:
    • Cor de fundo (background): cor de fundo das páginas da loja. Escolha a cor no seletor de cores ou digite o código hexadecimal.
    • Cor principal (primary): utilizada em botões, links e destaques. É a cor principal da sua marca.
    • Cor promocional: utilizada em preços promocionais, descontos, "Grátis" e no selo de promoção dos produtos. Para usar, toque em Ativar cor promocional e escolha a cor. Enquanto não for ativada, esses elementos continuam com as cores que a loja já usa. Depois de ativada, você pode trocar a cor quando quiser, mas não há opção para desativá-la. Lojas novas já começam com a cor promocional ativada, e ao aplicar um estilo pronto a cor passa a ser a do estilo.
  5. Ao definir a cor de fundo, o sistema ajusta automaticamente as cores auxiliares (texto, bordas, superfícies) para manter a harmonia visual.
  6. Acompanhe as alterações na pré-visualização em tempo real no painel direito.
  7. Clique em Salvar para aplicar as cores na sua loja.

Cores adicionais como texto, secundária, superfície, bordas e estados (sucesso, erro e alerta) estão disponíveis em Mais cores, a partir do plano Pro.

Configurar tipografia

  1. No mesmo painel, localize a seção Fontes.
  2. Escolha a Fonte de títulos e a Fonte de textos. A fonte padrão é Inter.
  3. Ajuste o peso dos títulos (negrito, regular) conforme a identidade da sua marca.
  4. Clique em Salvar para publicar a alteração.

Informações importantes

  • As cores são organizadas de forma inteligente: ao alterar uma cor, todos os elementos que a utilizam são atualizados automaticamente em toda a loja.
  • Ao definir a cor de fundo, o sistema ajusta automaticamente as cores auxiliares (texto, bordas, superfícies) para manter a harmonia visual. A partir do plano Pro, você pode alternar para o modo manual e personalizar cada cor individualmente.
  • No plano Free, você pode personalizar a cor de fundo, a cor principal e a cor promocional, além de escolher um estilo pronto. A tipografia e as demais cores exigem no mínimo o plano Pro.
  • Recomendamos escolher cores com bom contraste com o fundo para garantir a legibilidade e a acessibilidade da sua loja. Se a cor principal ou a cor promocional ficar quase invisível sobre o fundo, o editor mostra um aviso.
  • A pré-visualização no editor reflete com precisão como a loja ficará para os visitantes.

Perguntas frequentes

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

A cor promocional muda a cor dos selos de promoção? Sim. Com a cor promocional ativada, o selo de desconto dos produtos usa essa cor, na vitrine e na página do produto. Enquanto ela não for ativada, o selo continua com a cor que a loja já usa.

Posso mudar a cor ou o formato dos selos dos produtos? Não há uma opção separada. Os selos acompanham a loja: o de promoção usa a cor promocional, o de destaque usa a cor principal, o de novidade usa a cor de fundo e o de esgotado usa um cinza. O formato segue o arredondamento geral, e os selos ficam no canto superior esquerdo da foto. Para escolher quais selos aparecem, acesse Configurações > Preferências > Selos.

A fonte se aplica a toda a loja? Sim. As fontes escolhidas valem para toda a vitrine, incluindo títulos, descrições, botões e menus de navegação.

Quantas fontes posso utilizar simultaneamente? Você pode definir até duas famílias de fonte: uma para títulos e outra para textos. Também é possível ajustar o peso, o tamanho e a transformação dos títulos e a caixa dos textos e dos botões. Todas as opções de fonte exigem o plano Pro ou superior.

As cores geram impacto no carregamento da loja? Não. As cores são aplicadas via variáveis CSS e não afetam o desempenho de carregamento.

Artigos relacionados