Loja Virtual: aparência do site
Tudo o que é visual fica no menu Aparência, dentro do aplicativo Loja Virtual. São seis telas: Logomarca, Visual da loja, Banners, Páginas extras, Código HTML e Editar CSS.
LOGOMARCA. A marca da empresa no topo do site, em todas as páginas. Toda logo enviada é redimensionada para no máximo 400 x 400 pixels; para ela aparecer bem quando o link for compartilhado no Facebook, use pelo menos 200 x 200.
Na mesma tela fica o ÍCONE DA PÁGINA, o favicon — a imagenzinha que aparece na aba do navegador, ao lado do endereço da loja. O ideal é enviar em .ico, que todo navegador entende; outro formato também serve e é reduzido para 128 x 128.
VISUAL DA LOJA. As opções prontas de tema e cores, sem precisar mexer em código. Está dividida em:
- ESTRUTURA — alinhamento da logomarca, da coluna lateral, dos produtos mais vendidos e dos itens sugeridos;
- CORES — cor principal, secundária, menu de navegação e categorias, cor de fundo, barra superior, rodapé e botões;
- FONTES — fonte primária e fonte dos títulos;
- PRODUTOS — quantidade de produtos por linha;
- NOMENCLATURAS — onde você renomeia o que o visitante lê: Categorias, Páginas extras, Marcas, Descrição da loja, Redes sociais e o botão Comprar.
Ao lado há um simulador com Desktop, Tablet e Celular. Dá para ver o efeito de cada mudança antes de salvar.
BANNERS. Nome, imagem e a página em que ele aparece. A recomendação é usar imagem de no mínimo 1200px de largura — banner menor fica esticado e borrado. Com mais de um banner, vira carrossel: cada imagem fica 5 segundos e desliza. A ordem se muda ARRASTANDO o registro na lista.
PÁGINAS EXTRAS. Páginas de conteúdo próprio — sobre a empresa, política de troca, prazo de entrega. Você informa Nome, se ela fica Ativa e o Conteúdo, e ainda tem um bloco de SEO com meta title, meta keywords e meta description. Vale a pena: reduz pergunta repetida no atendimento.
CÓDIGO HTML. Para inserir códigos de terceiros, como rastreamento e ferramentas de marketing. Em cada código você escolhe:
- o TIPO — HTML, CSS ou Javascript;
- o LOCAL DA PUBLICAÇÃO — Cabeçalho, Corpo ou Rodapé;
- a PÁGINA DA PUBLICAÇÃO — Todas, Página inicial, Página do produto, Página da categoria, Página do carrinho, Página de pagamento ou Página de acompanhamento do pedido;
- e se ele está Ativo.
Código de rastreamento normalmente pede Cabeçalho e Todas as páginas; código de conversão, só a página de acompanhamento do pedido. Como é possível desativar um código sem apagar, teste desativando antes de excluir.
EDITAR CSS. Personalização avançada do tema escolhido: cores de texto (preço, título do produto), fundo do topo, do corpo e do rodapé, cores e tamanhos de botão. Só mexa com conhecimento prévio: CSS errado quebra o layout e pode impedir o funcionamento de partes da loja. Depois de alterar, confira o site inteiro, não só a página que você mudou.
TRÊS TELAS QUE PARECEM DE APARÊNCIA E FICAM EM OUTRO LUGAR
- REDES SOCIAIS está em Integrações › Redes sociais, e não em Aparência. É onde entram os endereços dos seus perfis.
- REDIRECIONAMENTOS está em Configurações › Redirecionamentos. Aponta um endereço antigo para um novo, para quem já tinha site e não quer perder links nem posição nos buscadores. Escreva as URLs sem o domínio, começando com barra: em URL antiga, algo como /categoria-antiga/produto-antigo; em URL atual, /nova-categoria/novo-produto. Os dois campos são obrigatórios.
- UPLOAD DE ARQUIVOS está em Configurações › Upload de arquivos. É onde ficam as imagens e arquivos usados no conteúdo das páginas e na personalização do tema. Você arrasta o arquivo para a área indicada ou clica em Selecionar imagens. São aceitos jpg, jpeg, gif, png, css, js e pdf, com até 5 MB cada, e no máximo 3 arquivos por envio — se mandar mais que isso, ou um formato de fora da lista, o sistema recusa e avisa.
Se o site quebrou logo depois de uma mudança, o suspeito é o CSS ou o HTML personalizado — desfaça a última alteração antes de procurar em outro lugar.