Conhecendo o Editor de layouts

O editor de layouts oferece a capacidade de personalizar as páginas do seu e-commerce, criar ou editar landing pages e ajustar os layouts dos e-mails automáticos da plataforma.

É importante destacar que a edição de layouts é uma funcionalidade avançada e requer conhecimentos técnicos em HTML, CSS, JavaScript ou Front-end de forma geral. Modificar um layout inadequadamente pode impactar o funcionamento da sua loja, por isso é recomendado que apenas usuários experientes utilizem essa funcionalidade.

Gerenciando layouts

Para começar a gerenciar seus layouts, você deve entrar em seu painel administrativo e ir em Layout e Conteúdos:

Importante: Este menu será apresentado somente quando houver mais de um layout cadastrado e para contas Marketplace ou B2B múltiplos CDs.

Aqui é possível gerenciar:

• Layouts da loja: Nesta área você poderá editar as páginas de seu e-commerce. Aqui não é possível criar novas páginas, apenas os layouts do fluxo padrão do e-commerce estarão disponíveis, como por exemplo página do carrinho, cadastro de cliente e outras.

• Landing pages: Aqui é possível editar e criar páginas customizadas que podem ser utilizadas como landing pages, páginas institucionais ou até mesmo como um arquivo de estilos personalizados.

• Layouts de e-mail: A plataforma possui e-mails padrões que são enviados conforme o cliente avança no fluxo de compra do seu e-commerce. Nesta área é possível editar os layouts destes e-mails e até ativar ou inativá-los.

Ao acessar uma destas áreas, você deverá ver uma tela contendo a lista de layouts disponíveis para edição:

Para editar um layout, clique no ícone do lápis ao lado direito do layout desejado:

Você deverá ser direcionado para o editor:

Título: Aqui você verá o título da página que está editando.

Versões: Aqui você pode visualizar o histórico de modificações realizadas neste arquivo e até voltar a versão caso seja necessário.

Para visualizar o histórico clique no link "Visualizar histórico de modificações" como mostra a imagem acima. Ao clicar, um modal contendo as alterações feitas deverá abrir:

Caso queira restaurar alguma das versões anteriores, basta clicar em visualizar e então em salvar.

Páginas associadas: As páginas associadas são outros arquivos que estão sendo utilizados no código da página atual, por exemplo o CSS.

Obs: Clicando em um dos arquivos da lista, você será direcionado para a edição deste arquivo.

Conteúdo: Nesta área você pode visualizar e editar o código do arquivo que está acessando. A plataforma Flexy utiliza o TWIG que é uma biblioteca PHP para desenvolvimento de interface, que separa o código HTML da linguagem de programação (PHP com citado). Através do editor, é possível utilizar HTML, CSS e Javascript.

Ao finalizar sua edição basta clicar em salvar no final da página:

Esperamos que este material possa ter auxiliado no seu uso à plataforma Flexy, no entanto, caso ainda haja dúvidas ou necessidades, por favor, entre em contato com nossa equipe de atendimento, que terá prazer em auxiliá-lo.