22/08/2014

Como personalizar a home de uma loja Nuvem Shop

Homepage ecommerce

Para fazer mudanças na home de uma loja Nuvem Shop, basta utilizar a mesma metodologia que vem sendo estudada, via FTP. Através do FTP é possível alterar o número de produtos em destaque, modifiar o slider de fotos, inserir e alterar banners da home, entre outros. Lembrando que para estas alterações é importante ter o login e senha do FTP e o editor de códigos, como o Filezilla por exemplo. O processo será o mesmo que o apresentado nas lições anteriores.

Trocar o número de produtos em destaque

Para fazer esta troca, após abrir o FTP, procure por templates.tpl. A divisão desta extensão é feita por sessões, como seccions.primer ou products. Dentro de products, existe uma extensão products.takeX, onde X é um número. Este número representa o tanto de produtos em destaque. Ou seja: product.take4 = a 4 produtos destacados. Substituindo-o por outro número, como 8, por exemplo, o tanto de destaques será atualizado no layout. Após alterar no FTP basta atualizar a página para que o processo dê certo.

Modificando o slider

É possível determinar o tempo que cada foto vai passar no slider. O slider é o “mecanismo” que existe na home para passar de um banner ou imagem destacada para outro. Dentro do editor do código, o javascript estará em layout.tpl, que deverá ser usado para este caso. Mesmo existindo o header ou outras sessões similares, para esta troca, este caminho deve ser seguido.

Depois de incluir o CSS, é possível ver os parâmetros do slider. Um parâmetro que se chama post.time faz o controle do tempo de cada imagem. O mais indicado é que cada uma dure 5 segundos. Então, alterando este tempo no post.time será possível manter essa organização. Após subir no Filezilla, basta atualizar a loja para verificar as alterações.

Alterando banners na home

Para fazer qualquer alteração nos banners da home é preciso acessar o arquivo baner.png. Este deve ser sempre adicionado à pasta static. Essa pasta é responsável por todas as imagens da loja, além de outros arquivos. Lá é possível apagar o slide e trocar por um banner, por exemplo. Para isso, basta acessar home.tpl, buscar o slider e apagar. E depois colocar o .img, inserindo nesta pasta static através do source {{nome-da-imagem/static_url}} para garantir que a imagem seja buscada no lugar certo. Basta atualizar e conferir a alteração.

Para centralizar o banner da home, por exemplo, basta acessar a pasta static e procurar a extensão style.css. Lá é possível inserir margens ou alterar outras condições de estilo de banner. Atualizando, é possível verificar todas as mudanças. Há ainda uma possibilidade de alterar a navegação da loja: mexer nas fontes, fundos das opções dos menus, adotar uma tipografia específica, entre outros. Para isso, basta alterar dentro do style.css também.

Data da última atualização: 16/02/2018


O que você achou desse conteúdo?


Dannie Karam

Com mais de 10 anos de experiência em gerenciamento de projetos digitais, Danniela é comunicadora, escritora e líder do time de Branding da Nuvem Shop. Gosta de música, viagem, pessoas e culturas. E sempre fala demais, especialmente quando escreve de si em terceira pessoa.


    como-personalizar-a-home-de-uma-loja-nuvem-shop