Edição do Código

Atenção!

Tenha muito cuidado ao editar o código do tema. Alterações sem conhecimento das tecnologias utilizadas poderão fazer sua loja não funcionar corretamente!

Através do painel administrativo da loja é possível fazer a edição de qualquer arquivo do tema. Todo tema segue uma estrutura lógica requerida pela Nuvemshop.

Para desenvolvermos esse tema utilizamos as tecnologias requerida pela Nuvemshop. A Nuvemshop utiliza além do CSS e do JavaScript uma tecnologia chamada Twig para montar as páginas da sua loja. O Twig é uma linguagem de template que se assemelha muito ao HTML. Por isso, para alterar qualquer código do tema é necessário ter conhecimento nessas linguagens.

Para editar o código do tema da sua loja acesse Minha Nuvemshop na seção Personalizar do painel administrativo, e em seguida selecionar a opção Editar HTML e CSS do layout. A imagem abaixo exemplifica o caminho e a tela que será carregada.

Essa página contém um editor de arquivos. Esse editor é dividido em duas partes. A parte da esquerda contém a estrutura de diretórios e arquivos do tema. A parte da direita é a visualização do arquivo e campo de edição. Quando quiser editar o código do tema selecione o arquivo desejado. Ele será carregado na parte cinza a direita. Após realizar as alterações clique no botão Salvar

As modificações no layout podem demorar até 2 horas para serem aplicadas pela plataforma. Se caso passar esse tempo e elas não forem aplicadas, siga os passos abaixo:

1. Recarregue o painel administrativo da loja e entre na página de edição do código do tema.

2. Force a limpeza dos caches do seu navegador apertado as teclas Ctrl+Shift+Del simultaneamente, selecione somente a opção de cache e clique em Limpar Dados

3. Em último caso, se todos esses passos falharem, será necessário contatar o suporte da plataforma para que eles possam verificar o ocorrido.

Atenção! Para otimizar o carregamento da sua loja, os arquivos de CSS e JavaScript da sua loja são minificados, de modo a reduzir de tamanho. Arquivos minificados possuem os dizeres .min antes da extensão do arquivo.

Para minificar o código CSS clique aqui e para JS aqui. Procure o arquivo com o mesmo nome do arquivo alterado acrescido de .min antes da extensão do arquivo e cole o conteúdo gerado pela ferramenta. Caso não faça isso as alterações não terão efeito.