Como mudar a Aparência da Web Loja?

Aparência

O módulo de aparência subdivide-se em:

  1. Temas – Possui temas pré montados para sua loja. Um tema é um conjunto de topo, rodapé e uma folha de estilos que altera as cores e fontes da sua loja. Ao escolher um tema ele é aplicado ao site de forma a alterar toda sua aparência instantaneamente.
  2. Topos – Contém diversos topos pré montados para variados tipos de negócios, separados por categorias, para que o usuário navegue entre eles e escolha aqueles que estarão disponíveis para publicação.
  3. Gerenciar Topos – Permite que topos escolhidos dentro da opção “Topos” ou topos criados pelo usuário sejam ativados, alterando o topo do site.
  4. Fundos – Controla o fundo do site, permite escolher padrões coloridos, preto e branco ou cores chapadas.
  5. Produtos – Controla aspectos da vitrine, listagem de produtos e página de detalhes de um produto além de oferecer a opção de exibir um simulador de pagamento parcelado através do PagSeguro.
  6. Rodapé – Permite personalizar o rodapé do site com um editor HTML.



Para acessar ao módulo de Aparência, clique sobre a opção “Aparência” no menu superior. Um menu aparecerá imediatamente abaixo deste com as opções do módulo.


A opção temas apresenta diversas imagens, elas são pré visualizações da aparência da loja quando esta utiliza-se do tema em questão. Ao manter o mouse sobre a imagem uma pré visualização maior fica disponível. Para ativar o tema basta clicar sobre a imagem escolhida e confirmar o uso do tema na janela que aparecerá.

 

Tela de temas para a loja. Permite a troca do visual do site em um único clique.

 

Para escolher entre os vários topos pré disponibilizados, basta clicar sobre a segunda opção do segundo menu superior “Topos”. O usuário será redirecionado a uma tela contendo diversas categorias na lateral esquerda. Ao clicar sobre uma categoria uma listagem dos topos disponíveis aparecerá. Cada topo disponível para gerenciamento aparece com uma borda escura ao seu redor.

Para adicionar um topo à lista de topos gerenciáveis basta clicar sobre o topo escolhido. Imediatamente o mesmo ganhará um contorno indicando sua disponibilidade. Para uma visualização maior do topo, basta manter o mouse sobre a imagem.

Tela de topos: Permite escolher os topos que serão gerenciáveis.

 

Depois de escolher os topos que mais se encaixam à sua loja, é hora de ativar aquele que irá aparecer em sua loja. Para isso faremos uso da opção “Gerenciar Topos”, no segundo menu superior. Ao clicar sobre esta opção o sistema carregará uma página onde é possível ver uma listagem de todos os topos escolhidos. Acima de cada topo encontramos três ícones que respectivamente permitem editar, excluir e ativar o topo. É possível ativar diversos topos com intervalos de datas diferentes, para que eles sejam alterados automaticamente. Extremamente útil para aqueles que já possuem peças publicitárias para eventos ou datas específicas do ano.


No topo da página é possível clicar na opção “Incluir” para fazer o upload de uma imagem existente em seu computador e dessa forma torná-la um topo gerenciável. Este topo será apenas do usuário em questão, não estando disponível para uso dos outros usuários do sistema.

Ao editar ou adicionar um topo podemos adicionar a ele uma breve descrição, escolher seu tipo (imagem, animação flash ou código HTML) e no campo abaixo do tipo adicionar o topo escolhido.. Imediatamente abaixo pode-se limitar o tamanho e altura do topo e definir se a exibição do mesmo se dará permanentemente ou durante um dados intervalo de tempo. Na última linha do formulário o campo “ativo” controla a visualização ou não do topo no site; É necessário que este campo esteja marcado para que o cliente o veja na WebLoja.

Listagem de topos gerenciáveis, e  adição de um novo topo.

 

 A quarta opção do sub menu superior “Fundos” controla a aparência do fundo do site da WebLoja. Ao clicar sobre esta opção vemos uma tela que nos oferece três abas: Lisos, Texturas Coloridas e Texturas.

Cada uma delas apresenta uma série de imagens que são pré visualizações da cor ou textura disponível. Ao posicionar o mouse sobre um destes itens na extrema direita da tela veremos um comparativo entre o fundo atual e o fundo em questão, oferecendo uma visão clara da mudança que ocorrerá caso o fundo seja escolhido.

Para escolher um novo fundo, basta clicar sobre a opção desejada. As alterações são visualizadas no site em tempo real.

 

Fundo

 

 A penúltima opção do módulo (Produtos), contém opções específicas para o layout das páginas de categorias e subcategorias de produtos, listagem dos mesmos, itens relacionados e quantos produtos em destaque e em promoção aparecerão na vitrine (página inicial) do site.

 

Tela de controle de aparência de produtos<style="padding-left: 30px;">As duas primeiras opções “Mostra Categorias” e “Mostrar Subcategorias” controlam a exibição das categorias e subcategorias no menu lateral do site. A opção “Ordem Vitrine” possui três opções, Categoria – que faz com que sejam exibidos apenas produtos de uma determinada categoria – Promoção – que faz com sejam exibidos apenas produtos em promoção e Sortido que pega produtos aleatórios da WebLoja para exibir na página inicial.

Abaixo é possível controlar a quantidade de itens que serão exibidos por página em uma busca ou categoria, na vitrine, quantos itens serão destacados nas páginas de categorias e quantos itens serão mostrados na caixa de “Em oferta”. Ao entrar na página de detalhes de um produto, abaixo deste são exibidos produtos relacionados, a quantidade de produtos que serão exibidos nesta página também é controlada neste módulo. Quando uma busca é feita pelo usuário do site, uma listagem de produtos que se encaixem na busca é exibido, a penúltima opção deste formulário (“Ordem Produtos”) controla em que ordem estes produtos serão exibidos, escolha código para exibi-los na ordem em que foram cadastrados, “Descrição” para ordená-lo alfabeticamente ou “Prioridade” para exibi-los respeitando a prioridade que você escolheu na listagem de produtos.

Por fim, as duas últimas opções dizem respeito à forma como os produtos serão exibidos nas listagens e como a página de detalhes do produto se comportarão. Em “Model de Listagem” vemos vários ícones demonstrando como as imagens e textos do produto serão listados em cada opção. Em “Detalhes do produto” escolha Catálogo caso não trabalhe com PagSeguro ou deseje absorver os juros de alguns parcelamentos. Caso contrário recomendamos que escolha a modalidade “E-Commerce”, que exibe uma tabela com a simulação de preços conforme o número de parcelas em um determinado cartão de crédito. <style="text-align: center;">

Da esquerda para direita caixas de ofertas, destaque e menu mostrando categorias e sub categorias. <style="padding-left: 30px;">A última opção do módulo, “Rodapé” permite que seja escolhido entre o rodapé padrão, ou que se codifique um utilizando HTML (opcionalmente o editor visual). Aconselhamos que somente pessoas com conhecimento técnico avançado em HTML e CSS escolha a segunda opção.

 

Tela de rodapé, com editor visual aberto para edição do campo