O tema que você escolheu para a loja já vem com as cores e fontes definidas, mas é ideal que elas estejam alinhadas com a identidade visual da sua marca.
Veja abaixo como alterar:
1. Na plataforma da Loja HostGator, no menu superior, clique em Aplicativos - Se necessário, veja como acessar a plataforma
2. Em seguida, clique em Aparência
3. Na opção Temas e personalização, clique em Configurar
4. Na tela de “Temas e personalização”, clique em Personalizar tema
5. Em personalização do tema atual, clique na aba Config Visuais
6. Selecione abaixo a opção que deseja alterar e veja como fazer:
- - -
Cores da loja e dos botões
7. No elemento (texto, menu, cabeçalho, rodapé, etc.;) ou botão que deseja alterar, clique no campo da cor - Se desejar, veja mais detalhes sobre cada opção
Como sugestão de sites para escolher as cores para a loja, veja o Adobe Color, Color Hunt ou Coolors
- A) Campo “#” - caso já tenha definido o código da cor (código hexadecimal), informe para aplicar;
- B) Coluna de cores - caso não tenha o código, arraste as setas até a cor que deseja e em seguida, para definir a tonalidade, arraste o ícone.
8. Para concluir, clique em Salvar - Veja na loja como ficou a escolha das cores e caso deseje alterar novamente, faça o mesmo processo.
- - -
Cores do plano de fundo (Background)
7. Como plano de fundo da loja é possível definir uma cor ou adicionar uma imagem (que também será aplicada na página dos produtos). Abaixo escolha a opção que deseja aplicar e veja como fazer:
- - -
Cor
Para adicionar uma cor como plano de fundo da loja, mantenha aberta a opção Cor - Como sugestão de sites para escolher as cores, veja o Adobe Color, Color Hunt ou Coolors
- A) Campo “#” - caso já tenha definido o código da cor (código hexadecimal), informe para aplicar;
- B) Coluna de cores - caso não tenha o código, arraste as setas até a cor que deseja e em seguida, para definir a tonalidade, arraste o ícone.
8. Para concluir, clique em Salvar - Veja na loja como ficou a escolha da cor de fundo, caso deseje alterar novamente, faça o mesmo processo.
- - -
Imagem
Para adicionar uma imagem como fundo da loja, clique na opção Imagem
A) Enviar arquivo - clique sobre a imagem ou em Enviar arquivo - Para buscar no seu computador e adicionar
B) Repetir Backgroud - defina se você quer repetir a imagem e em qual sentido;
C) Alinhar horizontal - defina a posição do alinhamento horizontal da imagem inserida.
8. Para concluir, clique em Salvar - Veja na loja como ficou a escolha da imagem como fundo, caso deseje alterar novamente, faça o mesmo processo.
- - -
Fontes
7. Você pode alterar a fonte da loja através de duas opções:
- A) Fonte títulos - será o estilo da fonte principal da loja, selecione a que deseja - Por exemplo: os textos em destaque e menus;
- B) Fonte Corpo - será aplicada no cabeçalho e rodapé da loja – selecione a que deseja.
8. Para concluir, clique em Salvar - Veja na loja como ficou a escolha das fontes e caso deseje alterar novamente, faça o mesmo processo.
- - -
Detalhes sobre cada opção de Cor
- - -
Cores da estrutura (cor principal, secundária, menu, rodapé e outros)
A) Cor principal de sua loja - essa será a cor predominante em sua loja - Presente em alguns botões e links (ícone de perfil, ícone de carrinho; link da política de privacidade);
B) Cor secundária de sua loja - opção caso queira uma segunda cor em sua loja;
C) Cor textos - será aplicada aos textos comuns - Por exemplo: na descrição e preços dos produtos, nome das categorias e o cálculo do prazo e frete dentro da tela do produto;
D) Cor títulos - será aplicada nos títulos das seções da vitrine e na página do produto - Por exemplo: nos títulos “Produtos em Destaque”, Escolha por Categoria”, “Promoção”, o nome da categoria dentro da tela do produto;
E) Cor cabeçalho - será a cor de fundo do topo da loja;
F) Cor texto cabeçalho - será aplicada na maioria dos textos do topo da loja - Exceto o ícone de perfil, ícone de carrinho e o nome da loja - que as cores foram definidas na “Cor principal”;
G) Cor menu - será a cor de fundo do menu;
H) Cor texto do menu - será aplicada nos textos do menu - Por exemplo: no nome das páginas e categorias;
I) Cor rodapé - será a cor de fundo do menu;
J) Cor texto do rodapé - será aplicada em todos os textos do rodapé - Por exemplo: no nome das redes sociais; dados para contato, itens do mapa da loja, entre outros.
- - -
Cores dos botões
A) Cor botões “Comprar da vitrine” - será aplicado no botão da página em que os produtos serão listados - Por exemplo: dentro das categorias;
B) Cor botão “Comprar da página de produto” - quando o cliente clicar em “Comprar” na página da vitrine, será direcionado para a tela do produto, e a cor do botão aqui dentro, poderá ser de outra cor;
C) Cor botões de “Avise-me” - quando um produto estiver indisponível na loja, em vez ser exibido o botão “Comprar”, será apresentado o botão “Avise-me” - você pode escolher uma cor diferente para ele.
Caso fique com alguma dúvida, entre em contato com o suporte através deste formulário