Como editar o código do layout do seu site
Resumo: A edição do código permite que você acesse o código-fonte do layout do seu site e faça qualquer tipo de customização, alterando diretamente nos códigos HTML, CSS e Javascript. Aprenda como editar o código do Layout do seu site.
Saiba como acessar ao editor do código de seu layout para customização usando HTML, CSS e JavaScript
ATENÇÃO: a edição do código não está disponível em todos os planos. Para saber quais funcionalidades o seu plano oferece, consultar a página Planos e Preços.
Além disso, a edição do código fonte é algo sensível, que pode acarretar danos na estrutura do seu site.
Qualquer alteração deve ser feita por um desenvolver com conhecimento suficiente nas linguagens de programação utilizadas no portal, e a Moblix não oferece suporte para esse tipo de customização.
Neste tutorial, ensinaremos como acessar a ferramenta de Edição do código.
Entenda o que é possível alterar através da edição do código
Na Moblix, além das funcionalidades disponíveis em cada modelo de Layout, também é possível editar e incluir elementos em seu site através do código-fonte.
Neste tutorial, responderemos algumas perguntas frequentes sobre o que é possível modificar através do código-fonte.
Não! Isso porque o arquivo do sitemap é gerado automaticamente pela Moblix de acordo com a necessidade da integração, sendo assim, impossível qualquer alteração.
Existe a possibilidade de alterar o formulário de contato ou cadastrar de clientes?
Não! Isso porque o formulário de contato ou cadastro interage com outras ferramentas dentro da plataforma, caso aconteça alguma alteração, poderá afetar o funcionamento dessas integrações.
No entanto, é possível criar um formulário externo e vinculá-lo à uma página em sua loja. Para isso, os dados serão capturados e gerenciados de forma externa do seu administrador Moblix.
É possível inserir o feed do Instagram no Layout?
Sim! Como recomendação, indicamos usar uma ferramenta externa chamada Light Widget e depois inserir o script no código fonte do seu site.
Posso alterar o tipo de fonte ou alguma palavra?
Sim! Por no código-fonte é possível alterar a fonte e qualquer palavra dos botões ou texto informativo que compõem o Layout.
Consigo ocultar ou mover elementos como textos, botões e ícones do Layout?
Sim, é possível ocultar ou mover qualquer elemento dentro do Layout, com exceção do nome da Moblix que fica no rodapé e elementos ficam na página de finalização de compra (checkout).
Abrindo o Editor de Código da Moblix
1. Acesse o painel de administração da Moblix.
2. Siga pelo caminho “Loja virtual > Temas”.
3. Depois clique em “Editar o código”.
4. Em seguida, abrirá uma janela com algumas informações. Leia o aviso de importante com atenção, estando de acordo, clique em “Editar código” para continuar.
5. Na janela que abrir você poderá alterar o Layout através do código usando HTML, CSS e Javascript, usando o próprio EDITOR DE CÓDIGO DA MOBLIX.
Fazendo o upload de arquivos
A Moblix disponibiliza uma solução avançada para que você crie pastas e faça uploads de arquivos em um diretório próprio.
Com esse recurso, você pode fazer o upload de imagens e arquivos de css, js e etc.
Para acessá-la, basta clicar no botão MEUS ARQUIVOS.
Restaurando para o template original
Se futuramente decidir trocar o layout do seu site ou usar o modelo padrão (sem as edições que foram feitas), será preciso fechar restaurar a Edição do código. Para isso, siga os passos abaixo:
1. Acesse o painel de administração da Moblix.
2. Siga pelo caminho “Loja virtual > Temas”.
3. Depois clique em “Editar o código”.
4. Selecione o arquivo desejado, e aperte em RESTAURAR TEMPLATE ORIGINAL.
IMPORTANTE: Ao restaurar o template original, todas as alterações realizadas diretamente nos códigos são perdidas, e a Moblix não realiza backups dos layouts customizados. Desta forma, ao realizar esta ação, você está ciente de que o tema personalizado que criou para seu site não estará mais disponível em nossos servidores, e é importante que tenha um backup caso queira aplicá-lo novamente no futuro.
Veja, abaixo, um exemplo de uma customização feita com o headless:
Componentes disponíveis para inclusão na Página Inicial (Home)
Alguns componentes estão disponíveis para importação na página inicial do seu site. São eles:
Lista de comandos para importar os componentes na página inicial:
- @CardPesquisa; (para o componente de pesquisa de passagens aéreas, hoteis e experiências)
- @ContainerOfertas; (componente que exibe ofertas nacionais e internacionais de passagens aéreas)
- @BannersHoteis; (ofertas de hoteis)
- @Instagram; (link para visualizar o instagram da empresa)
- @CarouselBanner; (banner em carrousel)
- @ProdutosIA; (ofertas de produtos com recomendação baseada em IA)
- @Produtos#Passeios#Layout-2; (ofertas de produtos na categoria passeios utilizando o layout 2)
- @Produtos_Pacotes; (ofertas de produtos na categoria Pacotes utilizando o layout 1)
- @QuadroNoticias; (últimos artigos do blog)
- @QuadroDepoimentos; (depoimentos da agência)
Importante: para inserir o componente de produtos, utilize esse padrão: @Produtos + #CATEGORIA + #LAYOUT. Por exemplo, para inserir o componente que exibe os produtos da categoria “Ingressos” no layout 2, utilize: “@Produtos#Ingressos#Layout-2;“.
Em caso de dúvidas não deixe de entrar em contato com nosso suporte.
Para mais tutoriais como esse acesse nossa Central de Atendimento.
