Já que estamos montando nossa loja virtual, veremos então como podemos personalizar o visual dela. Veremos então como podemos personalizar sua loja, trocando temas, acrescentando logotipos e outras opções.

Localizando e trocando o logotipo

Inicialmente, para identificar o caminho onde a imagem está armazenada em nosso servidor, basta clicar com o botão direito sobre a imagem e usar a opção Abrir imagem em nova aba. O caminho da imagem será algo comoskin/frontend/rwd/default/images/logo.gif,

Imagens no formato GIF ou PNG podem ter fundo transparente, para que a imagem fique sobreposta ao fundo original, do tema. Logo, é melhor que você use um software de edição de imagens. Recomendamos o Adobe Fireworks, ou o GIMP (livre).

Agora, para subir o arquivo para o servidor, você deverá usar um cliente de FTP. Recomendamos o FileZilla, que é gratuito, facilmente encontrado na internet e muito eficiente. Logo, execute o FileZilla. Preencha com o nome da máquina, usuário e senha de FTP. Caso tenha alguma dúvida em relação a essas informações, faça contato com o suporte técnico da Hostnet.

No lado esquerdo, você poderá ver as pastas do seu computador, e do lado direito, as pastas no servidor onde sua hospedagem se encontra. Precisamos agora então localizar o caminho que vimos anteriormente onde a imagem está armazenada. Acesse a pasta “www”, que a pasta raiz da sua hospedagem, Depois, entre em frontend, depois em rwd, depois em default e images. Dentro dessa pasta você verá o arquivo logo.gif.

Para enviar as imagens de nosso computador para o nosso servidor, pode ser feito de duas formas:

  • Clique e arraste a imagem desejada para a pasta destino ou
  • Dê um duplo clique na imagem através do FileZilla.

Aguarde até que o processo seja finalizado e pronto, a imagem foi transferida. Mas vale lembrar que não é necessário salvar com o mesmo nome, pois você pode alterar o arquivo do logotipo por dentro do Magento. Veremos como fazer isto.

  • Vamos ao painel administrativo da sua loja, e clique em Sistema.
  • Clique em Configuração. Procure a seção Geral e dentro dela, o item Visual.
  • Nas opções que aparecem no painel, localize a opção Cabeçalho. Clique nela para expandir.

Nessa opção, podemos modificar o caminho e a imagem do logo, a descrição do mesmo e o texto de boas vindas. A imagem original se chama logo.gif. Digamos que o novo logotipo chama-se novologo.png.

Nesse campo temos algumas opções. Vamos comentá-las:

  • O caminho da imagem que será o novo logotipo está no campo Diretório da logo. Logo, no nosso exemplo, será images/novologo.png.
  • No campo Descrição da logo, temos a descrição da imagem, que aparece quando passamos o mouse sobre a imagem. Podemos alterar para o nome da loja virtual, por exemplo.
  • No campo Logo Imagem Pequena Src, temos a versão reduzida da imagem, que no nosso caso é o mesmo logotipo.
  • No campo Mensagem de Boas Vindas, temos a mensagem que aparece no canto superior direito.

Todas essas opções são customizáveis, e podem ser alteradas. Feito isto, basta clicar em Salvar para que as alterações sejam validadas.

Troca de temas

O tema padrão do Magento é uma opção interessante para uso geral, mas vez por outra você vai querer diferenciar a sua loja de outras, usando um tema diferente, com um projeto gráfico mais ousado. Veremos como você pode trocar os temas:

  • Vamos ao painel administrativo da sua loja, e clique em Sistema.
  • Clique em Visual. Clique então no botão Mudar Visual. Você verá a página abaixo:
  • No campo Utilizar Tema, basta escolher um tema dos que estão instalados.
  • Nos campos Data Início e Data Final, é possível definir a duração desse tema no Magento. Após ter passado, volta para o tema padrão.
  • Clique em Salvar para realizar as alterações.

Editor WYSIWYG

A sigla WYSIWYG é formada pelas iniciais da expressão What You See Is What You Get e quer dizer O que você vê é o que você obtém. Usa-se este termo para classificar ferramentas de edição e desenvolvimento que permitem visualizar, em tempo real, exatamente aquilo que será publicado ou impresso.

Na Web, a maioria dos editores são WYSIWYG, ou seja, não é necessário conhecer os códigos HTML para descrever como a postagem ou a página será apresentada. No caso do Magento, temos um editor WYSIWYG que podemos usar em diversos momentos, dentro do painel administrativo do Magento. Veremos então como funciona.

Por exemplo:

  • Vamos ao painel administrativo da sua loja, e clique em Catálogo.
  • Clique em Gerenciamento de Produtos. Você verá os produtos cadastrados, e no canto direito, um link, Editar.
  • Aqui, você terá como alterar as características do produto cadastrado. Note que abaixo dos campos Descrição e Descrição Resumida, existe um botão chamado Editor WYSIWYG. Você poderá editar o produto cadastrado, escrevendo os códigos HTML (ou copiando e colando a partir de outras fontes), ou clicando nesse botão.
  • Se você clicar no botão, você terá uma nova janela se abrindo, com várias funções disponíveis, numa barra de ícones. Abaixo temos a imagem que você verá.

Esta barra de botões permite incrementar a visualização dos textos que iremos colocar, por exemplo, na caixa de descrição. Logo, podemos usar negrito, itálico, sublinhado, modificar o tamanho da letra, mudar o alinhamento, entre outras opções. Podemos ainda recortar, copiar e colar, criar listas, adicionar links e muitas outras funcionalidads. Recomendamos que você experimente primeiro, para aprender cada uma das funções, para depois alterar a descrição e as características dos produtos.

Para concluir o uso do editor, clique no botão Submit para submeter as alterações, e no botão Cancel para cancelar todas as alterações feitas.

Páginas Relacionadas