O Style Editor é responsável pelo cliente ou agência em inserir informações do Front End. Ele é dividido em vários templates e cada template é responsável por uma página da loja.

1.png

2.png

Dentro dos templates, é disponibilizado vários componentes. O componente é uma praticidade para quem está criando o template. É só arrastar e inserir o componente dentro do template.

3.png

Dentro dos componentes existem alguns parâmetros de configuração. Por exemplo, se carregar no template da home um componente de banner, você vai ter um parâmetro que pode inserir quais ID´s ou ID que serão exibidos. 

4.png

Dentro dos templates, você também pode configurar os slicks. No Slick, você consegue códigos para exibir banners estático ou em carrossel, velocidade de rotação do Banner, quantos banners serão exibidos, etc.

14.PNG

O Style Editor funciona para o lojista criar o Front End da loja com base nestes templates. No Style Editor tem os templates de spot de produto, que além da home, tem um template exclusivo para o spot que vai aparecer dentro da home.

5.PNG

O template hotsites são as páginas de busca no hotsite, páginas de categoria de fabricante também como hotsite, e a lista de eventos.

15.PNG

Tem também um template exclusivo para a página de produto.

16.PNG

Template de  carrinho que é subdivido em carrinho vazio e carrinho com produto dentro, e página de confirmação, que é onde o cliente coloca como quer definir o frete e informações de pagamento e a página de fechamento que é exibida após o fechamento do pedido.

17.PNG

No Style Editor, também tem o template de Login, que é onde o usuário se cadastra e fica autenticado com perguntas de segurança.

18.PNG

Tem o template Minha Conta, que tem as informações do painel do usuário.

19.PNG

No Style Editor tem o template para Parceiros, quando tem acesso de escopo por cliente.

20.PNG

Também tem templates de Carrinho Abandonado e de Pop Up de Fuga, que é aquele pop up que quando um cliente tenta sair da página, ela é exibida.

21.PNG

74.PNG

É possível também, quando você tem um produto específico e você deseja que ele tenha uma página exclusiva, criá-la. Seria o template de todos os produtos, pois é usado o mesmo template, mas como é exclusivo, você poderia criar, por exemplo, um subtemplate.

Este subtemplate pode ser vinculado a uma página de categoria. Você pode criar um subtemplate na página de categoria e esse template pode ser diferenciado nos demais que estão sendo utilizados. Isso serve quando o lojista deseja personalizar uma página e torná-la diferente. 

13.PNG

Você pode montar de acordo com sua necessidade os componentes. Aqui neste template, é possível inserir CSS e até script neste HTML. Porém, a Tray Corp não recomenda que isso seja feito, pois a plataforma já tem um outro local que o lojista poderá definir o CSS da loja e o SCRIPT, já que existe o gestor de SCRIPT. É melhor ser tudo centralizado no setor de SCRIPT para não ter chances de erros.

22.png

Dentro do Style Editor, existe os componentes. Você pode simplesmente arrastar o componente e definir os parâmetros. Você pode criar uma posição, que é quando você cria algo e assim pode definir qual posição você quer que ele fique em sua página. Então, por exemplo, vamos supor que colocaremos o componente Banner na posição Topo. Todos os banners que tiverem cadastrados com a posição topo irão ser exibidos nesta página.

23.png

Se caso não quiser utilizar esta posição, você pode, por exemplo, utilizar os ID´s. Você pode definir quantos ID´s você quiser.

24.PNG

Aqui também tem a configuração de carrossel e configuração de LazyLoad.

25.png

Cada componente tem os seus parâmetros específicos. Na lateral, se você expandir, você verá quais são os parâmetros de cada um.

26.PNG

Então basicamente, a construção é inserir no seu html esses componentes. Cada template tem um versionamento e você consegue visualizar a última edição.

27.PNG

28.PNG

Então cada alteração que é feita, é salva e você pode retornar para versões anteriores. Você pode carregar no editor, publicar e salvar que ele vai voltar.

29.PNG

Mas se caso você quiser voltar para o template padrão, que é o template quando a loja é instanciada, você apenas deve selecionar o botão vermelho.

30.PNG

Além do templates, existem algumas outras configurações no Style Editor. O Temas é utilizado mais por agências. A agência pode ter uma loja instanciada com a Tray Corp e pode criar vários templates diferentes, por exemplo. 

31.PNG

Existe também o explorador de arquivos, que é onde são salvos alguns arquivos que o usuário tem acesso. Alguns ficam salvos no servidor e muitos você consegue acessar.

32.PNG

33.PNG

A Tray Corp sugere que toda a configuração de CSS seja feita nesses arquivos. Por exemplo, dentro da pasta C existe o Style CSS, que é um dos principais, o responsivo Desktop e o responsivo Tablet, e dentro destes arquivos ficam salvos as configurações CSS da loja.

34.PNG

35.PNG

Na pasta I tem algumas imagens.

36.PNG

Dentro de arquivos, cores TXT e cores XML, você encontra os arquivos responsáveis por definir as cores que estão cadastradas como atributo em um site. Por exemplo, já temos algumas cores mapeadas aqui e se caso o produto for amarelo e cadastrar como abacaxi, ele vai exibir no filtro, tanto de cores quanto de tributos amarelo.

37.png

Muitos usuários personalizam suas cores e não temos mapeado. Para isso, basta ir dentro de arquivos, cores XML e criar uma cor, com o nome que quer e definir o código desta cor. Se for colorido, é só inserir o código de todas as cores e em arquivos TXT, você pode criar um replaced que é para usar a cor cadastrada.

38.PNG

Existem algumas configurações que foram descontinuadas por serem utilizadas apenas pelo carrinho antigo. Por exemplo, a configuração de spot, como já existem atualmente o Template de Spot, então acabou não sendo mais utilizado.

39.PNG

Também existe o campo de ordenação, informações de ordenação da página do produto, onde você pode personalizar o nome e definir quais estão ativos ou não.

40.PNG

Também tem a configuração da imagem do produto, que é onde você pode configurar o tamanho das imagens da sua loja. Tem praticamente o tamanho de todas as imagens exibidas em seu site e por lá que você define qual tamanho de suas imagens em pixel.

41.PNG

 

Luana Serabion 
Tem mais dúvidas? Envie uma solicitação

Comentários

    Artigos nessa seção