Onde estas definições ficam
Estas definições são configuradas por mercado e, dentro de um mercado, afetam todas as páginas ao mesmo tempo. Abra o construtor, escolha um mercado com o separador de mercado (ícone de bandeira do país) na barra lateral esquerda e depois clique no separador Definições (ícone de engrenagem). As alterações aplicam-se ao mercado que tem selecionado e entram em vigor quando clica em Publicar. Para ver a lista completa de todas as definições, consulte a referência de definições do construtor.
Esquemas de cores
A Storeep usa uma paleta de até 9 esquemas de cores. Cada secção, bloco e componente da sua loja referencia um destes esquemas pelo seu número (1 a 9). Alterar as cores de um esquema atualiza instantaneamente todas as secções que o utilizam, em todas as páginas.
Papéis de cor dentro de cada esquema
Cada esquema define os seguintes papéis de cor, todos definidos como valores de cor hexadecimais:
- Fundo: a cor de fundo principal da secção.
- Fundo Interno: um fundo com uma tonalidade subtil, usado em cartões e áreas de conteúdo aninhadas dentro da secção.
- Cor do Título: a cor do texto dos títulos.
- Cor do Texto do Corpo: a cor do texto dos parágrafos.
- Cor do Texto Destacado: uma cor de texto em ênfase, usada para preços, selos de poupança e valores do temporizador de contagem decrescente. Normalmente o tom mais escuro ou mais forte da paleta.
- Cor da Ligação: a cor predefinida dos hiperlinks.
- Cor da Ligação ao Passar o Rato: a cor do hiperlink quando um comprador passa o rato sobre ela.
- Cor da Borda: a cor das bordas dos elementos e das linhas separadoras.
- Cor do Contorno: a cor dos anéis de foco, dos destaques de seleção por teclado e dos contornos de realce que precisam de se destacar mais do que as bordas normais.
- Cor da Sombra: a cor das sombras (normalmente com alguma transparência).
- Fundo do Botão Primário: a cor de preenchimento dos botões primários.
- Texto do Botão Primário: a cor da etiqueta nos botões primários.
- Borda do Botão Primário: a cor da borda dos botões primários.
- Fundo do Botão Primário ao Passar o Rato: a cor de preenchimento do botão primário ao passar o rato.
- Texto do Botão Primário ao Passar o Rato: a cor da etiqueta do botão primário ao passar o rato.
- Borda do Botão Primário ao Passar o Rato: a cor da borda do botão primário ao passar o rato.
- Fundo do Botão Secundário: a cor de preenchimento dos botões secundários.
- Texto do Botão Secundário: a cor da etiqueta nos botões secundários.
- Borda do Botão Secundário: a cor da borda dos botões secundários.
- Fundo do Botão Secundário ao Passar o Rato: a cor de preenchimento do botão secundário ao passar o rato.
- Texto do Botão Secundário ao Passar o Rato: a cor da etiqueta do botão secundário ao passar o rato.
- Borda do Botão Secundário ao Passar o Rato: a cor da borda do botão secundário ao passar o rato.
- Fundo do Campo: a cor de fundo dos campos de formulário.
- Cor do Texto do Campo: a cor do texto dentro dos campos de formulário.
- Cor da Borda do Campo: a cor da borda dos campos de formulário.
- Cor da Etiqueta do Campo: a cor do texto da etiqueta acima dos campos de formulário.
- Fundo do Campo em Foco: a cor de fundo do campo quando um comprador foca ou passa o rato sobre o campo.
Dicas para esquemas de cores fortes
- Use uma cor clara e neutra para o Fundo na maioria das secções e reserve as cores fortes para um único esquema de realce, usado em secções de destaque e de apelo à ação.
- Faça com que o seu Fundo do Botão Primário seja visualmente distinto do Fundo da secção, porque o botão tem de se destacar claramente.
- Mantenha o Fundo Interno como uma tonalidade muito ligeira do Fundo principal, para que os fundos dos cartões se distingam sem serem agressivos.
- Procure pelo menos 4,5:1 de contraste entre a Cor do Texto do Corpo e o Fundo, e entre o Texto do Botão Primário e o Fundo do Botão Primário.
Tipografia
Quatro papéis de fonte controlam a tipografia em todas as páginas. Cada papel corresponde a uma família de fontes da biblioteca disponível.
- Corpo: a fonte principal para o texto dos parágrafos e as descrições.
- Título: a fonte de todos os títulos em toda a loja.
- Subtítulo: a fonte para títulos secundários e subtítulos de secção, fazendo a ponte entre os estilos de título e de corpo.
- Realce: uma fonte estilística para preços, selos e ênfase decorativa.
As fontes disponíveis incluem: 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, as fontes são emparelhadas automaticamente com as suas correspondentes em árabe: por exemplo, a Inter é emparelhada com a Cairo, e a Poppins com a Tajawal. Não precisa de selecionar a fonte árabe em separado.
Largura da página
A definição global de Largura da Página controla a largura máxima da grelha de conteúdo principal, em píxeis. As secções definidas com largura de Página ficam limitadas a este valor; as secções definidas como Total ocupam sempre toda a área visível, independentemente disso. Valores disponíveis: 900, 1000, 1100, 1200 (predefinido), 1300 e 1400 px. Em áreas visíveis mais estreitas do que a largura selecionada, as secções encolhem automaticamente para preencher 100% do ecrã.
Logótipo
O logótipo é definido dentro do bloco de logótipo da secção Cabeçalho e dentro do bloco Sobre Nós no rodapé. Clique no bloco de logótipo no painel de controlo e depois clique em + Adicionar média ou + Adicionar imagem para carregar o seu logótipo a partir do seu dispositivo ou escolhê-lo na sua biblioteca de média. Após o carregamento, defina a largura de exibição (20 a 300 px) e a altura (20 a 300 px); a outra dimensão é ajustada automaticamente para manter a proporção.
Favicon
O favicon é definido em Definições → Identidade Visual no construtor. Clique no campo do favicon e carregue uma imagem (recomendado: uma imagem quadrada). O favicon aparece nos separadores do navegador e nos marcadores.
Imagem de fundo do corpo
Também em Definições → Identidade Visual: pode, opcionalmente, definir uma imagem de fundo para toda a página. Configure como ela é dimensionada (Cobrir preenche toda a área visível, Conter ajusta a imagem dentro dela) e se ela se repete (em mosaico) ou permanece como uma única imagem por trás do conteúdo que rola.
CSS e JavaScript personalizados globais
Para personalizações avançadas que as definições padrão não conseguem alcançar, as Definições disponibilizam um campo de CSS Global (até 1000 caracteres) e um campo de JS Global (até 1000 caracteres). O CSS introduzido aqui é injetado em todas as páginas da loja; o JS introduzido aqui é executado em todas as páginas. Use-os com moderação e prefira a secção de Código Personalizado para personalizações específicas de cada página.