Layout

Como editar o código do layout do seu site

Leitura estimada: 5 minutos 391 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 HTMLCSS e Javascriptusando 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.

Leave a Comment

Compartilhe esta página

Como editar o código do layout do seu site

Ou copie o link

CONTEÚDO