Onde ficam essas configurações
A identidade visual é configurada por mercado e, dentro de um mercado, afeta todas as páginas de uma vez. Abra o construtor, escolha um mercado com o botão de mercados (bandeira do país) no topo da barra lateral esquerda e depois abra a guia Configurações (ícone de engrenagem). Configurações possui subguias nesta ordem: Identidade visual, Cores, Fontes, Layout, Animações, Automatizações, Entradas, Ícones, Restrições, Checkout, Formulário de checkout, Página de manutenção, CSS personalizado e Javascript personalizado. As alterações são aplicadas ao mercado selecionado e entram em vigor ao clicar em Publicar. Trocar de mercado recarrega as cores, fontes e layout próprios daquele mercado.
Esquemas de cores
A guia Cores comporta até 9 esquemas de cores. Ao atingir o limite, o cartão de adicionar vira um selo de contagem desativado, como 9/9. Cada seção, bloco e componente faz referência a um esquema pelo seu número, então ao alterar as cores de um esquema, todas as seções que o utilizam em todas as páginas são atualizadas instantaneamente. Clique com o botão direito em um cartão de esquema para duplicar ou excluir.
Funções de cor em cada esquema
Cada esquema define estas funções, todas em valores hexadecimais:
- Fundo: fundo principal da seção.
- Fundo interno: fundo levemente colorido para cartões e conteúdos aninhados dentro de uma seção.
- Título: cor do texto dos títulos.
- Texto: cor do texto dos parágrafos e do corpo.
- Texto importante: texto em destaque, como preços e valores realçados.
- Links e Links ao passar o mouse: cor do hiperlink nos estados normal e ao passar o mouse.
- Borda: bordas dos elementos e linhas divisórias.
- Destaque: anéis de foco e contornos de destaque que precisam se sobressair mais do que as bordas.
- Sombra: cor da sombra da caixa (geralmente semitransparente).
- Botão primário: fundo, texto e borda, cada um com sua própria cor ao passar o mouse (6 valores no total).
- Botão secundário: fundo, texto e borda, cada um com sua própria cor ao passar o mouse (6 valores no total).
- Campo de entrada fundo, texto, borda e rótulo: aparência dos campos de formulário.
- Fundo do campo de entrada ao passar o mouse: fundo do campo de entrada quando o cliente passa o mouse sobre ele.
Dicas para esquemas marcantes
- Mantenha um Fundo neutro e claro na maioria das seções e reserve cores fortes para um esquema de destaque em seções de destaque e chamadas para ação.
- Garanta que o Fundo do botão primário seja claramente distinto do Fundo da seção para que o botão se destaque.
- Defina o Fundo interno como um leve tom do Fundo principal para que os cartões se destaquem sem destoar.
- Busque pelo menos 4,5:1 de contraste entre o texto e seu fundo.
Fontes
A guia Fontes associa quatro funções a uma família tipográfica cada:
- Corpo: textos de parágrafo e descrições.
- Título: todos os títulos da loja.
- Subtítulo: títulos secundários e subtítulos de seções.
- Destaque: uma fonte estilística para preços, selos e ênfases decorativas.
Fontes disponíveis: Inter, Helvetica, SF Mono, New York, System UI, Roboto, Open Sans, Lato, Montserrat, Poppins, Raleway, Nunito, Merriweather, Playfair Display, Lora, PT Sans, PT Serif, Quicksand, Space Grotesk, DM Sans, Syne, Manrope, Outfit, Urbanist, Oswald, Bebas Neue, Abel, Abril Fatface e Acme. Para lojas com conteúdo em árabe, cada fonte é automaticamente pareada com uma correspondente árabe, então não é necessário selecionar uma fonte árabe separadamente.
Largura da página
A guia Layout possui um controle deslizante de Largura da página que define a largura máxima da grade de conteúdo principal, de 900 a 1400 px em passos de 100 (ou seja, 900, 1000, 1100, 1200, 1300 ou 1400; o padrão é 1200). Seções configuradas como Página ficam restritas a esse valor; seções em Total sempre ocupam toda a largura da tela. Em telas mais estreitas que a largura escolhida, as seções se ajustam para preencher 100% da tela.
Logotipo
O logotipo é definido em dois locais: no bloco Logo dentro da seção Cabeçalho e no bloco Sobre nós no rodapé. Clique no bloco e use o seletor de imagem de Logo para escolher uma imagem da sua biblioteca de mídia ou fazer upload de uma nova. Após escolher, defina a Largura e Altura de exibição (cada uma de 20 a 300 px); a outra dimensão é ajustada automaticamente para manter a proporção. O logotipo do cabeçalho tem padrão de 120 px de largura por 50 px de altura, e você pode definir sua posição horizontal (esquerda, centro ou direita) e o espaçamento. Por padrão, o logotipo do cabeçalho direciona para a página inicial; você pode torná-lo apenas decorativo desativando a opção Logo redireciona para a home no grupo Cabeçalho da guia Restrições.
Favicon
Defina o favicon na guia Identidade visual. Clique em Selecionar favicon e escolha uma imagem PNG, JPEG, WEBP ou ICO (tamanho recomendado 32x32 ou 16x16 px). Ele aparece nas abas do navegador e nos favoritos.
Imagem de fundo do corpo
Também na guia Identidade visual, você pode definir opcionalmente uma Imagem do corpo atrás de toda a loja (PNG, JPEG ou WEBP). Após selecionar uma imagem, dois controles aparecem: Tamanho (Cobrir preenche a tela, cortando se necessário; Conter ajusta a imagem inteira) e Repetir (ativado, a imagem se repete e rola com a página; desativado, uma única imagem fica fixa enquanto o conteúdo rola sobre ela). Use uma imagem bem comprimida para não prejudicar o carregamento da página.
CSS e JavaScript personalizados
Para alterações que as configurações padrão não permitem, as guias CSS personalizado e Javascript personalizado aceitam até 1.000 caracteres que são injetados e executados em todas as páginas da loja. Use com moderação. Para estilos restritos a uma seção, cada seção também possui sua própria guia CSS personalizado no painel de controle, que é mais segura do que o campo global.