Interface do PretaShop

De Wiki Hostnet
Ir para: navegação, pesquisa


Alteração de imagens padrão

A identidade visual de qualquer loja, seja online ou não, é fundamental para a identificação do cliente com a sua marca. Uma logomarca bem feita marca, fica na memória dos clientes satisfeitos, e isso pesa a favor do seu produto sempre. Logo, é importante usar imagens apropriadas.


Não iremos, nesse tutorial, explicar como produzir imagens que sejam visualmente agradáveis e compreensíveis, mas veremos como encaixá-las no PrestaShop, nos lugares específicos.


Antes, um lembrete sobre formatos de imagens: Podemos preparar estas imagens em vários softwares, pagos e gratuitos, feitos para edição de imagens, mas é fundamental saber em que formato elas estão salvas. Portanto, recomendamos fortemente que você use o formato PNG na geração dos logotipos da sua loja. Este é um formato apropriado para mudanças pontuais de cor, obtém uma compressão razoável e podem ter fundo transparente, o que é muito importante para o que nós iremos usar. Já o formato JPG (J-PEG) não aceita fundo transparente, e são mais apropriadas para imagens com variação contínua de cores, como fotografias.


Inicialmente, você precisará a princípio de 3 imagens:

  1. A primeira é a logomarca da sua loja. Ela deve ter um fundo transparente (para se integrar ao fundo da página da sua loja), e um tamanho que encaixe na sua principal posição, que é o canto superior esquerdo de todas as páginas. Logo, salve a imagem no formato PNG.
  2. A segunda é uma imagem pequena, transparente, que será usada como uma imagem em miniatura na loja. Recomenda-se que seja uma imagem de até 30 x 30 pixels, e salva no formato GIF, com fundo transparente.
  3. A terceira é um arquivo de ícone com extensão em ICO, com tamanho de 16 x 16 pixels. Essa imagem será usada como o ícone favorito, ou como é mais conhecido, o favicon da sua loja.


Agora vamos inserir as imagens na sua instalação do PrestaShop. No painel Administrativo, clique em Preferências, e depois em Temas. Você estará então na seção de ajuste da aparência da loja virtual, com opções para alterar temas e outras opções. Note que a Hostnet fornece, na sua instalação feita pelo Instalador de Aplicativos, 4 temas novos, que você poderá usar a vontade.


Iremos tratar, nesse tópico, na seção Aparência. Você terá vários campos onde inserir o caminho das imagens que desejas colocar na sua loja. Vamos ver cada campo:

  • Logotipo principal: Aqui você deve inserir o caminho para o logotipo principal, que ficará na página inicial da sua loja virtual.
  • Logotipo de cabeçalho para dispositivos móveis: Você pode ter uma versão do site formatada para uso em dispositivos móveis, como smartphones e tablets, por exemplo.
  • Logo de e-mail: Essa imagem será colocada em todos os e-mails que a sua loja virtual enviar para os clientes.
  • Logo da Fatura: Esta imagem estará estampada nas faturas que sua loja virtual gerará, e enviará a seus clientes.
  • Favicon: Esta imagem deverá ter 16 x 16 pixels de tamanho, e sua função é aparecer na barra de endereços do navegador.
  • Ícone da loja: Esta imagem deve ter 30 x 30 pixels de tamanho, e deve ser no formato GIF, com fundo transparente. Ela será usada para o localizador de lojas, dentro do Google Maps.


Ainda na seção de Aparência do tema, você tem outros itens a serem configurados, a saber:

  • Símbolo de navegação: Quando você clica em um produto qualquer, os itens são separados por caracteres como esse que está nesse campo.
  • Ativar tema móvel: Com o crescimento da Internet em dispositivos móveis, o uso de temas móveis é interessante, pois os tablets e os smartphones estão substituindo o uso de computadores cada vez mais. Logo, ao você habilitar essa opção, você terá uma versão para navegadores de dispositivos móveis, sejam apenas smartphones, tablets ou ambos.
  • Cor do e-mail: Qual cor será usada para destacar o e-mail que o PrestaShop envia aos seus clientes.


O banner da página principal é na verdade parte importante da sua campanha promocional, no seu site de e-commerce. Logo que o usuário acessa o site, ele verá uma imagem sobreposta à página em si, com promoções e itens que certamente serão de interesse dele. Dali, basta ele clicar em qualquer item que esteja ali para ser levado à seção específica dentro da loja virtual. A montagem desse banner da página principal é trabalho seu, como gerente da loja virtual.


Vamos então aprender como fazer esta campanha promocional. Siga os seguintes passos:

  • No painel administrativo do PrestaShop, clique em Módulos.
  • Depois clique na opção Módulos.
  • Procure pela seção Características da Loja. Clique nele e procure o módulo chamado Editor da Página Inicial.
  • Tendo encontrado-o, verifique se ele está instalado. Se não estiver, basta clicar no botão Instalar para que o procedimento seja feito. Tendo ele já sido instalado, clique então em Configurar. Você terá uma tela como a abaixo:


10 editor da pagina inicial.png


Aqui você pode configurar o Título Principal,o Cabeçalho Secundário e o Texto de Apresentação. Este é o texto que aparece nessa área, e é recomendável que você explique em detalhes a promoção que será feita, ou então um breve texto descrevendo sua loja. Abaixo você encontra a área Logotipo da página inicial, onde está a imagem do banner que você deseja alterar. Note que tem uma opção abaixo, com uma caixa de textos. Clique no botão Selecionar Arquivo, e escolha a imagem que você quer que apareça imediatamente ao usuário entrar na sua loja.


Esse banner tem um tamanho especifico de 530x228 pixels, e não dá para ser muito diferente disso, visto que temos diversas resoluções disponíveis para diferentes tamanhos de tela. Definida a imagem, no item logo abaixo, Link do logotipo da página inicial, escolha qual será a sessão da loja que estará vinculada ao banner. Coloque o link completo nessa caixa. Logo, quando o cliente clicar no banner, ele será levado para essa sessão. Para obter o link, abra a loja virtual numa aba separada do seu navegador, vá até a sessão desejada, selecione a URL e clique em Copiar. Depois, vá até essa opção, clique e depois com o botão direito, clique em Colar. Caso você ainda precise, preencha o campo Cabeçalho secundário do logotipo da página inicial, e finalize a edição clicando em Salvar.


Uso de temas

Os temas compõem a identidade visual da sua loja. Logo, a escolha de um tema adequado, com cores e formas que estejam de acordo com a proposta da sua loja. A instalação do PrestaShop feita pela Hostnet traz, além dos temas padrão, mais 4 temas que em essência são os mesmos, mas com conjuntos de cores distintas. Se você quiser trocar o tema, basta proceder do seguinte modo:

  • No painel administrativo do PrestaShop, clique em Preferências.
  • Depois clique na opção Temas.
  • Você verá uma seção chamada Aparência do tema. Nesta seção você pode escolher um dos temas já instalados para a sua loja virtual. Selecione e clique em Salvar.


Posteriormente veremos como você pode proceder para adicionar novos temas à sua loja baseada no PrestaShop.

Voltar-wiki.png