Como editar o tema da sua loja via HTML

Temos uma grande novidade para todos os lojistas que confiam e trabalham com a nossa marca: otimizamos a experiência de edição de temas e HTML.

Agora, quem utiliza a Tray para vender seus produtos para todo o Brasil pode aproveitar uma experiência muito mais rápida, moderna e intuitiva.

Conheça todas as mudanças a partir de agora!

 

Mudanças na edição de temas

Agora as operações de instalação, duplicação e atualização de temas acontecem em segundo plano, evitando travamentos na navegação da sua loja virtual.

Importante: a instalação é limitada a 25 temas.

Além disso, com interfaces redesenhadas, o visual está mais claro e organizado, tornando a edição de temas muito mais intuitiva.

Adicionamos também a opção de buscar temas por ID ou nome, facilitando ainda mais o manejo de sua loja virtual. Também é possível receber notificações de atualização por e-mail e acompanhar todas as ações.

 

 

Como editar o tema da sua loja virtual

Para editar o tema da sua loja virtual, acesse o painel administrativo da sua loja Tray e, no menu lateral esquerdo, vá em "Minha loja".

Em seguida, clique em "Editar layout".

 

Group 4.png

 

A listagem de temas será aberta, apresentando o tema atual da sua loja e demais temas que você tenha contratado sendo apresentados em "Temas instalados e não publicados".

Agora, no tema que você deseja editar, clique em "Editar tema" para editar diferentes seções da sua loja.

 

Group 5.png

 

Conheça mais detalhes sobre as possibilidades de edição da sua loja virtual:

 

Minha loja

Na etapa de edição dos recursos relacionados à "Minha loja", você poderá configurar as Redes sociais da sua loja virtual.

Aqui, você pode adicionar seu Instagram, Facebook, X, Pinterest, Linkedin, YouTube e TikTok. Dessa forma, quando o cliente clicar no ícone relacionado à determinada rede social, ele será direcionado para a mesma.

 

 

Cores

Já na etapa de "Edição de cores", você poderá as cores gerais do tema, as cores do cabeçalho, as cores do rodapé e as cores dos selos da sua loja virtual.

Em "Cores gerais do tema", você poderá modificar as cores dos textos, as cores primárias, as cores secundárias e as cores de borda/fundo.

Em "Cabeçalho", você poderá modificar a cor de fundo do cabeçalho, as cores dos textos, cores do carrinho e de busca.

Em "Rodapé", você poderá modificar a cor de fundo do rodapé, cores relacionados ao newsletter, cores dos recursos de atendimento e ícones de redes sociais, entre outras.

Por fim, em "Selos", como o próprio nome já diz, é possível modificar as cores de fundo e texto dos selos da sua loja virtual.

 

cores-ezgif.com-video-to-gif-converter.gif

 

Banners

Na etapa de edição dos banners do tema da sua loja virtual, há a possibilidade de pausar do slide ao passar o mouse sobre o banner, que pode ser validade ou invalidada.

O tempo de exibição de cada banner não pode ser modificado, com cada um sendo exibido por 10 segundos até que ocorra a substituição.

 

 

Layout

Em "Layout", é possível editar os elementos da sua loja virtual relacionados à exibição e quantidade de produtos na vitrine.

Além disso, você pode ativar ou inativar seções de depoimentos, notícias, newsletter e categorias e busca.

Em "Página do produto", informe se você deseja exibir avaliações nos produtos e produtos relacionados.

 

 

Mudanças na edição de HTML

A edição de HTML dos temas também ficou mais prática e poderosa, contando com um realce automático de códigos (twig, html, js, css e sass) adição de atalhos de teclado, pré-visualização de imagens e formatação de código com um clique.

Além disso, o processo de edição via HTML agora é mais seguro, com acesso dos desenvolvedores a tokens exclusivos e protegidos, evitando riscos de invasão.

A criação e edição de arquivos agora conta com regras mais claras, recebendo, ainda, limites de caracteres em nome e URLs para evitar erros.

 

Como editar o HTML da sua loja virtual

Para editar o o HTML da sua loja virtual, acesse o painel administrativo da sua loja Tray e, no menu lateral esquerdo, vá em "Minha loja".

 

Group 4.png

 

A listagem de temas será aberta, apresentando o tema atual da sua loja e demais temas que você tenha contratado sendo apresentados em "Temas instalados e não publicados".

Agora, no tema que você deseja editar, clique em "Editar HTML" para editar diferentes seções da sua loja.

Lembre-se que este tipo de edição não se aplica ao tema publicado, ou seja, o tema que você deseja editar não pode estar publicado/ativo em sua loja virtual.

Caso você queira editar seu tema atual, indicamos que você duplique o mesmo (clique em Mais opções > Duplicar tema) e edite o tema duplicado. Após isso, basta publicar o tema duplicado que todas as informações da sua loja virtual + edições de HTML estarão ativas no seu site.

 

Group 6.png

 

Continuando, após acessar a parte de edição de HTML, é importante destacar que o novo visual do Editor de HTML foi inspirado no Visual Studio Code (VSCode), sendo possível acessar um preview de imagens, formatar códigos de forma automática via menu de contexto e utilizar atalhos de teclado (ex.:  Ctrl + Z, Ctrl + X, etc.).

Existem diversas possibilidades de edição via HTML nas lojas virtuais Tray, então aconselhamos que apenas pessoas com conhecimento neste tipo de edição trabalhem com isso.

De qualquer forma, uma edição muito comum é a criação de landing pages, que agora possuem o limite de 50 caracteres para o nome do arquivo e 100 caracteres para a URL. Você pode saber mais sobre esta configuração acessando nosso artigo completo sobre o tema.

Importante: não é possível criar ou excluir arquivos nas pastas pages/, layouts/ e configs/.

 

editordehtml-ezgif.com-video-to-gif-converter.gif

 

Por fim, algumas informações úteis aos desenvolvedores cadastrados até 04/08 às 10h que utilizavam este sistema: todos já foram migrados(as) para a nova versão.

Além disso, novos tokens de acesso CLI devem ser gerados (sendo válidos por 6 meses e possuindo visualização única). Os acessos antigos (login + senhas) já foram desativados, em prol da segurança das lojas Tray. E lembre-se que a exclusão de um desenvolvedor invalida automaticamente seu token de acesso.

 

Boas vendas!

Equipe Tray.