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, e a segunda voltada para o CORPO 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:#ffe4e1;
    }

    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{
    background:#ffe4e1;
    }

O site ficou assim após inserirmos estes códigos...

Uma imagem no plano de fundo e uma cor no fundo somente da estante de produtos.

Este resultado é se não utilizarmos uma imagem no plano de fundo, e somente a cor de fundo.

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?