Mudar as cores do seu site não é mais uma tarefa difícil pra você, o passo a passo abaixo vai te mostrar todos os caminhos e os códigos utilizados para mudar as cores dos campos desejados.

Separamos este guia em duas partes, sendo a primeira voltada para o CABEÇALHO, a segunda voltada para o CORPO do seu site, e por ultimo o passo a passo para alterar o RODAPÉ do seu site.

Primeiramente vamos acessar o seu Editor de Frente de Loja clicando no botão PERSONALIZAR LOJA.

Acessa o seu Editor de Frente de Loja utilizando o seu e-mail e senha.

Segue o caminho LAYOUT BASE > INSERIR CÓDIGO.

O espaço onde você vai inserir os Códigos CSS é o ultimo quadro, o quadro de CSS CUSTOMIZADO.

Todas as cores são inseridas através do seu COLOR CODE. Por exemplo:

Cada cor tem o seu código específico, para saber o código da cor desejada, basta procurá-la dentro destes sites.

https://www.color-hex.com/color-names.html (Procura pelo NOME)

https://encycolorpedia.pt/ (Seleciona a cor dentro da palleta e copia o seu código correspondente a esta cor)

Vamos para os códigos...

Cada código é uma ação que irá afetar uma região do site, enumeramos as regiões nesta imagem e mostramos os códigos específicos para realizar a alteração em cada região desejada.

  • CABEÇALHO (HEADER)

Abaixo temos uma imagem com todo o cabeçalho e os campos mais importantes onde vamos realizar as edições das cores. Separamos estes campos em 6.

  1. O NÚMERO 1 É REFERENTE AO CABEÇALHO NO GERAL, PEGANDO MAIOR PARTE DA REGIÃO.

    .header {
    background:#ffffe0;
    }
  2. O NÚMERO 2 VAI ALTERAR A REGIÃO ONDE FICAM AS CATEGORIAS

    .header__nav a {
    color: #104e8b;
    }
    .header__nav a:hover {
    background: #FFFFFF;
    }
  3. O NÚMERO 3 VAI ALTERAR A COR DO ÍCONE REFERENTE AO USUÁRIO DA CONTA

    .fa-user{
    color:#104e8b;
    }
  4. O NÚMERO 4 VAI ALTERAR A COLORAÇÃO DO ÍCONE DA SACOLA (CARRINHO DE COMPRAS)

    .fa-shopping-bag{
    color:#104e8b;
    }
  5. O NÚMERO 5 VAI ALTERAR AS TRÊS LINHAS QUE EXPANDE O MENU LATERAL DO LADO ESQUERDO.

    .header__toggler-icon {
    color:#104e8b;
    }

  6. O NÚMERO 6 VAI ALTERAR A REGIÃO ACIMA DO CABEÇALHO PADRÃO, ONDE FICA AS INFORMAÇÕES DE REDES SOCIAIS E CONTATOS.

    .top-bar {
    background:#104e8b;
    }
    .top-bar__nav {
    color:#ffffe0;
    }

No final de tudo, seu quadro de CSS ficará assim:

As numerações dentro da imagem são para identificar qual região será afetada de acordo com a imagem anterior onde mostramos os campos.

O RESULTADO DESTAS ALTERAÇÕES:

  • CORPO DO SITE (BODY)

    Dentro do corpo do site, o que normalmente pode ser mudado é a cor de fundo do site, ou inserir um plano de fundo no site, uma imagem.

    No código abaixo, estamos inserindo uma imagem de fundo no site.

    body{
    background-image: url("https://f.vividscreen.info/soft/37df7e756d595fbf6d9b82d748453bf1/Pink-Flowers-Wallpaper-1920x1080.jpg");
    }

    imagem utilizada no código acima: https://f.vividscreen.info/soft/37df7e756d595fbf6d9b82d748453bf1/Pink-Flowers-Wallpaper-1920x1080.jpg

    No código abaixo, estamos inserindo somente uma cor de fundo no site.

    body{
    background:#E6E6DC;
    }

    Caso utilize a seção ESTANTE DE PRODUTOS, para alterar a cor de fundo desta seção tbm é necessário um código.

    .products-carousel, .products-carousel__title span,.products-carousel__title a{
    background:#E6E6DC;
    }

Ficando assim depois de preenchermos.

O site ficou assim após publicarmos...

  • RODAPÉ (FOOTER)

Abaixo temos uma imagem com todo o rodapé e os campos mais importantes onde vamos realizar as edições das cores.

Em CSS customizado insira o código:

.footer { 
background:#00628B;
}

.footer a, .footer__store, .footer__tittle, .footer__title{
color:#E6E6DC;
}

O primeiro código vai alterar a cor de fundo do rodapé, e o segundo código vai alterar a cor da fonte das palavras que estão dentro do rodapé (título, lista, telefone, endereço, etc)

Depois de publicar, nosso rodapé ficará com esta aparência...


Estes códigos são bem básicos, se por acaso tiver alguma dúvida sobre algum componente que deseje mudar a cor, pode nos chamar no site que a gente te informa qual o código correspondente a este componente.

Esperamos ter te ajudado com este artigo 😊

Encontrou sua resposta?