Edição no código do tema

Atenção!

Recomendamos criar uma cópia de segurança antes de editar os códigos HTML e CSS do seu tema. Assim, caso aconteça algum problema você poderá retornar rapidamente a um tema funcional.

Vale lembrar que a Tray não se responsabiliza por problemas gerados devido a edição do código

Somente edite o código do seu tema se tiver conhecimentos avançados em HTML, CSS e JS, caso contrário o tema poderá parar de funcionar na sua loja.

Nós criamos um tema com diversas personalizações através do painel do tema e do painel administrativo da Tray, de modo a facilitar o controle da sua loja. Entretanto entendemos que você possa querer modificar as coisas um pouco mais afundo. É isso que vamos te explicar nessa seção.

Para fazer qualquer modificação mais complexa no seu tema será necessário que ele não esteja publicado. Mas não se preocupe, você não precisa tirar a loja do ar. Basta duplicar o tema. Caso o seu tema não esteja publicado ainda, você poderá fazer as alterações sem a necessidade de duplicar o tema, apesar de recomendarmos duplicá-lo.

Para isso Minha Loja > Aparência da Loja, no seu tema clique na setinha apontando para baixo e clique em Duplicar. Você poderá editar nome depois caso queira.

Após duplicar o tema você terá acesso a uma nova opção chamada Editar HTML. Será através dela que você terá acesso ao editor online da plataforma para fazer as edições.

Você poderá editar qualquer arquivo no editor de arquivos, desde que tenha conhecimento técnico para realizar as mudanças que deseja fazer. Os arquivos de CSS que controlam os estilos do tema estão divididos em módulos, deste modo é necessário alterar o arquivo css e também o arquivo minificado referente ao módulo que realizou a alteração.

No editor online os arquivos ficam a esquerda da janela de exibição em lista. Os arquivos css estarão dentro da pasta css. Ao clicar em um arquivo, ele será carregado na parte mais a direita da tela. A imagem abaixo exemplifica isso.

Faça as alterações que quiser e salve utilizando o botão abaixo. Para que as modificações sejam refletidas em sua loja é necessário atualizar o arquivo css minificado referente ao módulo que realizou a alteração. Copie todo o código do arquivo modificado e utilize uma ferramenta de minificação de css. Recomendamos a ferramenta CSS Minifier. Você pode acessar ela clicando aqui.

Copie o código minificado gerado pela ferramenta e cole no arquivo referente ao módulo que realizou a alteração, para sobrescrevendo o conteúdo do arquivo já existente. Salve as alterações utilizando o botão salvar.

Após esse procedimento você precisará publicar novamente o tema para que as modificações fiquem disponíveis na loja. Siga os passos vistos na seção Instalação. Pronto. Alterações feitas. Devido ao cache da plataforma, pode demorar até 1 hora para que as alterações sejam aplicadas. Lembre de limpar o cache do seu navegador antes de verificar se as alterações feitas foram aplicadas corretamente.