Como personalizar a home de uma loja Nuvemshop

Por: Dannie Karam
Criado em: 22/08/14.
Atualizado em 04/06/19.
5 min
de leitura

Índice

Homepage ecommerce

Para fazer mudanças na home de uma loja Nuvemshop, 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.

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.


    Registre-se gratuitamente

    Receba posts sobre marketing e empreendedorismo diretamente no seu e-mail.

    Coloque o conhecimento na prática

    +15 mil alunos já aplicaram o aprendizado na Universidade e criaram seus negócios com a Nuvemshop.

    Teste 15 dias grátis

    Faça sua marca crescer

    Cria sua loja virtual com a Nuvemshop e venda de maneira profissional como eles:

    Osmoze - www.osmozestore.com.br
    Morango Brasil - morangobrasil.com.br
    Osram - loja.osram.com.br
    Testar 15 dias grátis