Personalizando >

Personalizando o tema

Abra o repositório em seu editor favorito


criando a pasta

- Você deverá seguir editando apenas os arquivos existentes dentro da pasta Layout.

Atenção! Mudanças feitas fora da pasta layout até funcionarão em sua máquina porém após o término do processo de edição e deploy não serão replicadas na loja em produção. Por isso é importante realizar mudanças apenas nos arquivos que estiverem dentro da pasta layout

criando a pasta

- Os arquivos estrutura_xxxxxx.html são os arquivos de estrutura das páginas, responsáveis por montar o conteúdo que será exibido para o usuário.


criando a pasta

- Nesses arquivos, veremos algumas tags responsáveis pela inserção dos arquivos da pasta include.


criando a pasta

- A pasta assets conterá o arquivo css do tema e o arquivo js de funções gerais que você precisar criar.


criando a pasta

- Ao editar um tema padrão da plataforma, o arquivo css estará vazio esperando apenas suas classes com mudanças. Caso precise de todo o conteúdo do css do tema, o mesmo fica disponível dentro da pasta sys/estruturas/nome_do_tema

- Ao alterar os arquivos da pasta layout, não é necessário executar nenhum comando no prompt de comando, basta atualizar a página no navegador para ver a alteração feita.
Pronto, com isso você está pronto para iniciar suas personalizações!

Live Reload

Quando você estiver personalizando seu tema, ter que ficar atualizando o navegador todas as vezes que mudar algo acaba sendo um processo mais demorado do que o desejado, certo?
Como o intuito desse editor remoto é otimizar o tempo do desenvolvedor e tornar toda a experiência mais rápida, sugerimos a utilização do LiveReload. O LiveReload é uma ferramenta muito conhecida e usada hoje no meio front-end por possibilitar atualizações em tempo real na sua página, ela é muito útil e de uso amigável para qualquer profissional front-end.
No editor de temas da Webstore, ele assume outro comportamento pois o sistema age de forma a compilar os arquivos sempre que necessário. Porém o LiveReload ainda permite o refresh automático da página, cortando assim tempos de espera desnecessários. Ou seja, ao utilizar essa ferramenta você não precisará atualizar o navegador sempre que fizer alguma mudança na página.
Para baixar o LiveReload no seu navegador de preferência que tenha suporte para extensões, entre no link abaixo.

LiveReload

- Clique em "Usar no Chrome"


criando a pasta

- Após inserida a extensão no seu navegador. O ícone da extensão deve aparecer na barra de busca:


criando a pasta

- Sendo assim, após você usar o comando NPM START, clique nele para habilitá-lo quando a mensagem de Enable LiveReload for alterada significa que ele está ativado.


criando a pasta

E pronto, ele estará rodando. Para desativá-lo apenas clique novamente no ícone da extensão.