Configurando um visual rápido

Olá lojista, nesse tutorial será mostrado como fazer um visual bom e rápido para sua loja virtual. Gostaria de salientar que, foi utilizado o logo da grandíssima marca Supermercados BH como base para esse tutorial com fins educativos. Com o intuito de mostrar e ensinar aos lojistas, uma maneira rápida de criar um visual bacana para suas respectivas lojas.

Bom, primeiro é necessário que possua o logo da sua loja. A escolha das cores será de acordo com as cores do logotipo. Você deverá utilizar algum software gratuito como o Gimp, ou um site da internet que mostre o código hexadecimal das cores selecionados, como o site a seguir http://imagecolorpicker.com, onde deverá fazer o upload da imagem e assim clicará na cor desejada e aparecerá o código da cor, copie e guarde. Também é possível utilizar essas ferramentas em alguns navegadores como Firefox que possui um próprio seletor de cores em Ferramentas > Densenvolvedor web > Conta-gotas, alguma extensão do google chrome, ou seja, existe diversas possibilidades para escolher essas cores, no seu logotipo.

Abaixo será mostrado com Firefox:

A imagem acima mostra como encontrar o selecionador de cores no Firefox. Após conseguir, você deverá escolher 2 cores presentes no seu logotipo para ser as cores primárias e secundárias da sua loja. E depois, escolher uma terceira cor que contrasta com essas duas, caso seu logotipo não possua 3 cores, não há problema, apenas escolha uma cor qualquer (a gosto) que contraste com essas duas cores.

Abaixo será mostrado a seleção das cores primárias e secundárias:

No caso a cor primária será : #FCED20. (Salve as cores no seu computador, pois irá precisar dos códigos delas).

No caso cor secundária: #E62224

No caso a cor neutra será: #353084.

Você deverá inserir essas cores no visual da loja, aqui. Como mostra a imagem abaixo:

Veja que a cor primária, secundária e neutra foram inseridas.

Para topo, cabeçalho e menu escolha a cor primária e encontre 3 tons (variando as cores na paleta de cores como mostra a imagem abaixo), sendo ela um bem claro, uma intermediária e outro mais escuro. Para o topo insira um desses tons, talvez uma cor mais intermediária. No cabeçalho uma mais clara e no menu uma mais escura.

Cor primária mais clara: #fffbc4

Cor primária intermediária: #fff89c

Cor primária mais escura: #ebdb00.

Para a fonte de cada, utilize a cores mais fortes ou mais claras dependendo do visual da sua loja. No caso em questão selecione sua cor secundária e através da paleta de cores, dê uma boa escurecida, quase preto e insira nas fontes de Topo, Cabeçalho, Menu.

Como mostra a imagem abaixo:

Para o rodapé utilizar cor secundária bem escura ou a secundária mesmo, já que dá uma escurecida por si só. Com relação à fonte, use cor primária mais clara.

Como mostra a imagem abaixo:

Para maioria das lojas o ideal é uma cor branca no conteúdo. Porém, ao deixar em branco, o menu vertical ficará com tons de cinza, caso não o satisfaça. Você poderá escolher a cor primária da sua loja e clarear ela até ficar com um tom próximo ao branco, logo o seu menu ficará com uma cor mais agradável.

Como mostra a imagem abaixo:

Cor bem clara: #fffeeb.

Clique em Salvar.

Para inserir o logo, clique aqui ou acesse Configurações > Aparência > Logotipo. Insira o logo, clique em salvar.

No avatar do painel clique em ir para sua loja e verá uma página com visual bacana, apresentável, com as cores condizentes com a sua marca e melhor, feito em poucos minutos.