Layout Como editar o código do layout do seu site Leitura estimada: 5 minutos 421 views 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. Posso retirar o nome da Moblix do rodapé da loja? Por questões de direitos autorias, não é possível retirar o nome da Moblix que aparece no rodapé da loja. Posso inserir a informação de desconto para pagamento à vista? Sim. Por exemplo: colocar na listagem de produto o valor para pagamento a vista. É possível fazer alterações no Checkout da loja? Não! No entanto, é possível replicar as principais cores da sua marca no checkout. Para saber como alterar as cores do checkout, consulte o tutorial abaixo: Consigo alterar alguma informação do arquivo Sitemap? 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. Marcado:Código FonteCssFront-EndHeadless commerceHTMLJavaScriptLayoutTemplate
