Style Editor

       O Style Editor é uma ferramenta da plataforma que possibilita que agências especializadas insiram informações de Front End. 

       O SE é dividido em vários templates e cada template é responsável por uma página da loja.

       Dentro dos templates, é disponibilizado vários componentes. O componente é uma praticidade para quem está criando o template. A usabilidade é fácil, precisando apenas arrastar e inserir o componente dentro do template.

       Nos 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. 

       Além disso, dentro dos templates, também é possível realizar a configuração dos 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.

Produção

Templates

       No Style Editor você pode realizar a configuração dos seguintes templates:

• Cabeçalho, esse é responsável pela exibição dos cabeçalhos de páginas específicas. Aqui você pode realizar as configurações nos cabeçalhos do site, home, fixo, minha conta e lista de eventos. De forma geral, essa configuração permite a montagem de diferentes cabeçalhos  em diferentes páginas.

• Rodapé são exibidos os rodapés no carrinho, fechamento e na confirmação. Já os demais exibem o rodapé do site. Ambos com diferentes informações, conforme a configuração realizada.

• Spot, além do spot de produto, você encontra um template exclusivo para o spot, esse vai aparecer dentro da home.

• Hotsites, configura o hotsite das páginas de busca, categoria, fabricante, head hotsite, home e lista de eventos. Para conferir detalhes e funcionalidades sobre a home do site clique aqui.

• Produto, o template pode ser configurado para a página do produto em si ou para lista de compra. 

• Carrinho, esse é subdivido em carrinho vazio, carrinho com produto dentro, página de confirmação (aquela onde o cliente define como quer o frete e informações de pagamento) e a página de fechamento (exibida após o fechamento do pedido).

• Login, é onde o usuário se cadastra e fica autenticado com perguntas de segurança.

• Minha Conta, possui as informações do painel do usuário.

• Parceiros, quando tem acesso de escopo por cliente.

• Pop-Up Anti-Fuga, responsável por configurar aquele pop up que sobe na tela do cliente, quando o mesmo tenta sair da página.

• E-mail Carrinho Abandonado, nesse template é configurado o e-mail que é utilizado quando o comprador deixa um carrinho abandonado no site, sem efetivar o pedido.

Subtemplates

       O SubTemplates possibilita a criação de uma página exclusiva para um produto específico, por meio da criação de um subtemplate, que pode sua vez pode ser vinculado a uma página de categoria. Criando um subtemplate na página de categoria, esse pode ser diferenciados dos demais que já estão sendo utilizados, e os componente são montados de acordo com as necessidades do lojista.

   Nesse template é possível inserir CSS e até script no HTML, porém, nós da empresa não recomendamos, já que na plataforma liberamos o gestor de SCRIPT onde o lojista poderá definir o CSS da loja e o SCRIPT. Criamos essa ferramenta para que tudo fique centralizado em um único lugar, no setor de SCRIPT, visando eliminar as chances de erros.

       Após a criação de um subtemplate, para que seja possível selecioná-lo nas configurações de hotsite, o mesmo deverá ser publicado assim como deverá ser realizada a indexação da loja.

       Dentro do Style Editor, existe os componentes. Você pode simplesmente arrastar o componente e definir os parâmetros, 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 nessa página.

       Caso não queira utilizar essa posição, poderá, por exemplo, utilizar os ID´s, definindo quantos ID´s você quiser. Tem também a configuração de carrossel e a configuração de LazyLoad.

       Cada componente tem os seus parâmetros específicos. Na lateral, quando expandida, exibe quais são os parâmetros de cada um.

       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.

       Então cada alteração que é feita e salva, permite o retorno das versões anteriores, você pode carregar no editor, publicar e salvar que ele vai voltar. Caso queira voltar para o template padrão, que é o template quando a loja é instanciada, basta selecionar o botão vermelho.

Explorador de arquivos

       O Explorador de Arquivos é onde são salvos alguns arquivos que o usuário tem acesso. Alguns ficam salvos no servidor permitindo o acesso.

       Nós da empresa, sugerimos 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.

Na pasta I tem algumas imagens.

Para fazer upload de arquivos nessa área o limite é de 30mb.

Temas

       Temas é uma das outras configurações existentes no Style Editor e é utilizado mais por agências. A agência pode ter uma loja instanciada com a Wake e pode criar vários templates diferentes, por exemplo. 

       Para localizar basta acessar o Style Editor >> Temas

       Essa funcionalidade é muito útil na implantação do layout da loja, e vale tanto para novas lojas quanto para repaginadas em lojas já existentes.

Arquivos

       Dentro de Arquivos >> Cores TXT >> 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.

• Cores TXT

       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.

• Cores XML

Configurações

• Campo Busca, são as configurações a respeito do que vai ser retornado na busca do cliente, quais daquelas informações vão ser possíveis de ser pesquisada como, por exemplo , sku, código (produto id), título, entre outros.

• Campo Ordenação, informações de ordenação da página do produto, onde pode personalizar o nome e definir quais estão ativos ou não.

• Componentes, são opções de configurações de componentes apresentados no layout da página, onde possibilita a alteração da frase desses componentes, da posição, ativar ou desativar, entre outros.

• Etiquetas,  são as etiquetas pré definidas que a plataforma possui, nesta tela o usuário pode ativar ou desativar a exibição delas na página de produto ou spot, além de organizar a ordem de exibição. A opção de "Parada", faz com que a etiqueta selecionada apareça na tela sozinha, tendo prioridade sobre as demais.

• Imagem de Produto, utilizada para configurar o tamanho das imagens da loja. Tem praticamente o tamanho de todas as imagens exibidas no site e aqui você define qual tamanho de suas imagens em pixel. Para mais detalhes desta tela, confira nosso vídeo clicando aqui.

• Spot, essa configuração foi descontinuada, uma vez que a configuração de spot pode ser realizada no Template Spot.

Dúvidas Frequentes (FAQ)

       Para conferir as dúvidas mais frequentes sobre o Style Editor clique aqui.