✅ PrestaShop - Mudanças de tema básico

Índice

Embora o tema básico padrão de PrestaShop É bastante funcional, uma loja não pode ficar online dessa forma, primeiro porque corremos o risco de outra loja parecer exatamente igual e segundo porque talvez o tema básico contenha coisas que não precisamos ou estão organizadas de uma forma que não está de acordo para nossa loja.
Por isso, personalizar é o caminho que seguimos sempre, quer seja colocando um novo tema ou alterando o existente, para que a disposição dos elementos e as cores possam ser diferentes.
Primeiras mudanças
Vamos começar a fazer alterações simples, mas muito eficazes, que farão o tema parecer totalmente diferente de como é por padrão, para isso vamos seguir os seguintes passos:

Vamos mudar o logotipo, fazemos isso do administrador do back office, para isso vamos fazer o upload da imagem na seção: Preferências -> Aparência.
Então devemos ir para Back Office -> Módulos -> Ferramentas -> Editor Home.
Substituímos o logotipo central ao configurar o módulo.

Após este início, vamos agora alterar alguns elementos de posição para um maior efeito de personalização:

Mudamos a posição do bloco Categoria: na coluna da esquerda.
Desativamos produtos especiais.
Mudamos as informações em categorias.

Vamos ver a seguinte captura de tela para que possamos examinar as mudanças que fizemos, vamos notar que algumas coisas foram movidas da direita para a esquerda e que outras colunas não estão mais lá e, portanto, outras subiram em posição:

Agora o tema padrão parece muito diferente, se ainda assim não obtivermos um bom resultado, não se preocupe, pois é algo novo e como tal devemos praticar um pouco antes de nos tornarmos especialistas na área.
Mudando o CSS
Outra mudança muito eficaz é a modificação dos arquivos CSS com o qual podemos mudar, por exemplo, a cor de fundo da loja.
Para os fins deste exemplo, vamos usar Raposa de fogo e suas ferramentas de desenvolvedor ou se você preferir o firebug.
Para ativar a edição do CSS com as ferramentas do desenvolvedor, vamos simplesmente clicar com o botão direito na loja e selecionar a opção Inspecionar elemento, então no menu que aparece vamos selecionar editor de estilo.
Agora, se estivermos usando firebug, apenas dizemos inspecionar elemento com firebug e, em seguida, vamos para a guia CSS.
Na janela que apareceu e uma vez na seção CSS vamos localizar o arquivo global.css e vamos tentar mudar o código de cor de fundo.

 corpo {cor de fundo: [b] azul [/ b]; tamanho da fonte: 11px; família da fonte: Verdana, Arial, Helvetica, Sans-Serif; cor: # 5d717e; alinhamento de texto: centro}

Graças a essas ferramentas, a mudança é feita em tempo real e temos a oportunidade de visualizá-la para que possamos ver nosso progresso no momento:

Como podemos ver, o fundo azul é uma mudança muito drástica, mas eficaz, obviamente não parece muito bom já que as letras e outros elementos devem ser ajustados, porém vemos o importante e é que uma simples cor pode fazer um diferença.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo