Usando novos temas

Escrito por Mario SAM

Depois que você faz a instalação da sua loja Magento, uma das primeiras necessidades de customização do site é alteração do tema utilizado.

Afinal… esse tema padrão do Magento não é muito atrativo!

Se você fez a instalação do pacote completo como mostrado no post Instalação passo a passo por full release, então sua instalação conta com alguns temas adicionais, como: blank, blue, iphone, e modern.

No Magento Connect você encontra estes e outros temas para download (alguns grátis outros nem tanto).

Alterando o tema da loja

O objetivo deste post não é ensinar a criar ou instalar temas do zero, então partindo do princípio que você já possui o tema instalado nos diretórios corretos, acesse no seu backend:

Sistema > Configuração > GERAL > Visual [Temas]

Você deve encontrar 5 (cinco) campos vazios. O último deles “Padrão” você pode colocar o nome do tema que deseja habilitar no seu frontend, por exemplo: modern

habilitando tema modern

Basta clicar em salvar, atualizar o cache, e ver o resultado no frontend. Simples assim!

E os outros campos?

Caso você ainda não tenha notado, quando faz alteração do campo Padrão (Default) você está indicando que todos os outros campos automaticamente (por padrão) irão fazer uso dos arquivos contidos no tema indicado. ex.: modern

Os demais campos são utilizados quando você deseja continuar usando o tema indicado, mas com algumas modificações que são encontradas em outro tema. Por exemplo, digamos que você está usando o tema modern, mas é época de natal e você criou um pacote com imagens natalinas, então no campo Skin você vai indicar o tema criado: modern_natal.

Tradução do Tema – Todo tema possui (ou deveria possuir) um arquivo translate.csv para complementar (ou alterar) as chaves de tradução que não existem no pacote base.

Templates – São as páginas (phtml) carregadas para renderizar todo conteúdo indicado pelo XML, usando os elementos do skin (imagens/css).

Skin (Imagens/CSS) – Imagens estáticas que compõem os elementos visuais das páginas (como botões, banners, planos de fundo, etc), e as folhas de estilos que fazem a “perfumaria” do seu html (cores, fontes, display, formulários, etc).

Leiaute – O leiaute é formado pelo conjunto de arquivos XML’s do template, são eles que definem a arquitetura das páginas (blocos de estrutura e conteúdo).

Um tema para cada dispositivo

Sim. No Magento você pode configurar um tema para cada tipo de acesso mapeado. Por exemplo: iPhone, iPod, Android, BlackBerry, etc.

Para isso clique no botão [+ Adicionar Exceção] em seguida informe o nome do dispositivo “Expressão igual“, e ao lado “Valor” o nome do tema que deseja carregar nele.

adicionar excecao de tema

Veja que é possível adicionar uma exceção para cada dispositivo que desejar, usando assim um tema diferente para cada exceção. Mas e se você quiser exibir o mesmo tema em vários dispositivos diferentes? Fácil, basta separar o nome dos dispositivos por pipe, exemplo:

iPhone|iPod|BlackBerry|Palma|Googlebot-Mobile|mobi|Windows Mobile|Android|Opera Mini

Quando o campo Padrão (Default) estiver em branco, ele automaticamente carrega as informações do tema default.

Nem tudo são rosas

Não se engane, nem tudo é perfeito e fácil como parece nos exemplos mostrados pela internet.

Certifique-se de que o tema que você baixou (ou comprou) é compatível com sua versão do Magento. Com a evolução do sistema e/ou temas criados sem seguir as boas práticas acabam ficando incompatíveis entre as versões.

Algumas vezes você vai fazer todo o passo-a-passo correto e mesmo assim não vai encontrar resultados positivos no frontend. Verifique se digitou tudo corretamente – as vezes o erro está no exemplo da internet, e mantenha o cache desligado ou atualizado enquanto estiver fazendo alterações de leiaute.

Muitas vezes será preciso alterar as configurações da sua loja para que o tema funcione corretamente. Seja uma alteração de colunas nas páginas de CMS, a criação de novos atributos ou categorias, a instalação de novos módulos, ou ainda, a inserção de novos dados em algumas tabelas do sistema.

Nesses casos verifique sempre os arquivos (ou scripts) de instalação dos temas, veja o que é preciso fazer para que funcionem corretamente. Antes de comprar um tema, veja se existe uma equipe de suporte para lhe ajudar com a instalação em caso de dúvidas.

E se mesmo assim você precisar de ajuda… acesse o fórum da Escola Magento.

Sucesso!

O Autor

Mario SAM

Desenvolvedor Magento com certificação M1 Developer e M1 FrontEnd Developer. Graduado em Web Design e Programação, pós-graduado em Gestão de Projetos e TI. Não sou matemático mas estou aqui para somar.