Conceitos básicos e estruturas de layout

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

Índice

    Layout structure ecommerce

    Para entender a estrutura de diretórios dos layouts Nuvemshop é importante abrir o FTP. É o que vai permitir que se personalizem os layouts dentro da plataforma de forma organizada e prática. Para isso, o primeiro passo é acessar o administrador da loja Nuvemshop e clicar em Layouts. Abaixo de todos os modelos disponíveis, há um botão para abrir o FTP. Ao clicar, será possível verificar o login e senha já fornecidos pelo sistema.

    Abrindo um cliente FTP, que pode ser o FileZilla, por exemplo, é necessário localizar os campos de login e senha e copiar os valores que apareceram no administrador da loja. Desta forma, tudo ficará atrelado para que suas modificações funcionem bem. É importante lembrar que as modificações no layout não alteram produtos, categorias e o que foi alimentado através do administrador da Nuvemshop. A única coisa que muda é o visual da página. Portanto, é indicado fazer um backup do layout para que seja possível ativar e desativar o FTP quando quiser, sem perder o trabalho de webdesign.

    Dentro do editor de código será possível ver o layout.tpl, que armazena um HTML comum, mas que permite o uso de variáveis. {{product.name}}, por exemplo, é substituído pelo nome real do produto. O mesmo deve acontecer para categorias e outros campos. O layout.tpl também tem todos os elementos fixos das páginas. Isso significa que através dele é possível modificar o cabeçalho, rodapé, os elementos padrões da navegação, o resumo do carrinho, entre outros.

    Dentro do editor também, você encontrará sessões para substituir pelos conteúdos reais da home, página de produto ou de categoria, por exemplo, através do template_content. Ao inserir esse código, tudo o que vem depois será relacionado ao conteúdo específico de uma página, como a home ou a página de categorias por exemplo. Lá também existirá uma pasta para cada tipo de página. Cada uma delas possui um HTML particular que você pode abrir e alterar.

    Utilizando static é possível alterar tudo que é estático da loja: imagens, java script, entre outros. Enquanto isso, utilizar o termo snipplets significa fazer uso do tpl que tem código para várias páginas. Ou seja: utilizando snipplets, não é necessário reescrever o código caso o utilize novamente. Se usar snipplet e “navigation.tpl”, a página repetirá o que está em “navigation”. Ao atualizá-la, o snipplet fará com que todos os locais preenchidos assim também se atualizem sem precisar alterar todo o código.

    Finalmente, na pasta config., há uma série de arquivos .txt. Estes possuem as configurações do layout. Por exemplo: uma loja multi-idiomas deve ter .txt’s com textos em outras línguas. Ou no caso de querer alterar uma fonte ou texto da loja, também é possível acionar a pasta config.

    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